fix(Dropdown): Style cleanup

heydoctor · Oct 16, 2018 · 3300d0f · 3300d0f
1 parent e0c7468
commit 3300d0f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 deletions.
diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js
@@ -160,68 +160,87 @@ export default class Dropdown extends React.Component {
   }
 }
 
-Dropdown.Header = createComponent({
+const DropdownHeader = createComponent({
   name: 'DropdownHeader',
   style: css`
-    padding: 12px 16px;
+    padding: 8px 12px;
     font-size: 1rem;
     border-bottom: 1px solid ${p => p.theme.colors.grayLight};
   `,
 });
 
+Dropdown.Header = ({ title, children }) => (
+  <DropdownHeader>
+    {title && <Dropdown.Title>{title}</Dropdown.Title>}
+    {children}
+  </DropdownHeader>
+);
+
+Dropdown.Title = createComponent({
+  name: 'DropdownTitle',
+  tag: 'span',
+  style: css`
+    display: block;
+    font-weight: 500;
+    font-size: 1rem;
+    margin: 0;
+  `,
+});
+
 Dropdown.Body = createComponent({
   name: 'DropdownBody',
   as: Box,
   style: css`
-    padding: 1rem;
+    padding: 12px;
   `,
 });
 
-Dropdown.Title = createComponent({
-  name: 'DropdownTitle',
-  tag: 'h3',
+Dropdown.SectionTitle = createComponent({
+  name: 'DropdownSectionTitle',
+  tag: 'span',
   style: ({ theme }) => css`
     display: block;
     font-weight: 600;
-    font-size: 14px;
     color: ${theme.colors.primary};
-    margin: 0 0 4px;
   `,
 });
 
 Dropdown.Item = createComponent({
   name: 'DropdownItem',
-  style: ({ disabled }) => css`
-    opacity: ${disabled ? 0.5 : 1};
+  as: Box,
+  style: ({ disabled, theme }) => css`
+    display: flex;
+    align-items: center;
+    opacity: ${disabled ? 0.3 : 1};
     pointer-events: ${disabled ? 'none' : 'initial'};
     text-decoration: none;
     color: inherit;
-    display: flex;
-    align-items: center;
-    margin-left: -1rem;
-    margin-right: -1rem;
-    padding: 4px 1rem;
-    font-size: 14px;
     cursor: pointer;
+    margin: 0 -12px;
+    padding: 4px 12px;
+    transition: 125ms background;
 
-    & + ${Dropdown.Title} {
+    & + ${Dropdown.SectionTitle} {
       margin-top: 1rem;
     }
 
     &:hover {
       color: inherit;
+      background: ${theme.colors.grayLightest};
     }
   `,
 });
 
 Dropdown.Footer = createComponent({
   name: 'DropdownFooter',
-  as: 'footer',
+  as: Box,
+  attrs: {
+    as: 'footer',
+  },
   style: ({ theme }) => css`
     background: ${theme.colors.grayLightest};
-    padding: 12px 16px;
+    padding: 8px 12px;
     border-radius: 0 0 4px 4px;
     border-top: 1px solid ${theme.colors.grayLight};
-    font-size: 14px;
   `,
 });
diff --git a/src/Dropdown/Dropdown.mdx b/src/Dropdown/Dropdown.mdx
@@ -23,14 +23,14 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos
   >
     {({ close }) => (
       <Fragment>
-        <Dropdown.Header>Header</Dropdown.Header>
+        <Dropdown.Header title="Dropdown" />
 
         <Dropdown.Body>
-          <Dropdown.Title>Section One</Dropdown.Title>
+          <Dropdown.SectionTitle>Section One</Dropdown.SectionTitle>
           <Dropdown.Item>Item One</Dropdown.Item>
           <Dropdown.Item>Item Two</Dropdown.Item>
 
-          <Dropdown.Title>Section Two</Dropdown.Title>
+          <Dropdown.SectionTitle>Section Two</Dropdown.SectionTitle>
           <Dropdown.Item onClick={close}>Item One</Dropdown.Item>
           <Dropdown.Item disabled>Item Two</Dropdown.Item>
         </Dropdown.Body>