progress circle variant name

daangn · Oct 10, 2024 · c96ff28 · c96ff28
1 parent d30920d
commit c96ff28
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/component-docs/snippets/component/progress-circle.tsx b/component-docs/snippets/component/progress-circle.tsx
@@ -33,16 +33,25 @@ export interface ProgressCircleProps
  */
 export const ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(
   (
-    { className, children, size, value = 0, maxValue = 100, minValue = 0, variant, ...otherProps },
+    {
+      className,
+      children,
+      size,
+      value = 0,
+      maxValue = 100,
+      minValue = 0,
+      indeterminate,
+      ...otherProps
+    },
     ref,
   ) => {
-    const classNames = progressCircle({ size, variant });
+    const classNames = progressCircle({ size, indeterminate });
 
     // 110 is max value of strokeDasharray
     const percent = ((value - minValue) / (maxValue - minValue)) * 110;
 
     const indicatorPathStyle: React.CSSProperties = {
-      strokeDasharray: variant === "determinate" ? `${percent}, 200` : undefined,
+      strokeDasharray: indeterminate ? undefined : `${percent}, 200`,
     };
 
     return (

diff --git a/packages/recipe-generator/preset/src/progress-circle.recipe.ts b/packages/recipe-generator/preset/src/progress-circle.recipe.ts
@@ -59,8 +59,8 @@ const progressCircle = defineRecipe({
         },
       },
     },
-    variant: {
-      indeterminate: {
+    indeterminate: {
+      true: {
         root: {
           animation: `rotate ${vars.variantIndeterminate.enabled["indicator-path"].rotateDuration} ${vars.variantIndeterminate.enabled["indicator-path"].rotateTimingFunction} infinite`,
         },
@@ -71,7 +71,7 @@ const progressCircle = defineRecipe({
           `,
         },
       },
-      determinate: {
+      false: {
         "indicator-path": {
           transitionDuration: `var(--seed-spinner-determinate-duration, ${vars.variantDeterminate.enabled["indicator-path"].transitionDuration})`,
           transitionTimingFunction: `var(--seed-spinner-determinate-timing-function, ${vars.variantDeterminate.enabled["indicator-path"].transitionTimingFunction})`,

diff --git a/packages/recipe/lib/progressCircle.d.ts b/packages/recipe/lib/progressCircle.d.ts
@@ -1,6 +1,6 @@
 interface ProgressCircleVariant {
   size: "small" | "medium";
-  variant: "indeterminate" | "determinate"
+  indeterminate: true | false
 }
 
 type ProgressCircleVariantMap = {

diff --git a/packages/recipe/lib/progressCircle.mjs b/packages/recipe/lib/progressCircle.mjs
@@ -28,9 +28,9 @@ export const progressCircleVariantMap = {
     "small",
     "medium"
   ],
-  "variant": [
-    "indeterminate",
-    "determinate"
+  "indeterminate": [
+    "true",
+    "false"
   ]
 };
 

diff --git a/packages/stylesheet/progressCircle.css b/packages/stylesheet/progressCircle.css
@@ -37,16 +37,16 @@
     width: var(--seed-unit-10);
     height: var(--seed-unit-10)
 }
-.progressCircle__root--variant_indeterminate {
+.progressCircle__root--indeterminate_true {
     animation: rotate 1.2s cubic-bezier(0.35, 0.25, 0.65, 0.75) infinite
 }
-.progressCircle__indicator-path--variant_indeterminate {
+.progressCircle__indicator-path--indeterminate_true {
     animation: 
             headDash 1.2s cubic-bezier(0.35, 0, 0.65, 1) infinite normal none running,
             tailDash 1.2s cubic-bezier(0.35, 0, 0.65, 0.6) infinite normal none running
 
 }
-.progressCircle__indicator-path--variant_determinate {
+.progressCircle__indicator-path--indeterminate_false {
     transition-duration: var(--seed-spinner-determinate-duration, 0.4s);
     transition-timing-function: var(--seed-spinner-determinate-timing-function, cubic-bezier(0, 0, 0.15, 1));
     transition-property: stroke-dasharray