diff --git a/.changeset/neat-phones-hug.md b/.changeset/neat-phones-hug.md new file mode 100644 index 0000000..a845057 --- /dev/null +++ b/.changeset/neat-phones-hug.md @@ -0,0 +1,6 @@ +--- +'@groupos/ui-components': minor +--- + +- add 'danger' variant to Button +- maintain the width of the button while loading diff --git a/packages/components/node_modules/.bin/sb b/packages/components/node_modules/.bin/sb index 6987abe..6c9439f 100755 --- a/packages/components/node_modules/.bin/sb +++ b/packages/components/node_modules/.bin/sb @@ -6,12 +6,12 @@ case `uname` in esac if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules" else - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" fi if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/index.js" "$@" + exec "$basedir/node" "$basedir/../storybook/index.js" "$@" else - exec node "$basedir/../../../../node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/index.js" "$@" + exec node "$basedir/../storybook/index.js" "$@" fi diff --git a/packages/components/node_modules/.bin/storybook b/packages/components/node_modules/.bin/storybook index 6987abe..6c9439f 100755 --- a/packages/components/node_modules/.bin/storybook +++ b/packages/components/node_modules/.bin/storybook @@ -6,12 +6,12 @@ case `uname` in esac if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules" else - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/storybook@7.0.24/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" fi if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/index.js" "$@" + exec "$basedir/node" "$basedir/../storybook/index.js" "$@" else - exec node "$basedir/../../../../node_modules/.pnpm/storybook@7.0.24/node_modules/storybook/index.js" "$@" + exec node "$basedir/../storybook/index.js" "$@" fi diff --git a/packages/components/node_modules/.bin/tsup b/packages/components/node_modules/.bin/tsup index 13af4f6..0e4b275 100755 --- a/packages/components/node_modules/.bin/tsup +++ b/packages/components/node_modules/.bin/tsup @@ -6,12 +6,12 @@ case `uname` in esac if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules" else - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" fi if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/cli-default.js" "$@" + exec "$basedir/node" "$basedir/../tsup/dist/cli-default.js" "$@" else - exec node "$basedir/../../../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/cli-default.js" "$@" + exec node "$basedir/../tsup/dist/cli-default.js" "$@" fi diff --git a/packages/components/node_modules/.bin/tsup-node b/packages/components/node_modules/.bin/tsup-node index 1db3680..327059c 100755 --- a/packages/components/node_modules/.bin/tsup-node +++ b/packages/components/node_modules/.bin/tsup-node @@ -6,12 +6,12 @@ case `uname` in esac if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules" else - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" fi if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/cli-node.js" "$@" + exec "$basedir/node" "$basedir/../tsup/dist/cli-node.js" "$@" else - exec node "$basedir/../../../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.6/node_modules/tsup/dist/cli-node.js" "$@" + exec node "$basedir/../tsup/dist/cli-node.js" "$@" fi diff --git a/packages/components/node_modules/.bin/vite b/packages/components/node_modules/.bin/vite index b06db64..bad52c0 100755 --- a/packages/components/node_modules/.bin/vite +++ b/packages/components/node_modules/.bin/vite @@ -6,12 +6,12 @@ case `uname` in esac if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules" else - export NODE_PATH="/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules:/Users/angelicaturla/work/station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" + export NODE_PATH="/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules:/Users/amineelouarti/Documents/work_station/ui-components/node_modules/.pnpm/node_modules:$NODE_PATH" fi if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/vite.js" "$@" + exec "$basedir/node" "$basedir/../vite/bin/vite.js" "$@" else - exec node "$basedir/../../../../node_modules/.pnpm/vite@4.3.9_@types+node@20.3.2_less@4.1.3/node_modules/vite/bin/vite.js" "$@" + exec node "$basedir/../vite/bin/vite.js" "$@" fi diff --git a/packages/components/src/button/Button.stories.tsx b/packages/components/src/button/Button.stories.tsx index 99c2735..ef16232 100644 --- a/packages/components/src/button/Button.stories.tsx +++ b/packages/components/src/button/Button.stories.tsx @@ -55,6 +55,10 @@ export const Error: Story = { render: (args) => , } +export const Danger: Story = { + render: (args) => , +} + export const Input: Story = { render: (args) => , } diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index cc79f0a..48b1637 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -13,6 +13,7 @@ const buttonVariants = cva( input: '!ui-bg-gray-100 ui-border-gray-100 !ui-text-marbleWhite hover:ui-bg-gray-80', unemphasized: '!ui-bg-transparent ui-border-white hover:ui-bg-gray-90 !ui-text-white', error: '!ui-bg-transparent ui-border-red-100 hover:ui-bg-gray-90 !ui-text-red-100', + danger: '!ui-bg-red-100 !ui-text-white ui-border-red-100', }, size: { sm: 'ui-px-4 ui-text-base-xxs ui-max-h-7 ui-h-7', @@ -33,17 +34,37 @@ export const Button = React.forwardRef< children: React.ReactNode loading?: boolean } ->(({ children, className, variant = 'primary', size = 'md', fullWidth = false, loading, ...props }, ref) => ( - -)) +>(({ children, className, variant = 'primary', size = 'md', fullWidth = false, loading, style, ...props }, ref) => { + const buttonRef = React.useRef(null) + + React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement) + + // prevent button from shrinking when loading + const [width, setWidth] = React.useState() + React.useLayoutEffect(() => { + if (loading) return + if (buttonRef.current) { + setWidth(buttonRef.current.offsetWidth) + } + }, [variant, size, fullWidth, loading]) + + return ( + + ) +}) const spinnerVariants = cva('animate-spin', { variants: { @@ -53,6 +74,7 @@ const spinnerVariants = cva('animate-spin', { input: 'ui-text-marbleWhite', unemphasized: 'ui-text-white', error: 'ui-text-red100', + danger: 'ui-text-white', }, size: { sm: 'ui-w-5 ui-h-5',