Skip to content

Commit

Permalink
Merge pull request #4253 from relative-ci/fix-dropdown-button
Browse files Browse the repository at this point in the history 
fix(ui): Dropdown - use Button
  • Loading branch information
@vio
vio authored Feb 17, 2024
2 parents 0d4afed + 28edfdf commit 7d6bc4c
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 67 deletions.
4 changes: 1 addition & 3 deletions packages/ui/src/ui/button/button.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
46 changes: 23 additions & 23 deletions packages/ui/src/ui/button/button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
13 changes: 6 additions & 7 deletions packages/ui/src/ui/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -92,5 +92,4 @@ export const Button = <T extends React.ElementType = 'button'>(
);
};

Button.SIZE = SIZE;
Button.KIND = KIND;
export const Button = React.forwardRef(ButtonComponent);
16 changes: 8 additions & 8 deletions packages/ui/src/ui/dropdown/dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand All @@ -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'
Expand Down
27 changes: 1 addition & 26 deletions packages/ui/src/ui/dropdown/dropdown.module.css
View file
Original file line number Diff line number Diff line change
@@ -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] {
Expand Down Expand Up @@ -62,6 +36,7 @@
font-size: var(--size-small);
line-height: inherit;
text-decoration: none;
cursor: default;
}

.item[data-active-item],
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/ui/filters/filters.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
transform: translateY(-50%);
padding: var(--space-xxxsmall);
font-size: var(--size-xsmall);
line-height: 1.1;
}

/** cover item text */
Expand Down

0 comments on commit 7d6bc4c

Please sign in to comment.