Merge pull request #4240 from relative-ci/dropdown-disabled-state

enhance(ui): Dropdown - add disabled state
relative-ci · Feb 12, 2024 · 467a9df · 467a9df
2 parents 04d3a74 + 511c88b
commit 467a9df
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/packages/ui/src/ui/dropdown/dropdown.jsx b/packages/ui/src/ui/dropdown/dropdown.jsx
@@ -22,13 +22,18 @@ Item.defaultProps = {
 };
 
 export const Dropdown = (props) => {
-  const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
+  const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
   const rootClassName = cx(css.root, className);
   const menuState = useMenuState();
 
   return (
     <div className={rootClassName}>
-      <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
+      <MenuButton
+        state={menuState}
+        className={cx(css.button, buttonClassName)}
+        disabled={disabled}
+        tabIndex={null}
+      >
         <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label && <span className={css.labelText}>{label}</span>}
@@ -54,6 +59,7 @@ Dropdown.defaultProps = {
   label: null,
   ariaLabel: '',
   glyph: null,
+  disabled: false,
 };
 
 Dropdown.propTypes = {
@@ -72,6 +78,9 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
+  /** Dropdown button disabled attribute */
+  disabled: 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
@@ -28,6 +28,10 @@
   color: var(--color-text);
 }
 
+.button[disabled] {
+  color: var(--color-text-ultra-light);
+}
+
 .dropdown {
   position: absolute;
   left: 0;

diff --git a/packages/ui/src/ui/dropdown/dropdown.stories.jsx b/packages/ui/src/ui/dropdown/dropdown.stories.jsx
@@ -11,28 +11,25 @@ export default {
 
 export const Defualt = () => (
   <Dropdown glyph="filter" label="Toggle">
-    <Dropdown.Item>
-      Option 1
-    </Dropdown.Item>
-    <Dropdown.Item>
-      Option 2
-    </Dropdown.Item>
+    <Dropdown.Item>Option 1</Dropdown.Item>
+    <Dropdown.Item>Option 2</Dropdown.Item>
+  </Dropdown>
+);
+
+export const Disabled = () => (
+  <Dropdown glyph="filter" label="Toggle" disabled>
+    <Dropdown.Item>Option 1</Dropdown.Item>
+    <Dropdown.Item>Option 2</Dropdown.Item>
   </Dropdown>
 );
 
 export const WithRenderFn = () => (
   <Dropdown glyph="filter" label="Toggle">
     {({ MenuItem, menuItemClassName, menu }) => (
       <>
-        <MenuItem className={menuItemClassName}>
-          Option 1
-        </MenuItem>
-        <MenuItem className={menuItemClassName}>
-          Option 2
-        </MenuItem>
-        <MenuItem className={menuItemClassName}>
-          Option 3
-        </MenuItem>
+        <MenuItem className={menuItemClassName}>Option 1</MenuItem>
+        <MenuItem className={menuItemClassName}>Option 2</MenuItem>
+        <MenuItem className={menuItemClassName}>Option 3</MenuItem>
         <button type="button" onClick={menu.toggle}>
           Toggle dropdown
         </button>