refactor(components): ♻️ update slider, badge, circular & linear prog…

…ress (#241)
adaptui · Dec 28, 2021 · b15bb44 · b15bb44 · vercel · Dec 28, 2021
1 parent 285472d
commit b15bb44
Show file tree

Hide file tree

Showing 51 changed files with 173 additions and 93 deletions.
diff --git a/preset.js b/preset.js
@@ -38,6 +38,8 @@ module.exports = {
         cxs: ["13px", "115%"],
         sm: ["14px", "115%"],
         base: ["16px", "115%"],
+        lg: ["18px", "115%"],
+        xl: ["20px", "115%"],
         "paragraph-cxs": ["13px", "150%"],
         "paragraph-sm": ["14px", "150%"],
         "2base": ["32px", "115%"],

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -2,7 +2,7 @@ import { createComponent, createHook } from "reakit-system";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { cx, RenderPropType, withIconA11y } from "../utils";
 
 import { BADGE_KEYS } from "./__keys";
 
@@ -12,7 +12,7 @@ export type BadgeOptions = BoxOptions & {
    *
    * @default md
    */
-  size?: keyof Renderlesskit.GetThemeValue<"badge", "size">;
+  size?: keyof Renderlesskit.GetThemeValue<"badge", "size", "common">;
 
   /**
    * How the badge should look?
@@ -27,9 +27,14 @@ export type BadgeOptions = BoxOptions & {
    * @default default
    */
   themeColor?: keyof Renderlesskit.GetThemeValue<"badge", "variant", "solid">;
+
+  /**
+   * If added, the tag will show an icon before the tag's text.
+   */
+  prefix?: RenderPropType;
 };
 
-export type BadgeHTMLProps = BoxHTMLProps;
+export type BadgeHTMLProps = Omit<BoxHTMLProps, "prefix">;
 
 export type BadgeProps = BadgeOptions & BadgeHTMLProps;
 
@@ -50,18 +55,38 @@ export const useBadge = createHook<BadgeOptions, BadgeHTMLProps>({
   },
 
   useProps(options, htmlProps) {
-    const { size = "md", variant = "solid", themeColor = "default" } = options;
-    const { className: htmlClassName, ...restHtmlProps } = htmlProps;
+    const {
+      size = "md",
+      variant = "solid",
+      themeColor = "default",
+      prefix,
+    } = options;
+    const {
+      className: htmlClassName,
+      children: htmlChildren,
+      ...restHtmlProps
+    } = htmlProps;
 
-    const badge = useTheme("badge");
+    const theme = useTheme("badge");
     const className = cx(
-      badge.base,
-      badge.size[size],
-      badge.variant[variant][themeColor],
+      theme.base,
+      theme.size.common[size],
+      theme.variant[variant][themeColor],
       htmlClassName,
     );
 
-    return { className, ...restHtmlProps };
+    const prefixStyles = cx(theme.size.prefix[size]);
+
+    const children = (
+      <>
+        {prefix ? (
+          <>{withIconA11y(prefix, { className: prefixStyles })}</>
+        ) : null}
+        <span>{htmlChildren}</span>
+      </>
+    );
+
+    return { className, children, ...restHtmlProps };
   },
 });
 

diff --git a/src/badge/__keys.ts b/src/badge/__keys.ts
@@ -1,2 +1,2 @@
 // Automatically generated
-export const BADGE_KEYS = ["size", "variant", "themeColor"] as const;
+export const BADGE_KEYS = ["size", "variant", "themeColor", "prefix"] as const;
diff --git a/src/badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/badge/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`<Badge /> should render properly 1`] = `
   <div
     class="inline-flex items-center justify-center relative whitespace-nowrap align-middle transition-all px-1.5 py-[3px] rounded-2xl text-xs font-medium bg-gray-800 text-white"
   >
-    Hello world
+    <span>
+      Hello world
+    </span>
   </div>
 </DocumentFragment>
 `;
diff --git a/src/badge/stories/BadgeBasic.stories.tsx b/src/badge/stories/BadgeBasic.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 import { createControls, createPreviewTabs } from "../../../.storybook/utils";
+import { SlotIcon } from "../..";
 
 import js from "./templates/BadgeBasicJsx";
 import ts from "./templates/BadgeBasicTsx";
