feat(tooltip): ✨ finish component & stories

adaptui · Jun 17, 2022 · 9075318 · 9075318
1 parent e02da24
commit 9075318
Show file tree

Hide file tree

Showing 22 changed files with 517 additions and 410 deletions.
diff --git a/preset.js b/preset.js
@@ -73,15 +73,7 @@ module.exports = {
       },
       boxShadow: {
         sm: "0px 1px 2px rgba(0, 0, 0, 0.05)",
-        csm: "0px 0px 1px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.15)",
-        thumbHover:
-          "0px 0px 1px rgba(0, 0, 0, 0.2), 0px 2px 3px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.15)",
-        thumb:
-          "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
-        "input-underline": "inset 0px -1px 0px #E4E4E7",
-        "switch-md":
-          "0px 0px 0px 0.5px #FFFFFF, 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        "switch-none": "0px 0px 0px 0.5px #FFFFFF",
+        lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)",
       },
       animation: {
         progress: "progress 1s ease infinite normal none running",

diff --git a/src/checkbox/stories/CheckboxStack.stories.tsx b/src/checkbox/stories/CheckboxStack.stories.tsx
@@ -43,6 +43,7 @@ export default {
         "label",
         "description",
         "themeColor",
+        "size",
       ],
     }),
   },

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { cx } from "ariakit-utils";
+
+import { cx } from "../utils";
 
 import { RadioDescription } from "./RadioDescription";
 import { RadioIcon } from "./RadioIcon";

diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 
+import { cx } from "../utils";
+
 import { SwitchDescription } from "./SwitchDescription";
 import { SwitchIcon } from "./SwitchIcon";
 import { SwitchInput } from "./SwitchInput";
