Merge pull request #67 from Synthetixio/dropdown-refactoring

fix(dropdown): fixed coloring of dropdown
Synthetixio · May 4, 2022 · 67ff413 · 67ff413
2 parents 88281ff + e48e802
commit 67ff413
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 19 deletions.
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -1,17 +1,18 @@
 import React, { HTMLAttributes } from 'react';
 import styled from 'styled-components';
 import colors from '../styles/colors';
+import { Colors } from '../types';
 
 interface DropdownProps extends HTMLAttributes<HTMLUListElement> {
 	elements: JSX.Element[];
-	noBackground?: boolean;
+	color: Colors;
 }
 
-export default function Dropdown({ elements, noBackground, ...rest }: DropdownProps) {
+export default function Dropdown({ elements, color, ...rest }: DropdownProps) {
 	return (
-		<StyledUnorderedList noBackground={noBackground} {...rest}>
-			{elements.map((element, index) => (
-				<StyledListElement isEven={index % 2 === 0} key={index} noBackground={noBackground}>
+		<StyledUnorderedList color={color} {...rest}>
+			{elements.map((element) => (
+				<StyledListElement className="darker-60" key={element.key}>
 					{element}
 				</StyledListElement>
 			))}
@@ -20,29 +21,38 @@ export default function Dropdown({ elements, noBackground, ...rest }: DropdownPr
 }
 
 const StyledUnorderedList = styled.ul<{
-	noBackground?: DropdownProps['noBackground'];
+	color: DropdownProps['color'];
 }>`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	background-color: ${({ noBackground }) => !noBackground && colors.backgroundColor};
+	border: 1px solid ${({ color }) => colors[color]};
+	background-color: ${({ color }) => colors[color]};
 	padding: 0;
 	border-radius: 8px;
 `;
 
-const StyledListElement = styled.li<{
-	isEven: boolean;
-	noBackground?: DropdownProps['noBackground'];
-}>`
+const StyledListElement = styled.li<{}>`
 	width: 100%;
 	list-style-type: none;
-	background-color: ${({ isEven, noBackground }) => isEven && !noBackground && 'rgba(0,0,0,0.2)'};
 	border-radius: 8px;
 	cursor: pointer;
+	:not(:first-child):not(:last-child) {
+		border-radius: 0px;
+	}
+	:first-child {
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
+	}
+	:last-child {
+		border-top-left-radius: 0px;
+		border-top-right-radius: 0px;
+	}
+
 	:hover {
-		background-color: ${colors.black};
+		background-color: transparent;
 	}
 	:active {
-		background-color: ${colors.black};
+		background-color: transparent;
 	}
 `;
diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Dropdown from '../src/components/Dropdown';
 import BinIcon from '../src/components/Icons/BinIcon';
@@ -10,13 +10,32 @@ export default {
 	decorators: [withDesign],
 } as ComponentMeta<typeof Dropdown>;
 
-export const Template: ComponentStory<typeof Dropdown> = (args) => <Dropdown {...args} />;
+export const Template: ComponentStory<typeof Dropdown> = (args) => {
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<>
+			<div onClick={() => setIsOpen(!isOpen)} style={{ color: 'wheat', position: 'relative' }}>
+				click me
+				{isOpen && (
+					<Dropdown
+						{...args}
+						style={{ position: 'absolute', bottom: '-55px', left: '20px', maxWidth: 200 }}
+					/>
+				)}
+			</div>
+		</>
+	);
+};
 
 Template.args = {
 	elements: [
-		<span style={{ color: 'white' }}>test</span>,
-		<span style={{ color: 'white' }}>done</span>,
-		<BinIcon />,
+		<span style={{ color: 'white' }} key="12">
+			test
+		</span>,
+		<span style={{ color: 'white' }} key="123">
+			done
+		</span>,
+		<BinIcon key="1232" />,
 	],
 };