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,