chore: change

daangn · Jun 18, 2024 · 0ac82ee · 0ac82ee
1 parent 0f5a3b9
commit 0ac82ee
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 60 deletions.
diff --git a/examples/stackflow-spa/src/design-system/components/Switch.tsx b/examples/stackflow-spa/src/design-system/components/Switch.tsx
@@ -14,15 +14,15 @@ export interface SwitchProps
 
 export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ className, ...otherProps }, ref) => {
-    const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } =
+    const { stateProps, restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =
       useSwitch(otherProps);
     const classNames = switchStyle();
 
     return (
       <label className={clsx(classNames.root, className)} {...rootProps}>
-        <div {...controlProps} className={classNames.track}>
-          <div {...stateProps} className={classNames.handleContainer}>
-            <div {...stateProps} className={classNames.handle} />
+        <div {...controlProps} className={classNames.control}>
+          <div {...stateProps} className={classNames.thumbContainer}>
+            <div {...thumbProps} className={classNames.thumb} />
           </div>
         </div>
         <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />

diff --git a/packages/component-spec/artifacts/switch.yaml b/packages/component-spec/artifacts/switch.yaml
@@ -1,27 +1,27 @@
 base:
   enabled:
     root:
-      minBlockSize: $unit[8]
-      minInlineSize: $unit[13]
+      height: $unit[8]
+      width: $unit[13]
     track:
-      background: $color.palette.gray[500]
+      color: $color.palette.gray[500]
       cornerRadius: $radii.full
-    handleContainer:
-      minBlockSize: $unit[8]
-      minInlineSize: $unit[8]
+    thumbContainer:
+      height: $unit[8]
+      width: $unit[8]
       padding: $unit[0.5]
-    handle:
-      minBlockSize: $unit[7]
-      minInlineSize: $unit[7]
-      background: $color.fg.static-white
+    thumb:
+      height: $unit[7]
+      width: $unit[7]
+      color: $color.fg.static-white
       cornerRadius: $radii.full
       shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06)
   enabled,selected:
     track:
-      background: $color.bg.brand-emphasis
+      color: $color.bg.brand-emphasis
   disabled:
     track:
-      background: $color.bg.disabled
+      color: $color.bg.disabled
   disabled,selected:
     root:
       opacity: 0.38
diff --git a/packages/react-headless/switch/src/index.ts b/packages/react-headless/switch/src/index.ts
@@ -117,6 +117,11 @@ export function useSwitch(props: UseSwitchProps) {
       "aria-hidden": true,
     }),
 
