FIXUP: Dropdown

relative-ci · Feb 27, 2022 · 4d44f22 · 4d44f22
1 parent c898d9d
commit 4d44f22
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/packages/ui/src/ui/dropdown/dropdown.jsx b/packages/ui/src/ui/dropdown/dropdown.jsx
@@ -8,17 +8,17 @@ import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
 export const Dropdown = (props) => {
-  const { className, label, ariaLabel, glyph, activeLabel, children } = props;
-  const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
+  const { className, label, ariaLabel, glyph, children } = props;
+  const rootClassName = cx(css.root, className);
 
   const menuState = useMenuState();
   const baseId = process.env.NODE_ENV === 'test' && 'id-test';
 
   return (
-    <>
+    <div className={rootClassName}>
       <MenuButton
         state={menuState}
-        className={rootClassName}
+        className={css.button}
         tabIndex={null}
         {...(baseId && { id: baseId })}
       >
@@ -42,7 +42,7 @@ export const Dropdown = (props) => {
             })
           : children}
       </Menu>
-    </>
+    </div>
   );
 };
 
@@ -51,7 +51,6 @@ Dropdown.defaultProps = {
   label: null,
   ariaLabel: '',
   glyph: null,
-  activeLabel: false,
 };
 
 Dropdown.propTypes = {
@@ -70,9 +69,6 @@ Dropdown.propTypes = {
   /** Dropdown open state */
   open: PropTypes.bool.isRequired,
 
-  /** Active label flag */
-  activeLabel: PropTypes.bool,
-
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 };
diff --git a/packages/ui/src/ui/dropdown/dropdown.module.css b/packages/ui/src/ui/dropdown/dropdown.module.css
@@ -1,4 +1,8 @@
 .root {
+  display: inline-block;
+}
+
+.button {
   background: none;
   border: none;
   padding: 0;
@@ -18,9 +22,9 @@
   color: var(--color-text-light);
 }
 
-.root:hover,
-.root:focus,
-.root:active {
+.button:hover,
+.button:focus,
+.button:active {
   outline: none;
   box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
@@ -44,10 +48,6 @@
   box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.activeLabel .label {
-  color: var(--color-text);
-}
-
 .menuItem {
   display: block;
   appearance: none;