[@mantine/core] Stepper: Migrate to data-* attributes

u3u · Jul 20, 2022 · f4bc68c · f4bc68c
1 parent aeb0ad3
commit f4bc68c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 36 deletions.
diff --git a/src/mantine-core/src/components/Stepper/Step/Step.styles.ts b/src/mantine-core/src/components/Stepper/Step/Step.styles.ts
@@ -18,11 +18,7 @@ export const iconSizes = {
 };
 
 export default createStyles(
-  (
-    theme,
-    { color, iconSize, size, radius, allowStepClick, iconPosition }: StepStylesParams,
-    getRef
-  ) => {
+  (theme, { color, iconSize, size, radius, allowStepClick, iconPosition }: StepStylesParams) => {
     const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes });
     const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm;
     const _radius = theme.fn.size({ size: radius, sizes: theme.radius });
@@ -47,7 +43,6 @@ export default createStyles(
       },
 
       stepIcon: {
-        ref: getRef('stepIcon'),
         boxSizing: 'border-box',
         height: _iconSize,
         width: _iconSize,
@@ -65,30 +60,26 @@ export default createStyles(
         fontWeight: 700,
         color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
         fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
-      },
-
-      stepCompletedIcon: {
-        ...theme.fn.cover(),
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: theme.white,
-      },
 
-      stepProgress: {
-        [`& .${getRef('stepIcon')}`]: {
+        '&[data-progress]': {
           borderColor: colors.background,
         },
-      },
 
-      stepCompleted: {
-        [`& .${getRef('stepIcon')}`]: {
+        '&[data-completed]': {
           backgroundColor: colors.background,
           borderColor: colors.background,
           color: theme.white,
         },
       },
 
+      stepCompletedIcon: {
+        ...theme.fn.cover(),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: theme.white,
+      },
+
       stepBody: {
         display: 'flex',
         flexDirection: 'column',

diff --git a/src/mantine-core/src/components/Stepper/Step/Step.tsx b/src/mantine-core/src/components/Stepper/Step/Step.tsx
@@ -109,17 +109,22 @@ export const Step = forwardRef<HTMLButtonElement, StepProps>(
 
     const _iconSize = theme.fn.size({ size, sizes: defaultIconSizes });
     const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;
+    const dataAttributes = {
+      'data-progress': state === 'stepProgress' || undefined,
+      'data-completed': state === 'stepCompleted' || undefined,
+    };
 
     return (
       <UnstyledButton
-        className={cx(classes.step, classes[state], className)}
+        className={cx(classes.step, className)}
         tabIndex={allowStepClick ? 0 : -1}
         ref={ref}
+        {...dataAttributes}
         {...others}
       >
         {withIcon && (
           <div className={classes.stepWrapper}>
-            <div className={classes.stepIcon}>
+            <div className={classes.stepIcon} {...dataAttributes}>
               <Transition mounted={state === 'stepCompleted'} transition="pop" duration={200}>
                 {(transitionStyles) => (
                   <div className={classes.stepCompletedIcon} style={transitionStyles}>

diff --git a/src/mantine-demos/src/demos/core/Stepper/Stepper.demo.stylesApi.tsx b/src/mantine-demos/src/demos/core/Stepper/Stepper.demo.stylesApi.tsx
@@ -91,23 +91,19 @@ const useStyles = createStyles((theme, params, getRef) => ({
     borderColor: 'transparent',
     backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.white,
     borderWidth: 0,
+
+    '&[data-completed]': {
+      borderWidth: 0,
+      backgroundColor: 'transparent',
+      backgroundImage: theme.fn.linearGradient(45, theme.colors.blue[6], theme.colors.cyan[6]),
+    },
   },
 
   step: {
     transition: 'transform 150ms ease',
-  },
 
-  stepProgress: {
-    transform: 'scale(1.05)',
-
-    [`& .${getRef('stepIcon')}`]: {},
-  },
-
-  stepCompleted: {
-    [`& .${getRef('stepIcon')}`]: {
-      borderWidth: 0,
-      backgroundColor: 'transparent',
-      backgroundImage: theme.fn.linearGradient(45, theme.colors.blue[6], theme.colors.cyan[6]),
+    '&[data-progress]': {
+      transform: 'scale(1.05)',
     },
   },
 }));

diff --git a/src/mantine-styles-api/src/styles-api/Stepper.styles-api.ts b/src/mantine-styles-api/src/styles-api/Stepper.styles-api.ts
@@ -10,8 +10,6 @@ export const Stepper: Record<StepperStylesNames, string> = {
   step: 'Step control button',
   stepIcon: 'Step icon wrapper',
   stepCompletedIcon: 'Completed step icon, rendered within stepIcon',
-  stepProgress: 'Step control modified when step is in progress',
-  stepCompleted: 'Step control modified when step is completed',
   stepBody: 'Contains stepLabel and stepDescription',
   stepLabel: 'Step label',
   stepDescription: 'Step description',