@@ -24,7 +26,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
         <SwitchInput as="button" ref={ref} {...inputProps} />
         {label && !description ? <SwitchText {...textProps} /> : null}
         {label && description ? (
-          <div>
+          <div className={cx(label && !description ? "flex items-center" : "")}>
             <SwitchText {...textProps} />
             <SwitchDescription {...descriptionProps} />
           </div>

diff --git a/src/switch/SwitchDescription.tsx b/src/switch/SwitchDescription.tsx
@@ -9,12 +9,14 @@ import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
 import { cx } from "../utils";
 
+import { SwitchInputOptions } from "./SwitchInput";
 import { SwitchUIProps } from "./SwitchProps";
 
 export const useSwitchDescription = createHook<SwitchDescriptionOptions>(
   ({
     state,
     size,
+    themeColor,
     isChecked,
     icon,
     label,
@@ -24,8 +26,18 @@ export const useSwitchDescription = createHook<SwitchDescriptionOptions>(
   }) => {
     const theme = useTheme("switch");
     const className = cx(
-      theme.description.common,
-      size ? theme.description.size[size] : "",
+      theme.description,
+      size ? theme.size[size].description : "",
+      themeColor
+        ? !disabled
+          ? cx(
+              theme.themeColor[themeColor].default.description,
+              theme.themeColor[themeColor].hover.description,
+              theme.themeColor[themeColor].active.description,
+              theme.themeColor[themeColor].focus.description,
+            )
+          : theme.themeColor[themeColor].disabled.description
+        : "",
       props.className,
     );
 
@@ -45,7 +57,8 @@ export const SwitchDescription = createComponent<SwitchDescriptionOptions>(
 );
 
 export type SwitchDescriptionOptions<T extends As = "div"> = BoxOptions<T> &
-  Partial<SwitchUIProps> & {};
+  Partial<SwitchUIProps> &
+  Pick<SwitchInputOptions, "disabled"> & {};
 
 export type SwitchDescriptionProps<T extends As = "div"> = Props<
   SwitchDescriptionOptions<T>

diff --git a/src/switch/SwitchIcon.tsx b/src/switch/SwitchIcon.tsx
@@ -9,12 +9,14 @@ import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
 import { cx } from "../utils";
 
+import { SwitchInputOptions } from "./SwitchInput";
 import { SwitchUIProps } from "./SwitchProps";
 
 export const useSwitchIcon = createHook<SwitchIconOptions>(
   ({
     state,
     size,
+    themeColor,
     isChecked,
     icon,
     label,
@@ -24,28 +26,31 @@ export const useSwitchIcon = createHook<SwitchIconOptions>(
   }) => {
     const theme = useTheme("switch");
     const className = cx(
-      theme.icon.common,
-      size ? theme.icon.size[size] : "",
-      description ? theme.icon.description : "",
-      isChecked
-        ? cx(
-            theme.icon.checked.default,
-            theme.icon.checked.hover,
-            theme.icon.checked.active,
-            theme.icon.checked.focus,
-            theme.icon.checked.disabled,
-          )
-        : cx(
-            theme.icon.unChecked.default,
-            theme.icon.unChecked.hover,
-            theme.icon.unChecked.active,
-            theme.icon.unChecked.focus,
-            theme.icon.unChecked.disabled,
-          ),
+      theme.icon?.base,
+      size ? theme.size[size]?.icon?.base : "",
+      themeColor
+        ? isChecked === true
+          ? !disabled
+            ? cx(
+                theme.themeColor[themeColor]?.default?.icon?.base?.checked,
+                theme.themeColor[themeColor]?.hover?.icon?.base?.checked,
+                theme.themeColor[themeColor]?.active?.icon?.base?.checked,
+                theme.themeColor[themeColor]?.focus?.icon?.base?.checked,
+              )
+            : theme.themeColor[themeColor]?.disabled?.icon?.base?.checked
+          : !disabled
+          ? cx(
+              theme.themeColor[themeColor]?.default?.icon?.base?.unChecked,
+              theme.themeColor[themeColor]?.hover?.icon?.base?.unChecked,
+              theme.themeColor[themeColor]?.active?.icon?.base?.unChecked,
+              theme.themeColor[themeColor]?.focus?.icon?.base?.unChecked,
+            )
+          : theme.themeColor[themeColor]?.disabled?.icon?.base?.unChecked
+        : "",
       props.className,
     );
 
-    props = { role: "img", "aria-hidden": true, ...props, className };
+    props = { ...props, className };
     props = useBox(props);
 
     return props;
@@ -59,7 +64,8 @@ export const SwitchIcon = createComponent<SwitchIconOptions>(props => {
 });
 
 export type SwitchIconOptions<T extends As = "span"> = BoxOptions<T> &
-  Partial<SwitchUIProps> & {};
+  Partial<SwitchUIProps> &
+  Pick<SwitchInputOptions, "disabled"> & {};
 
 export type SwitchIconProps<T extends As = "span"> = Props<
   SwitchIconOptions<T>

diff --git a/src/switch/SwitchLabel.tsx b/src/switch/SwitchLabel.tsx
@@ -9,12 +9,14 @@ import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
 import { cx } from "../utils";
 
+import { SwitchInputOptions } from "./SwitchInput";
 import { SwitchUIProps } from "./SwitchProps";
 
 export const useSwitchLabel = createHook<SwitchLabelOptions>(
   ({
     state,
     size,
+    themeColor,
     isChecked,
     icon,
     label,
@@ -24,10 +26,19 @@ export const useSwitchLabel = createHook<SwitchLabelOptions>(
   }) => {
     const theme = useTheme("switch");
     const className = cx(
-      theme.label.common,
-      size && label && !description ? theme.label.size[size] : "",
-      label && !description ? (disabled ? "" : theme.label.only) : "",
+      theme.label.base,
       disabled ? theme.label.disabled : "",
+      label && !description && size ? theme.size[size].label : "",
+      label && !description && themeColor
+        ? !disabled
+          ? cx(
+              theme.themeColor[themeColor].default.label,
+              theme.themeColor[themeColor].hover.label,
+              theme.themeColor[themeColor].active.label,
+              theme.themeColor[themeColor].focus.label,
+            )
+          : theme.themeColor[themeColor].disabled.label
+        : "",
       props.className,
     );
 
@@ -45,6 +56,7 @@ export const SwitchLabel = createComponent<SwitchLabelOptions>(props => {
 });
 
 export type SwitchLabelOptions<T extends As = "label"> = BoxOptions<T> &
+  Pick<SwitchInputOptions, "disabled"> &
   Partial<SwitchUIProps> & {};
 
 export type SwitchLabelProps<T extends As = "label"> = Props<

diff --git a/src/switch/SwitchProps.tsx b/src/switch/SwitchProps.tsx
@@ -31,6 +31,7 @@ export function useSwitchProps(props: SwitchProps): SwitchPropsReturn {
     setValue,
     inputValue,
     size,
+    themeColor,
     icon,
     label,
     description,
@@ -49,6 +50,7 @@ export function useSwitchProps(props: SwitchProps): SwitchPropsReturn {
     state: finalState,
     inputValue,
     size,
+    themeColor,
     icon,
     label,
     description,
@@ -102,27 +104,30 @@ export function useSwitchProps(props: SwitchProps): SwitchPropsReturn {
     () => ({
       ...uiProps,
       ...componentProps.iconProps,
+      disabled: restProps.disabled,
       children: runIfFn(uiProps.icon, uiProps),
     }),
-    [uiProps, componentProps.iconProps],
+    [uiProps, restProps.disabled, componentProps.iconProps],
   );
 
   const textProps: SwitchTextProps = useMemo(
     () => ({
       ...uiProps,
       ...componentProps.textProps,
+      disabled: restProps.disabled,
       children: runIfFn(uiProps.label, uiProps),
     }),
-    [uiProps, componentProps.textProps],
+    [uiProps, restProps.disabled, componentProps.textProps],
   );
 
   const descriptionProps: SwitchDescriptionProps = useMemo(
     () => ({
       ...uiProps,
       ...componentProps.descriptionProps,
+      disabled: restProps.disabled,
       children: runIfFn(uiProps.description, uiProps),
     }),
-    [uiProps, componentProps.descriptionProps],
+    [uiProps, restProps.disabled, componentProps.descriptionProps],
   );
 
   const compoundedProps = useMemo(

diff --git a/src/switch/SwitchText.tsx b/src/switch/SwitchText.tsx
@@ -9,12 +9,14 @@ import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
 import { cx } from "../utils";
 
+import { SwitchInputOptions } from "./SwitchInput";
 import { SwitchUIProps } from "./SwitchProps";
 
 export const useSwitchText = createHook<SwitchTextOptions>(
   ({
     state,
     size,
+    themeColor,
     isChecked,
     icon,
     label,
@@ -24,8 +26,18 @@ export const useSwitchText = createHook<SwitchTextOptions>(
   }) => {
     const theme = useTheme("switch");
     const className = cx(
-      theme.text.common,
-      size ? theme.text.size[size] : "",
+      theme.text,
+      size ? theme.size[size].text : "",
+      themeColor
+        ? !disabled
+          ? cx(
+              theme.themeColor[themeColor].default.text,
+              theme.themeColor[themeColor].hover.text,
+              theme.themeColor[themeColor].active.text,
+              theme.themeColor[themeColor].focus.text,
+            )
+          : theme.themeColor[themeColor].disabled.text
+        : "",
       props.className,
     );
 
@@ -43,6 +55,7 @@ export const SwitchText = createComponent<SwitchTextOptions>(props => {
 });
 
 export type SwitchTextOptions<T extends As = "div"> = BoxOptions<T> &
+  Pick<SwitchInputOptions, "disabled"> &
   Partial<SwitchUIProps> & {};
 
 export type SwitchTextProps<T extends As = "div"> = Props<SwitchTextOptions<T>>;
diff --git a/src/switch/SwitchUIState.tsx b/src/switch/SwitchUIState.tsx
@@ -11,6 +11,7 @@ export const useSwitchUIState = (props: SwitchUIStateProps): SwitchUIState => {
     state,
     inputValue,
     size = "md",
+    themeColor = "base",
     icon = SwitchDefaultIcon,
     label,
     description,
@@ -24,6 +25,7 @@ export const useSwitchUIState = (props: SwitchUIStateProps): SwitchUIState => {
   return {
     isChecked,
     size,
+    themeColor,
     icon,
     label,
     description,
@@ -41,7 +43,14 @@ export type SwitchUIState = {
    *
    * @default md
    */
-  size: keyof AdaptUI.GetThemeValue<"switch", "icon", "size">;
+  size: keyof AdaptUI.GetThemeValue<"switch", "size">;
+
+  /**
+   * How the switch should be themed?
+   *
+   * @default base
+   */
+  themeColor: keyof AdaptUI.GetThemeValue<"switch", "themeColor">;
 
   /**
    * Provide custom icons as a replacement for the default ones.
@@ -62,7 +71,7 @@ export type SwitchUIState = {
 };
 
 export type SwitchUIStateProps = Partial<
-  Pick<SwitchUIState, "icon" | "label" | "description" | "size">
+  Pick<SwitchUIState, "icon" | "label" | "description" | "size" | "themeColor">
 > & {
   state?: CheckboxState;
   inputValue?: SwitchInputProps["value"];

diff --git a/src/switch/__tests__/__snapshots__/Switch.test.tsx.snap b/src/switch/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -3,21 +3,20 @@
 exports[`Switch should render correctly 1`] = `
 <DocumentFragment>
   <label
-    class="relative inline-flex items-center cursor-pointer align-top"
+    class="relative inline-flex cursor-pointer align-top"
   >
     <button
       aria-checked="false"
       class="peer sr-only"
       data-command=""
       role="switch"
+      themecolor="base"
     />
     <span
-      aria-hidden="true"
-      class="relative inline-flex items-center justify-start shrink-0 align-top select-none transition-all peer-children h-4 w-[26px] rounded-full bg-gray-200 peer-hover:bg-gray-300 peer-active:bg-gray-300 peer-focus-visible:ring-2 peer-focus-visible:ring-gray-300 peer-disabled:bg-gray-300"
-      role="img"
+      class="relative inline-flex items-center justify-center shrink-0 align-top select-none transition-all peer-children h-4 w-[26px] rounded-full bg-gray-400 peer-hover:bg-gray-500 peer-active:bg-gray-600 peer-focus-visible:ring-3 peer-focus-visible:ring-gray-500"
     >
       <span
-        class="absolute box-border bg-white transition-all duration-200 w-3 h-3 top-0.5 rounded-full shadow-switch-md peer-children-active:w-[13px] left-0.5"
+        class="absolute box-border transition-all duration-200 h-3 w-3 peer-children-active:w-[13px] top-0.5 rounded-full left-0.5 bg-white-900"
       />
     </span>
   </label>
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,6 +43,7 @@ export default { @@
             "label",
             "description",
             "themeColor",
+            "size",
           ],
         }),
       },
@@ Expand Down @@