fix: stepper component (#834)

consolelabs · Apr 16, 2024 · e0cf264 · e0cf264
1 parent 90daca5
commit e0cf264
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/.changeset/brown-queens-trade.md b/.changeset/brown-queens-trade.md
@@ -0,0 +1,6 @@
+---
+"@mochi-ui/stepper": minor
+"@mochi-ui/theme": minor
+---
+
+Fix Stepper component
diff --git a/packages/components/stepper/src/step-indicator.tsx b/packages/components/stepper/src/step-indicator.tsx
@@ -3,7 +3,8 @@ import { stepper } from '@mochi-ui/theme'
 import { CheckLine, CloseLine, SpinnerLine } from '@mochi-ui/icons'
 import { useStepperContext } from './context'
 
-const { stepIndicatorClsx } = stepper
+const { stepIndicatorClsx, stepIndicatorIconClsx, stepIndicatorLoadingClsx } =
+  stepper
 
 interface StepIndicatorProps extends PropsWithChildren {
   className?: string
@@ -19,13 +20,13 @@ const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
     let children = null
     if (isLoading) {
       status = 'loading'
-      children = <SpinnerLine className="w-full h-full text-primary-solid" />
+      children = <SpinnerLine className={stepIndicatorLoadingClsx()} />
     } else if (isError) {
       status = 'error'
-      children = <CloseLine className="w-4 h-4 text-text-contrast" />
+      children = <CloseLine className={stepIndicatorIconClsx()} />
     } else if (stepStatus === 'complete') {
       status = 'success'
-      children = <CheckLine className="w-4 h-4 text-text-contrast" />
+      children = <CheckLine className={stepIndicatorIconClsx()} />
     } else {
       status = stepStatus
       children = step

diff --git a/packages/components/stepper/src/step-separator.tsx b/packages/components/stepper/src/step-separator.tsx
@@ -23,6 +23,6 @@ const StepSeparator = forwardRef<HTMLDivElement, StepSeparatorProps>(
   },
 )
 
-StepSeparator.displayName = 'StepTitle'
+StepSeparator.displayName = 'StepSeparator'
 
 export { StepSeparator, type StepSeparatorProps }
diff --git a/packages/theme/src/components/stepper.ts b/packages/theme/src/components/stepper.ts
@@ -52,14 +52,23 @@ const stepIndicatorClsx = ({
     className,
   )
 
+const stepIndicatorIconClsx = ({
+  className = '',
+}: { className?: string } = {}) => clsx('w-4 h-4 text-text-contrast', className)
+
+const stepIndicatorLoadingClsx = ({
+  className = '',
+}: { className?: string } = {}) =>
+  clsx('w-full h-full text-primary-solid', className)
+
 const stepContentClsx = ({ className = '' }: { className?: string } = {}) =>
   clsx('flex flex-col space-y-0.5', className)
 
 const stepTitleClsx = ({ className = '' }: { className?: string } = {}) =>
   clsx('', className)
 
 const stepDescriptionClsx = ({ className = '' }: { className?: string } = {}) =>
-  clsx('', className)
+  clsx('font-normal', className)
 
 const stepSeparatorClsx = ({
   className = '',
@@ -85,6 +94,8 @@ const stepper = {
   stepperCva,
   stepClsx,
   stepIndicatorClsx,
+  stepIndicatorIconClsx,
+  stepIndicatorLoadingClsx,
   stepContentClsx,
   stepTitleClsx,
   stepDescriptionClsx,