Merge pull request #4253 from relative-ci/fix-dropdown-button

fix(ui): Dropdown - use Button
relative-ci · Feb 17, 2024 · 7d6bc4c · 7d6bc4c
2 parents 0d4afed + 28edfdf
commit 7d6bc4c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 67 deletions.
diff --git a/packages/ui/src/ui/button/button.module.css b/packages/ui/src/ui/button/button.module.css
@@ -250,14 +250,12 @@ a.root {
 .small {
   font-size: var(--size-small);
   gap: var(--space-xxxsmall);
-  line-height: var(--space-xsmall);
+  line-height: var(--space-small);
 }
 
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
-  margin-top: -1px;
-  margin-bottom: -1px;
 }
 
 .medium {

diff --git a/packages/ui/src/ui/button/button.stories.tsx b/packages/ui/src/ui/button/button.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
-import { Button } from '.';
+import { Button, BUTTON_SIZE, BUTTON_KIND } from '.';
 
 export default {
   title: 'UI/Button',
@@ -26,7 +26,7 @@ export const All = () => (
     <Stack space="medium">
       <h2>Size</h2>
       <Items>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Button size={size} key={size}>
             Action {size}
           </Button>
@@ -37,39 +37,39 @@ export const All = () => (
       <h2>Kind</h2>
       <Stack space="medium">
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>Active</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>As link</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} as="a" href="#">
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>With icon</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>Disabled</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
@@ -80,12 +80,12 @@ export const All = () => (
     <Stack space="medium">
       <h2>Outline & Kind</h2>
       <Stack space="medium">
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button outline size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button outline kind={kind} key={kind} size={size}>
                 Action {kind}
               </Button>
@@ -97,19 +97,19 @@ export const All = () => (
           <Button outline active>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button outline kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>With icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 outline
@@ -123,10 +123,10 @@ export const All = () => (
           </Items>
         ))}
         <h3>Only icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 outline
@@ -142,7 +142,7 @@ export const All = () => (
           <Button outline disabled>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button outline kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
@@ -153,12 +153,12 @@ export const All = () => (
     <Stack space="medium">
       <h2>Solid & Kind</h2>
       <Stack space="medium">
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button solid size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button solid kind={kind} key={kind} size={size}>
                 Action {kind}
               </Button>
@@ -170,19 +170,19 @@ export const All = () => (
           <Button solid active>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button solid kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>With icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 solid
@@ -196,10 +196,10 @@ export const All = () => (
           </Items>
         ))}
         <h3>Only icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 solid
@@ -215,7 +215,7 @@ export const All = () => (
           <Button solid disabled>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button solid kind={kind} key={kind} disabled>
               Action {kind}
             </Button>

diff --git a/packages/ui/src/ui/button/button.tsx b/packages/ui/src/ui/button/button.tsx
@@ -5,13 +5,13 @@ import { Button as ButtonBaseComponent } from 'ariakit/button';
 import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
-const SIZE = {
+export const BUTTON_SIZE = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large',
 } as const;
 
-const KIND = {
+export const BUTTON_KIND = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   DANGE: 'danger',
@@ -20,8 +20,8 @@ const KIND = {
   SUCCES: 'success',
 } as const;
 
-type Size = (typeof SIZE)[keyof typeof SIZE];
-type Kind = (typeof KIND)[keyof typeof KIND];
+type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];
 
 interface ButtonProps<T extends React.ElementType> {
   outline?: boolean;
@@ -37,7 +37,7 @@ interface ButtonProps<T extends React.ElementType> {
   rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 
-export const Button = <T extends React.ElementType = 'button'>(
+const ButtonComponent = <T extends React.ElementType = 'button'>(
   props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
 ) => {
   const {
@@ -92,5 +92,4 @@ export const Button = <T extends React.ElementType = 'button'>(
   );
 };
 
-Button.SIZE = SIZE;
-Button.KIND = KIND;
+export const Button = React.forwardRef(ButtonComponent);
diff --git a/packages/ui/src/ui/dropdown/dropdown.jsx b/packages/ui/src/ui/dropdown/dropdown.jsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 
-import { FlexStack } from '../../layout/flex-stack';
-import { Icon } from '../icon';
+import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 
 const Item = ({ className = '', isActive = false, ...restProps }) => (
@@ -29,15 +28,16 @@ export const Dropdown = (props) => {
   return (
     <div className={rootClassName}>
       <MenuButton
-        state={menuState}
-        className={cx(css.button, buttonClassName)}
+        as={Button}
+        outline
+        size={BUTTON_SIZE.SMALL}
+        glyph={glyph}
         disabled={disabled}
+        state={menuState}
         tabIndex={null}
+        className={cx(css.button, buttonClassName)}
       >
-        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
-          {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
-          {label && <span className={css.labelText}>{label}</span>}
-        </FlexStack>
+        {label}
       </MenuButton>
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'

diff --git a/packages/ui/src/ui/dropdown/dropdown.module.css b/packages/ui/src/ui/dropdown/dropdown.module.css
@@ -1,31 +1,5 @@
-.root {
-  display: inline-block;
-}
-
 .button {
-  background: none;
-  border: none;
-  padding: 0;
-
-  border: 1px solid var(--color-outline);
-  border-radius: var(--radius-small);
-  padding: calc(var(--space-xxsmall) - 1px);
-
-  appearance: none;
-  background: none;
-  font-size: var(--size-small);
-  line-height: var(--space-small);
   white-space: nowrap;
-  color: var(--color-text-light);
-}
-
-.button[aria-expanded=true],
-.button:hover,
-.button:focus,
-.button:active {
-  outline: none;
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
 }
 
 .button[disabled] {
@@ -62,6 +36,7 @@
   font-size: var(--size-small);
   line-height: inherit;
   text-decoration: none;
+  cursor: default;
 }
 
 .item[data-active-item],

diff --git a/packages/ui/src/ui/filters/filters.module.css b/packages/ui/src/ui/filters/filters.module.css
@@ -33,6 +33,7 @@
   transform: translateY(-50%);
   padding: var(--space-xxxsmall);
   font-size: var(--size-xsmall);
+  line-height: 1.1;
 }
 
 /** cover item text */