refactor: change button group

themesberg · Apr 15, 2022 · d695835 · d695835
1 parent 559536a
commit d695835
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 33 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,13 +1,13 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 
-import { Button, ButtonProps } from '.';
+import { Button, ButtonComponentProps } from '.';
 
 export default {
   title: 'Components/Buttons',
   component: Button,
 } as Meta;
 
-const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+const Template: Story<ButtonComponentProps> = (args) => <Button {...args} />;
 
 export const DefaultButton = Template.bind({});
 DefaultButton.storyName = 'Default';

diff --git a/src/components/ButtonGroup.tsx → src/components/Button/ButtonGroup.tsx b/src/components/ButtonGroup.tsx → src/components/Button/ButtonGroup.tsx
@@ -1,6 +1,6 @@
 import { Children, cloneElement, FC, PropsWithChildren, ReactElement, useMemo } from 'react';
 
-import { ButtonProps } from './Button';
+import { ButtonComponentProps } from '.';
 
 export type ButtonGroupProps = PropsWithChildren<{
   pill?: boolean;
@@ -10,12 +10,16 @@ export type ButtonGroupProps = PropsWithChildren<{
 export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => {
   const items = useMemo(
     () =>
-      Children.map(children as ReactElement<ButtonProps>[], (child, index) =>
+      Children.map(children as ReactElement<ButtonComponentProps>[], (child, index) =>
         cloneElement(child, {
           pill,
           outline,
           positionInGroup:
-            index === 0 ? 'start' : index === (children as ReactElement<ButtonProps>[]).length - 1 ? 'end' : 'middle',
+            index === 0
+              ? 'start'
+              : index === (children as ReactElement<ButtonComponentProps>[]).length - 1
+              ? 'end'
+              : 'middle',
         }),
       ),
     [children, outline, pill],

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps, FC, ReactNode } from 'react';
 import classNames from 'classnames';
+import { ButtonGroup } from './ButtonGroup';
 
 type Color = 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
 type GradientMonochrome = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
@@ -14,7 +15,7 @@ type GradientDuoTone =
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type PositionInGroup = 'start' | 'middle' | 'end';
 
-export type ButtonProps = Omit<ComponentProps<'button'>, 'color'> & {
+export type ButtonComponentProps = Omit<ComponentProps<'button'>, 'color'> & {
   pill?: boolean;
   outline?: boolean;
   label?: ReactNode;
@@ -88,7 +89,7 @@ const iconSizeClasses: Record<Size, string> = {
   xl: '!p-3',
 };
 
-export const Button: FC<ButtonProps> = ({
+const ButtonComponent: FC<ButtonComponentProps> = ({
   children,
   className,
   label,
@@ -150,3 +151,7 @@ export const Button: FC<ButtonProps> = ({
     </span>
   </button>
 );
+
+export const Button = Object.assign(ButtonComponent, {
+  Group: ButtonGroup,
+});
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -2,13 +2,13 @@ import { ComponentProps, FC, PropsWithChildren, ReactNode, useMemo } from 'react
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';
 import classNames from 'classnames';
 
-import { Button, ButtonProps } from '../Button';
+import { Button, ButtonComponentProps } from '../Button';
 import { Tooltip, TooltipProps } from '../Tooltip';
 import { DropdownItem } from './DropdownItem';
 import { DropdownDivider } from './DropdownDivider';
 import { DropdownHeader } from './DropdownHeader';
 
-export type DropdownProps = ButtonProps &
+export type DropdownProps = ButtonComponentProps &
   Omit<TooltipProps, 'content' | 'style' | 'animation' | 'arrow'> & {
     className?: string;
     label: ReactNode;

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -4,7 +4,6 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Button';
-export * from './ButtonGroup';
 export * from './Card';
 export * from './Carousel';
 export * from './Dropdown';

diff --git a/src/pages/ButtonGroupPage.tsx b/src/pages/ButtonGroupPage.tsx
@@ -2,24 +2,24 @@ import { FC } from 'react';
 import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
 
 import { CodeExample, DemoPage } from './DemoPage';
-import { Button, ButtonGroup } from '../components';
+import { Button } from '../components';
 
 const ButtonGroupPage: FC = () => {
   const examples: CodeExample[] = [
     {
       title: 'Default example',
       code: (
-        <ButtonGroup>
+        <Button.Group>
           <Button color="alternative">Profile</Button>
           <Button color="alternative">Settings</Button>
           <Button color="alternative">Messages</Button>
-        </ButtonGroup>
+        </Button.Group>
       ),
     },
     {
       title: 'Group buttons with icons',
       code: (
-        <ButtonGroup>
+        <Button.Group>
           <Button color="alternative">
             <HiUserCircle className="mr-3 h-4 w-4" /> Profile
           </Button>
@@ -29,58 +29,58 @@ const ButtonGroupPage: FC = () => {
           <Button color="alternative">
             <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
           </Button>
-        </ButtonGroup>
+        </Button.Group>
       ),
     },
     {
       title: 'All colors',
       code: (
         <div className="flex flex-wrap gap-2">
-          <ButtonGroup>
+          <Button.Group>
             <Button color="blue">Profile</Button>
             <Button color="blue">Settings</Button>
             <Button color="blue">Messages</Button>
-          </ButtonGroup>
-          <ButtonGroup>
+          </Button.Group>
+          <Button.Group>
             <Button gradientMonochrome="blue">Profile</Button>
             <Button gradientMonochrome="blue">Settings</Button>
             <Button gradientMonochrome="blue">Messages</Button>
-          </ButtonGroup>
-          <ButtonGroup>
+          </Button.Group>
+          <Button.Group>
             <Button gradientDuoTone="greenToBlue">Profile</Button>
             <Button gradientDuoTone="greenToBlue">Settings</Button>
             <Button gradientDuoTone="greenToBlue">Messages</Button>
-          </ButtonGroup>
+          </Button.Group>
         </div>
       ),
     },
     {
       title: 'Outline',
       code: (
         <div className="flex flex-wrap gap-2">
-          <ButtonGroup outline>
+          <Button.Group outline>
             <Button color="alternative">Profile</Button>
             <Button color="alternative">Settings</Button>
             <Button color="alternative">Messages</Button>
-          </ButtonGroup>
-          <ButtonGroup outline>
+          </Button.Group>
+          <Button.Group outline>
             <Button gradientMonochrome="blue">Profile</Button>
             <Button gradientMonochrome="blue">Settings</Button>
             <Button gradientMonochrome="blue">Messages</Button>
-          </ButtonGroup>
-          <ButtonGroup outline>
+          </Button.Group>
+          <Button.Group outline>
             <Button gradientDuoTone="cyanToBlue">Profile</Button>
             <Button gradientDuoTone="cyanToBlue">Settings</Button>
             <Button gradientDuoTone="cyanToBlue">Messages</Button>
-          </ButtonGroup>
+          </Button.Group>
         </div>
       ),
     },
     {
       title: 'Outline with icons',
       code: (
         <div className="flex flex-wrap gap-2">
-          <ButtonGroup outline>
+          <Button.Group outline>
             <Button color="alternative">
               <HiUserCircle className="mr-3 h-4 w-4" /> Profile
             </Button>
@@ -90,8 +90,8 @@ const ButtonGroupPage: FC = () => {
             <Button color="alternative">
               <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
             </Button>
-          </ButtonGroup>
-          <ButtonGroup outline>
+          </Button.Group>
+          <Button.Group outline>
             <Button gradientMonochrome="blue">
               <HiUserCircle className="mr-3 h-4 w-4" /> Profile
             </Button>
@@ -101,8 +101,8 @@ const ButtonGroupPage: FC = () => {
             <Button gradientMonochrome="blue">
               <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
             </Button>
-          </ButtonGroup>
-          <ButtonGroup outline>
+          </Button.Group>
+          <Button.Group outline>
             <Button gradientDuoTone="cyanToBlue">
               <HiUserCircle className="mr-3 h-4 w-4" /> Profile
             </Button>
@@ -112,7 +112,7 @@ const ButtonGroupPage: FC = () => {
             <Button gradientDuoTone="cyanToBlue">
               <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
             </Button>
-          </ButtonGroup>
+          </Button.Group>
         </div>
       ),
     },