+    thumbProps: elementProps({
+      ...stateProps,
+      "aria-hidden": true,
+    }),
+
     hiddenInputProps: inputProps({
       type: "checkbox",
       role: "switch",

diff --git a/packages/recipe-generator/preset/src/__generated__/switch.vars.ts b/packages/recipe-generator/preset/src/__generated__/switch.vars.ts
diff --git a/packages/recipe-generator/preset/src/switch.recipe.ts b/packages/recipe-generator/preset/src/switch.recipe.ts
@@ -4,7 +4,7 @@ import { active, checked, disabled, pseudo } from "./pseudo";
 
 const switchRecipe = defineRecipe({
   name: "switch",
-  slots: ["root", "track", "handleContainer", "handle"],
+  slots: ["root", "control", "thumbContainer", "thumb"],
   base: {
     root: {
       display: "inline-flex",
@@ -13,8 +13,8 @@ const switchRecipe = defineRecipe({
 
       position: "relative",
 
-      width: vars.base.enabled.root.minInlineSize,
-      height: vars.base.enabled.root.minBlockSize,
+      minInlineSize: vars.base.enabled.root.width,
+      minBlockSize: vars.base.enabled.root.height,
 
       verticalAlign: "top",
       isolation: "isolate",
@@ -24,54 +24,54 @@ const switchRecipe = defineRecipe({
         opacity: vars.base.disabledSelected.root.opacity,
       },
     },
-    track: {
+    control: {
       display: "block",
       position: "absolute",
 
       width: "100%",
       height: "100%",
 
       borderRadius: vars.base.enabled.track.cornerRadius,
-      background: vars.base.enabled.track.background,
+      background: vars.base.enabled.track.color,
 
       transition: "background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms",
 
       [pseudo(active)]: {
-        background: vars.base.enabled.track.background,
+        background: vars.base.enabled.track.color,
       },
 
       [pseudo(checked)]: {
-        background: vars.base.enabledSelected.track.background,
+        background: vars.base.enabledSelected.track.color,
       },
 
       [pseudo(disabled)]: {
-        background: vars.base.disabled.track.background,
+        background: vars.base.disabled.track.color,
       },
     },
-    handleContainer: {
+    thumbContainer: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
 
-      height: vars.base.enabled.handleContainer.minBlockSize,
-      width: vars.base.enabled.handleContainer.minInlineSize,
+      minInlineSize: vars.base.enabled.thumbContainer.width,
+      minBlockSize: vars.base.enabled.thumbContainer.height,
 
-      padding: vars.base.enabled.handleContainer.padding,
+      padding: vars.base.enabled.thumbContainer.padding,
 
       transition: "transform 150ms cubic-bezier(0.35, 0, 0.35, 1)",
 
       [pseudo(checked)]: {
-        transform: `translateX(calc(${vars.base.enabled.root.minInlineSize} - ${vars.base.enabled.root.minBlockSize}))`,
+        transform: `translateX(calc(${vars.base.enabled.root.width} - ${vars.base.enabled.root.height}))`,
       },
     },
-    handle: {
-      width: vars.base.enabled.handle.minInlineSize,
-      height: vars.base.enabled.handle.minBlockSize,
+    thumb: {
+      minInlineSize: vars.base.enabled.thumb.width,
+      minBlockSize: vars.base.enabled.thumb.height,
 
-      borderRadius: vars.base.enabled.handle.cornerRadius,
-      background: vars.base.enabled.handle.background,
+      borderRadius: vars.base.enabled.thumb.cornerRadius,
+      background: vars.base.enabled.thumb.color,
 
-      boxShadow: vars.base.enabled.handle.shadow,
+      boxShadow: vars.base.enabled.thumb.shadow,
     },
   },
   variants: {},

diff --git a/packages/stylesheet/switch.css b/packages/stylesheet/switch.css
@@ -3,16 +3,16 @@
     align-items: flex-start;
     justify-content: space-between;
     position: relative;
-    width: var(--seed-unit-13);
-    height: var(--seed-unit-8);
+    min-inline-size: var(--seed-unit-13);
+    min-block-size: var(--seed-unit-8);
     vertical-align: top;
     isolation: isolate;
     opacity: 1;
 }
 .switch__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
     opacity: 0.38;
 }
-.switch__track {
+.switch__control {
     display: block;
     position: absolute;
     width: 100%;
@@ -21,30 +21,30 @@
     background: var(--seed-color-palette-gray-500);
     transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
 }
-.switch__track:is(:active, [data-active]) {
+.switch__control:is(:active, [data-active]) {
     background: var(--seed-color-palette-gray-500);
 }
-.switch__track:is(:checked, [data-checked]) {
+.switch__control:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-brand-emphasis);
 }
-.switch__track:is(:disabled, [disabled], [data-disabled]) {
+.switch__control:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
 }
-.switch__handleContainer {
+.switch__thumbContainer {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: var(--seed-unit-8);
-    width: var(--seed-unit-8);
+    min-inline-size: var(--seed-unit-8);
+    min-block-size: var(--seed-unit-8);
     padding: var(--seed-unit-0\.5);
     transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
 }
-.switch__handleContainer:is(:checked, [data-checked]) {
+.switch__thumbContainer:is(:checked, [data-checked]) {
     transform: translateX(calc(var(--seed-unit-13) - var(--seed-unit-8)));
 }
-.switch__handle {
-    width: var(--seed-unit-7);
-    height: var(--seed-unit-7);
+.switch__thumb {
+    min-inline-size: var(--seed-unit-7);
+    min-block-size: var(--seed-unit-7);
     border-radius: var(--seed-radii-full);
     background: var(--seed-color-fg-static-white);
     box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);