refactor(button): ♻️ update button related components (#41)

adaptui · Jan 20, 2021 · 7e39af2 · 7e39af2 · vercel · Jan 20, 2021
1 parent 60143f2
commit 7e39af2
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 100 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ["../src/**/stories/*.stories.@(ts|tsx)"],
+  stories: ["../src/Tag/stories/*.stories.@(ts|tsx)"],
   addons: ["@storybook/addon-essentials"],
   typescript: {
     reactDocgen: false,

diff --git a/preset.js b/preset.js
@@ -423,6 +423,7 @@ const renderlesskitConfig = {
       "focus-within",
       "lib:focus",
       "focus",
+      "active",
     ],
   },
   plugins: [
@@ -490,30 +491,10 @@ const renderlesskitConfig = {
         const variantName = variant ? `${variant}:${dataName}` : dataName;
 
         addVariant(variantName, ({ modifySelectors, separator }) => {
-          // modifySelectors(({ className }) => {
-          //   const selector = selectorClass => {
-          //     // `.${e(`is-range-selection${separator}${className}`)}[data-is-range-selection]`
-          //     if (dataBool)
-          //       return `.${e(`${selectorClass}`)}[data-${dataName}]`;
-          //     // `.${e(`aria-selected${separator}${className}`)}[aria-selected="true"]`
-          //     return `.${e(`${selectorClass}`)}[${dataName}="true"]`;
-          //   };
-          //   // `aria-selected${separator}${className}`
-          //   const dataClass = `${dataName}${separator}${className}`;
-          //   // `lib${separator}aria-selected${separator}${className}`
-          //   const variantDataClass = variant
-          //     ? `${variant}${separator}${dataClass}`
-          //     : dataClass;
-
-          //   return selector(variantDataClass);
-          // });
-
           const parser = selectorParser(selectors => {
             selectors.walkClasses(sel => {
-              // `aria-selected${separator}${className}`
               const dataClass = `${dataName}${separator}${sel.value}`;
 
-              // `lib${separator}aria-selected${separator}${className}`
               if (variant) {
                 sel.value = `${variant}${separator}${dataClass}`;
               } else {

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -2,11 +2,12 @@ import React from "react";
 import { cx } from "@renderlesskit/react";
 import { Button as AriaButton, ButtonProps as AriaButtonProps } from "reakit";
 
+import { Box } from "../box";
 import { useTheme } from "../theme";
 import { Spinner } from "../spinner";
-import { Box, BoxProps } from "../box";
 import { useButtonGroup } from "./ButtonGroup";
 import { forwardRefWithAs } from "../utils/types";
+import { ButtonIcon } from "./ButtonIcon";
 
 export type ButtonProps = Omit<AriaButtonProps, "prefix"> & {
   /**
@@ -110,26 +111,3 @@ export const Button = forwardRefWithAs<
 
   return <ButtonComp />;
 });
-
-export type ButtonIconProps = BoxProps & {};
-
-export const ButtonIcon = forwardRefWithAs<
-  ButtonIconProps,
-  HTMLSpanElement,
-  "span"
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  const _children = React.isValidElement(children)
-    ? React.cloneElement(children, {
-        "aria-hidden": true,
-        focusable: false,
-      })
-    : children;
-
-  return (
-    <Box as="span" ref={ref} {...rest}>
-      {_children}
-    </Box>
-  );
-});
diff --git a/src/button/ButtonGroup.tsx b/src/button/ButtonGroup.tsx
@@ -7,10 +7,6 @@ import { useTheme } from "../theme";
 import { forwardRefWithAs } from "../utils/types";
 
 export type ButtonGroupProps = BoxProps & {
-  /**
-   * Button will look collapsed together.
-   */
-  isAttached?: boolean;
   /**
    * How large should the button be?
    */
@@ -19,12 +15,13 @@ export type ButtonGroupProps = BoxProps & {
    * How the button should be styled?
    */
   variant?: keyof Renderlesskit.GetThemeValue<"button", "variant">;
+  /**
+   * Button will look collapsed together.
+   */
+  isAttached?: boolean;
 };
 
-export type ButtonGroupContext = Pick<
-  ButtonGroupProps,
-  "size" | "variant"
-> & {};
+export type ButtonGroupContext = Pick<ButtonGroupProps, "size" | "variant">;
 
 const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
   {
@@ -43,7 +40,7 @@ export const ButtonGroup = forwardRefWithAs<ButtonGroupProps, "div">(
     const theme = useTheme();
     const buttonGroupStyles = cx(
       theme.buttonGroup.base,
-      isAttached ? theme.buttonGroup.attached : "",
+      isAttached ? theme.buttonGroup.attached : "lib:space-x-1",
       className,
     );
 

diff --git a/src/button/ButtonIcon.tsx b/src/button/ButtonIcon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Box, BoxProps } from "reakit";
+
+import { forwardRefWithAs } from "../utils/types";
+
+export type ButtonIconProps = BoxProps;
+
+export const ButtonIcon = forwardRefWithAs<
+  ButtonIconProps,
+  HTMLSpanElement,
+  "span"
+>((props, ref) => {
+  const { children, ...rest } = props;
+
+  const _children = React.isValidElement(children)
+    ? React.cloneElement(children, {
+        "aria-hidden": true,
+        focusable: false,
+        role: "img",
+      })
+    : children;
+
+  return (
+    <Box as="span" ref={ref} {...rest}>
+      {_children}
+    </Box>
+  );
+});
diff --git a/src/button/CloseButton.tsx b/src/button/CloseButton.tsx
@@ -0,0 +1,19 @@
+import { CloseIcon } from "../icons";
+import { forwardRefWithAs } from "../utils/types";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+export type CloseButtonProps = IconButtonProps;
+
+export const CloseButton = forwardRefWithAs<
+  CloseButtonProps,
+  HTMLButtonElement,
+  "button"
+>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <IconButton aria-label="Close" ref={ref} {...rest}>
+      {children || <CloseIcon />}
+    </IconButton>
+  );
+});
diff --git a/src/button/IconButton.tsx b/src/button/IconButton.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { cx } from "@renderlesskit/react";
 import { Button, ButtonProps } from "reakit";
 
-import { CloseIcon } from "../icons";
 import { useTheme } from "../theme";
 import { useButtonGroup } from "./ButtonGroup";
 import { forwardRefWithAs } from "../utils/types";
@@ -40,6 +39,7 @@ export const IconButton = forwardRefWithAs<
     ? React.cloneElement(children, {
         "aria-hidden": true,
         focusable: false,
+        role: "img",
       })
     : children;
 
@@ -49,19 +49,3 @@ export const IconButton = forwardRefWithAs<
     </Button>
   );
 });
-
-export type CloseButtonProps = IconButtonProps & {};
-
-export const CloseButton = forwardRefWithAs<
-  CloseButtonProps,
-  HTMLButtonElement,
-  "button"
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <IconButton aria-label="close" ref={ref} {...rest}>
-      {children || <CloseIcon />}
-    </IconButton>
-  );
-});
diff --git a/src/button/index.ts b/src/button/index.ts
@@ -1,3 +1,5 @@
 export * from "./Button";
-export * from "./IconButton";
 export * from "./ButtonGroup";
+export * from "./ButtonIcon";
+export * from "./CloseButton";
+export * from "./IconButton";
diff --git a/src/button/stories/Button.stories.tsx b/src/button/stories/Button.stories.tsx
@@ -104,19 +104,6 @@ const iconButtonBase = storyTemplate<IconButtonProps>(
 );
 
 export const OnlyIcon = iconButtonBase({});
-const IconButtonGroupBase = storyTemplate<ButtonGroupProps>(args => (
-  <ButtonGroup {...args}>
-    <IconButton aria-label="search" {...args}>
-      <SearchIcon />
-    </IconButton>
-    <IconButton aria-label="info" {...args}>
-      <InfoCircleIcon />
-    </IconButton>
-    <IconButton aria-label="settings" {...args}>
-      <WheelIcon />
-    </IconButton>
-  </ButtonGroup>
-));
 
 const closeButtonBase = storyTemplate<IconButtonProps>(CloseButtonDefault, {
   size: "lg",
@@ -136,14 +123,31 @@ const buttonGroupBase = storyTemplate<ButtonGroupProps>(
   { size: "lg", variant: "primary" },
 );
 
-export const GroupDefault = buttonGroupBase({ className: "space-x-4" });
+export const GroupDefault = buttonGroupBase({});
 
 export const GroupCollapsed = buttonGroupBase({ isAttached: true });
 
+const IconButtonGroupBase = storyTemplate<ButtonGroupProps>(
+  args => (
+    <ButtonGroup {...args}>
+      <IconButton aria-label="search">
+        <SearchIcon />
+      </IconButton>
+      <IconButton aria-label="info">
+        <InfoCircleIcon />
+      </IconButton>
+      <IconButton aria-label="settings">
+        <WheelIcon />
+      </IconButton>
+    </ButtonGroup>
+  ),
+  { size: "lg", variant: "primary" },
+);
+
+export const IconButtonGroupDefault = IconButtonGroupBase({});
+
 export const IconButtonGroupCollapsed = IconButtonGroupBase({
   isAttached: true,
-  size: "lg",
-  variant: "primary",
 });
 
 export const GroupSecondary = buttonGroupBase({

diff --git a/src/theme/defaultTheme/button.ts b/src/theme/defaultTheme/button.ts
@@ -1,5 +1,5 @@
 export const button = {
-  span: "lib:inline-block lib:cursor-not-allowed",
+  span: "inline-block cursor-not-allowed",
   base:
     "lib:inline-flex lib:items-center lib:justify-center lib:outline-none lib:appearance-none lib:transition-all lib:whitespace-nowrap lib:align-middle lib:select-none lib:disabled:cursor-not-allowed lib:disabled:opacity-40",
   variant: {
@@ -18,18 +18,18 @@ export const button = {
     xl:
       "lib:h-12 lib:w-auto lib:min-w-12 lib:px-4 lib:text-base lib:font-medium lib:rounded-lg lib:shadow-sm",
   },
+  group: "lib:focus:z-1 lib:-mr-px lib:shadow-none",
   prefix: {
-    xs: "lib:inherit lib:mr-1.5",
-    sm: "lib:inherit lib:mr-2",
-    lg: "lib:inherit lib:mr-2",
-    xl: "lib:inherit lib:mr-2",
+    xs: "inherit mr-1.5",
+    sm: "inherit mr-2",
+    lg: "inherit mr-2",
+    xl: "inherit mr-2",
   },
   suffix: {
-    xs: "lib:inherit lib:ml-1.5",
-    sm: "lib:inherit lib:ml-2",
-    lg: "lib:inherit lib:ml-2",
-    xl: "lib:inherit lib:ml-2",
+    xs: "inherit ml-1.5",
+    sm: "inherit ml-2",
+    lg: "inherit ml-2",
+    xl: "inherit ml-2",
   },
-  spinner: "lib:w-em lib:h-em text-current",
-  group: "lib:focus:z-1 lib:-mr-px lib:shadow-none",
+  spinner: "w-em h-em text-current",
 };
diff --git a/src/theme/defaultTheme/buttonGroup.ts b/src/theme/defaultTheme/buttonGroup.ts
@@ -1,4 +1,4 @@
 export const buttonGroup = {
-  base: "lib:inline-block lib:shadow-sm lib:rounded-lg",
+  base: "lib:inline-block lib:shadow-sm lib:rounded-lg ",
   attached: "lib:collapse-border",
 };