fix: update close button

bobbychan · Dec 7, 2023 · 9c9d9b4 · 9c9d9b4
1 parent 551763e
commit 9c9d9b4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 64 deletions.
diff --git a/.changeset/beige-files-help.md b/.changeset/beige-files-help.md
@@ -0,0 +1,6 @@
+---
+'@alice-ui/react': patch
+'@alice-ui/theme': patch
+---
+
+update close button
diff --git a/packages/react/src/button/close-button.tsx b/packages/react/src/button/close-button.tsx
@@ -1,47 +1,18 @@
 'use client';
 
 import { XMarkIcon } from '@alice-ui/icons';
-import type { CloseButtonVariantProps } from '@alice-ui/theme';
-import { closeButton } from '@alice-ui/theme';
-import { ForwardedRef, cloneElement, forwardRef, isValidElement, useMemo } from 'react';
-import type { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { Button as AriaButton } from 'react-aria-components';
+import { ForwardedRef, forwardRef } from 'react';
+import { IconButton, IconButtonProps } from './icon-button';
 
-export interface CloseButtonProps
-  extends Omit<AriaButtonProps, 'className'>,
-    CloseButtonVariantProps {
-  className?: string;
-}
-
-function CloseButton(props: CloseButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
-  const { variant, color, size = 'md', radius, className, children, ...otherProps } = props;
+function CloseButton(props: IconButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+  const { children = <XMarkIcon />, ...otherProps } = props;
 
-  const styles = useMemo(
-    () =>
-      closeButton({
-        size,
-        color,
-        variant,
-        radius,
-        className,
-      }),
-    [className, color, radius, size, variant],
-  );
-
-  const element = children;
-  const _children = isValidElement(element) ? (
-    cloneElement(element as any, {
-      'aria-hidden': true,
-      focusable: false,
-    })
-  ) : (
-    <XMarkIcon />
-  );
+  const ariaLabel = props['aria-label'] || 'Close';
 
   return (
-    <AriaButton ref={ref} className={styles} aria-label="Close" {...otherProps}>
-      {_children}
-    </AriaButton>
+    <IconButton ref={ref} {...otherProps} aria-label={ariaLabel}>
+      {children}
+    </IconButton>
   );
 }
 

diff --git a/packages/react/src/modal/modal-close-button.tsx b/packages/react/src/modal/modal-close-button.tsx
@@ -20,6 +20,7 @@ function ModalCloseButton(props: ModalCloseButtonProps, ref: ForwardedRef<HTMLBu
       onPress={callAllHandlers(onPress, () => state.close())}
       radius="full"
       variant="light"
+      size="sm"
       {...otherProps}
     >
       {children}

diff --git a/packages/react/stories/close-button.stories.tsx b/packages/react/stories/close-button.stories.tsx
@@ -5,7 +5,6 @@ import { CloseButton } from '../src/button';
 const meta: Meta<typeof CloseButton> = {
   title: 'Components/CloseButton',
   component: CloseButton,
-  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: {
@@ -23,7 +22,7 @@ const meta: Meta<typeof CloseButton> = {
       control: {
         type: 'select',
       },
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
     },
     radius: {
       control: {
@@ -89,6 +88,7 @@ export const Sizes: Story = {
   },
   render: (args) => (
     <div className="flex items-center gap-4">
+      <CloseButton size="xs" {...args} />
       <CloseButton size="sm" {...args} />
       <CloseButton size="md" {...args} color="primary" />
       <CloseButton size="lg" {...args} color="secondary" />

diff --git a/packages/theme/src/components/button.ts b/packages/theme/src/components/button.ts
@@ -386,31 +386,7 @@ const buttonGroup = tv({
   },
 });
 
-/**
- * CloseButton component
- *
- * const styles = closeButton({...})
- */
-const closeButton = tv({
-  extend: button,
-  compoundVariants: [
-    {
-      size: 'sm',
-      class: ['min-w-[1.5rem]', 'w-6', 'h-6', 'text-[0.75rem]', 'gap-0', 'px-0'],
-    },
-    {
-      size: 'md',
-      class: ['min-w-[2rem]', 'w-8', 'h-8', 'text-[1rem]', 'gap-0', 'px-0'],
-    },
-    {
-      size: 'lg',
-      class: ['min-w-[2.5rem]', 'w-10', 'h-10', 'text-[1.25rem]', 'gap-0', 'px-0'],
-    },
-  ],
-});
-
 export type ButtonVariantProps = VariantProps<typeof button>;
 export type ButtonGroupVariantProps = VariantProps<typeof buttonGroup>;
-export type CloseButtonVariantProps = VariantProps<typeof closeButton> & ButtonVariantProps;
 
-export { button, buttonGroup, closeButton };
+export { button, buttonGroup };