@@ -66,3 +67,12 @@ export const Danger: Story = {
   ...Default,
   args: { ...Default.args, themeColor: "danger" },
 };
+
+export const Prefix: Story = {
+  args: {
+    size: "md",
+    variant: "solid",
+    themeColor: "default",
+    prefix: <SlotIcon />,
+  },
+};
diff --git a/src/badge/stories/BadgeStack.stories.tsx b/src/badge/stories/BadgeStack.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 import { createControls, createPreviewTabs } from "../../../.storybook/utils";
+import { SlotIcon } from "../..";
 
 import js from "./templates/BadgeStackJsx";
 import ts from "./templates/BadgeStackTsx";
@@ -30,3 +31,6 @@ export default {
 } as Meta;
 
 export const Default: Story = {};
+export const Prefix: Story = {
+  args: { prefix: <SlotIcon /> },
+};
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -24,14 +24,14 @@ export type ButtonOptions = BoxOptions &
      *
      * @default md
      */
-    size?: keyof Renderlesskit.GetThemeValue<"button", "size", "default">;
+    size?: keyof Renderlesskit.GetThemeValue<"button", "size", "common">;
 
     /**
      * How the button should look?
      *
      * @default solid
      */
-    variant?: keyof Renderlesskit.GetThemeValue<"button", "variant", "default">;
+    variant?: keyof Renderlesskit.GetThemeValue<"button", "variant", "common">;
 
     /**
      * If added, the button will only show an icon ignoring other childrens.
@@ -110,15 +110,15 @@ export const useButton = createHook<ButtonOptions, ButtonHTMLProps>({
 
     const button = useTheme("button");
     const className = cx(
-      button.base.normal,
+      button.base.common,
       groupcontext?.collapsed ? "" : button.base.notCollapsed,
       !iconOnly
-        ? button.size.default[size]
+        ? button.size.common[size]
         : tcm(
             button.size.iconOnly.base[size],
             button.size.iconOnly.spinner[size],
           ),
-      button.variant.default[variant],
+      button.variant.common[variant],
       button.variant.hover[variant],
       button.variant.active[variant],
       button.variant.focus[variant],

diff --git a/src/checkbox-group/CheckboxGroupWrapper.tsx b/src/checkbox-group/CheckboxGroupWrapper.tsx
@@ -32,7 +32,7 @@ export const useCheckboxGroupContextWrapper = createHook<
 
     const theme = useTheme("checkbox");
     const className = cx(
-      theme.group[stack].base,
+      theme.group[stack].common,
       theme.group[stack].size[size],
       htmlClassName,
     );

diff --git a/src/checkbox-group/CheckboxShowMore.tsx b/src/checkbox-group/CheckboxShowMore.tsx
@@ -32,7 +32,7 @@ export const CheckboxShowMore: React.FC<CheckboxShowMoreProps> = props => {
 
   const theme = useTheme("checkbox");
   const buttonClassName = cx(
-    theme.group.showMore.button.base[stack],
+    theme.group.showMore.button.common[stack],
     hasExpandStarted ? "" : theme.group.showMore.button.expanded[stack],
   );
   const contentClassName = cx(theme.group.showMore.content[stack]);

diff --git a/src/checkbox/CheckboxDescription.tsx b/src/checkbox/CheckboxDescription.tsx
@@ -29,7 +29,7 @@ export const useCheckboxDescription = createHook<
 
     const theme = useTheme("checkbox");
     const className = cx(
-      theme.description.base,
+      theme.description.common,
       theme.description.size[size],
       htmlClassName,
     );

diff --git a/src/checkbox/CheckboxIcon.tsx b/src/checkbox/CheckboxIcon.tsx
@@ -43,7 +43,7 @@ export const useCheckboxIcon = createHook<
 
     const theme = useTheme("checkbox");
     const className = cx(
-      theme.icon.base,
+      theme.icon.common,
       theme.icon.size[size],
       isUnchecked
         ? cx(

diff --git a/src/checkbox/CheckboxLabel.tsx b/src/checkbox/CheckboxLabel.tsx
@@ -35,7 +35,7 @@ export const useCheckboxLabel = createHook<
 
     const theme = useTheme("checkbox");
     const className = cx(
-      theme.label.base,
+      theme.label.common,
       label && !description ? theme.label.size[size] : "",
       label && !description ? (disabled ? "" : theme.label.only) : "",
       disabled ? theme.label.disabled : "",

diff --git a/src/checkbox/CheckboxText.tsx b/src/checkbox/CheckboxText.tsx
@@ -27,7 +27,11 @@ export const useCheckboxText = createHook<
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("checkbox");
-    const className = cx(theme.text.base, theme.text.size[size], htmlClassName);
+    const className = cx(
+      theme.text.common,
+      theme.text.size[size],
+      htmlClassName,
+    );
 
     return { className, ...restHtmlProps };
   },

diff --git a/src/checkbox/stories/CheckboxControlled.component.tsx b/src/checkbox/stories/CheckboxControlled.component.tsx
@@ -65,7 +65,7 @@ function capitalizeFirstLetter(string: string) {
 
 const RadioComponent: React.FC<RadioGroupProps> = props => {
   return (
-    <RadioGroup aria-label="checkbox state" {...props}>
+    <RadioGroup aria-label="checkbox state" className="space-x-2" {...props}>
       <Radio value="checked" label="Checked" />
       <Radio value="unchecked" label="Unchecked" />
       <Radio value="indeterminate" label="Indeterminate" />

diff --git a/src/circular-progress/CircularProgressBar.tsx b/src/circular-progress/CircularProgressBar.tsx
@@ -36,7 +36,7 @@ export const useCircularProgressBar = createHook<
 
     const theme = useTheme("circularProgress");
     const className = cx(
-      theme.bar.base,
+      theme.bar.common,
       isIndeterminate ? theme.bar.indeterminate : "",
       htmlClassName,
     );
@@ -45,7 +45,7 @@ export const useCircularProgressBar = createHook<
       viewBox: "0 0 100 100",
       cx: 50,
       cy: 50,
-      r: 42,
+      r: 44,
       fill: "transparent",
       stroke: "currentColor",
       strokeWidth: hint ? "5px" : "15px",

diff --git a/src/circular-progress/CircularProgressBarWrapper.tsx b/src/circular-progress/CircularProgressBarWrapper.tsx
@@ -31,7 +31,7 @@ export const useCircularProgressBarWrapper = createHook<
     const className = cx(
       hint
         ? theme.barWrapper.hint.size[size]
-        : theme.barWrapper.base.size[size],
+        : theme.barWrapper.common.size[size],
       isIndeterminate ? theme.barWrapper.indeterminate : "",
       htmlClassName,
     );

diff --git a/src/circular-progress/CircularProgressHint.ts b/src/circular-progress/CircularProgressHint.ts
@@ -28,7 +28,11 @@ export const useCircularProgressHint = createHook<
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("circularProgress");
-    const className = cx(theme.hint.base, theme.hint.size[size], htmlClassName);
+    const className = cx(
+      theme.hint.common,
+      theme.hint.size[size],
+      htmlClassName,
+    );
 
     return { className, ...restHtmlProps };
   },

diff --git a/src/circular-progress/CircularProgressState.ts b/src/circular-progress/CircularProgressState.ts
@@ -15,7 +15,7 @@ export type CircularProgressState = RenderlesskitProgressState & {
   size: keyof Renderlesskit.GetThemeValue<
     "circularProgress",
     "barWrapper",
-    "base",
+    "common",
     "size"
   >;
 

diff --git a/src/circular-progress/CircularProgressTrack.tsx b/src/circular-progress/CircularProgressTrack.tsx
@@ -34,7 +34,7 @@ export const useCircularProgressTrack = createHook<
       viewBox: "0 0 100 100",
       cx: 50,
       cy: 50,
-      r: 42,
+      r: 44,
       fill: "transparent",
       stroke: "currentColor",
       strokeWidth: hint ? "5px" : "15px",

diff --git a/src/progress/ProgressBar.tsx b/src/progress/ProgressBar.tsx
@@ -32,7 +32,7 @@ export const useProgressBar = createHook<
 
     const progress = useTheme("progress");
     const className = cx(
-      progress.bar.base,
+      progress.bar.common,
       isIndeterminate ? progress.bar.indeterminate : "",
       htmlClassName,
     );

diff --git a/src/progress/ProgressHint.tsx b/src/progress/ProgressHint.tsx
@@ -31,7 +31,11 @@ export const useProgressHint = createHook<
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("progress");
-    const className = cx(theme.hint.base, theme.hint.size[size], htmlClassName);
+    const className = cx(
+      theme.hint.common,
+      theme.hint.size[size],
+      htmlClassName,
+    );
 
     return { className, ...restHtmlProps };
   },

diff --git a/src/progress/ProgressLabel.tsx b/src/progress/ProgressLabel.tsx
@@ -38,7 +38,7 @@ export const useProgressLabel = createHook<
 
     const theme = useTheme("progress");
     const className = cx(
-      theme.label.base,
+      theme.label.common,
       theme.label.size[size],
       htmlClassName,
     );

diff --git a/src/progress/ProgressTrack.tsx b/src/progress/ProgressTrack.tsx
@@ -28,7 +28,7 @@ export const useProgressTrack = createHook<
 
     const theme = useTheme("progress");
     const className = cx(
-      theme.track.base,
+      theme.track.common,
       theme.track.size[size],
       htmlClassName,
     );

diff --git a/src/radio-group/RadioGroupWrapper.tsx b/src/radio-group/RadioGroupWrapper.tsx
@@ -31,7 +31,7 @@ export const useRadioGroupWrapper = createHook<
 
     const theme = useTheme("radio");
     const className = cx(
-      theme.group[stack].base,
+      theme.group[stack].common,
       theme.group[stack].size[size],
       htmlClassName,
     );

diff --git a/src/radio-group/RadioShowMore.tsx b/src/radio-group/RadioShowMore.tsx
@@ -30,7 +30,7 @@ export const RadioShowMore: React.FC<RadioShowMoreProps> = props => {
   const [hasExpandStarted, setHasExpandStarted] = React.useState(false);
 
   const theme = useTheme("radio");
-  const buttonClassName = cx(theme.group.showMore.button.base[stack]);
+  const buttonClassName = cx(theme.group.showMore.button.common[stack]);
   const contentClassName = cx(
     theme.group.showMore.content[stack],
     hasExpandStarted ? "" : theme.group.showMore.button.expanded[stack],

diff --git a/src/radio/RadioDescription.tsx b/src/radio/RadioDescription.tsx
@@ -29,7 +29,7 @@ export const useRadioDescription = createHook<
 
     const theme = useTheme("radio");
     const className = cx(
-      theme.description.base,
+      theme.description.common,
       theme.description.size[size],
       htmlClassName,
     );

diff --git a/src/radio/RadioIcon.tsx b/src/radio/RadioIcon.tsx
@@ -25,7 +25,7 @@ export const useRadioIcon = createHook<RadioIconOptions, RadioIconHTMLProps>({
 
     const theme = useTheme("radio");
     const className = cx(
-      theme.icon.base,
+      theme.icon.common,
       description ? theme.icon.description : "",
       theme.icon.size[size],
       isChecked

diff --git a/src/radio/RadioLabel.tsx b/src/radio/RadioLabel.tsx
@@ -33,7 +33,7 @@ export const useRadioLabel = createHook<RadioLabelOptions, RadioLabelHTMLProps>(
 
       const theme = useTheme("radio");
       const className = cx(
-        theme.label.base,
+        theme.label.common,
         label && !description ? theme.label.size[size] : "",
         label && !description ? (disabled ? "" : theme.label.only) : "",
         disabled ? theme.label.disabled : "",

diff --git a/src/radio/RadioText.tsx b/src/radio/RadioText.tsx
@@ -23,7 +23,11 @@ export const useRadioText = createHook<RadioTextOptions, RadioTextHTMLProps>({
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("radio");
-    const className = cx(theme.text.base, theme.text.size[size], htmlClassName);
+    const className = cx(
+      theme.text.common,
+      theme.text.size[size],
+      htmlClassName,
+    );
 
     return { className, ...restHtmlProps };
   },