From 0ded9771f840e5c3988b7d5bb4fadc34afc440ef Mon Sep 17 00:00:00 2001 From: Lillian Bitner Date: Thu, 3 Oct 2024 09:13:51 -0600 Subject: [PATCH] fix: restore correct styling for vertical orientation --- .../progress-stepper/src/Step/Step.styles.ts | 68 +++++++------------ .../progress-stepper/src/Step/Step.tsx | 62 +++++++++++------ 2 files changed, 68 insertions(+), 62 deletions(-) diff --git a/packages/components/progress-stepper/src/Step/Step.styles.ts b/packages/components/progress-stepper/src/Step/Step.styles.ts index 173b2d5165..39b0a01e9b 100644 --- a/packages/components/progress-stepper/src/Step/Step.styles.ts +++ b/packages/components/progress-stepper/src/Step/Step.styles.ts @@ -28,12 +28,8 @@ export const getStyles = () => { }, '&::after': { - //for numbered steps content: 'counter(step)', counterIncrement: 'step', - - // for icon steps - // content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.18,120,240a8,8,0,0,0,16,0c0-5.82,16.34-18.93,28.26-28.51C190.88,190.12,224,163.53,224,128V117.83A16,16,0,0,0,232,104ZM80,64h96a40.06,40.06,0,0,1,40,40H40A40,40,0,0,1,80,64Zm74.25,135c-10.62,8.52-20,16-26.25,23.37-6.25-7.32-15.63-14.85-26.25-23.37C77.8,179.79,48,155.86,48,128v-8H208v8C208,155.86,178.2,179.79,154.25,199Z'%3E%3C/path%3E%3C/svg%3E")`, zIndex: 1, position: 'relative', gridColumnStart: 1, @@ -46,44 +42,6 @@ export const getStyles = () => { borderRadius: '50%', backgroundColor: tokens.colorPrimary, }, - - // margin: 0, - // padding: 0, - // display: 'grid', - // // gap: `${tokens.spacingXs} 0`, // this adds an awkward height that is difficult to align with other components - // gridTemplateColumns: '0.25fr 1fr 24px 1fr 0.25fr', - // gridTemplateRows: '24px', - // gridTemplateAreas: ` - // "divider-before divider-before circle divider-after divider-after" - // ". label label label ." - // `, - // '&::before': { - // position: 'relative', - // top: '50%', - // display: 'block', - // content: '""', - // height: '2px', - // backgroundColor: - // isBeforeActiveStep || isActive - // ? tokens.colorPrimary - // : tokens.gray300, - // gridArea: 'divider-before', - // transition: `background-color ${tokens.transitionDurationLong} ${tokens.transitionEasingDefault}`, - // }, - // '&::after': { - // position: 'relative', - // top: '50%', - // display: 'block', - // content: '""', - // height: '2px', - // backgroundColor: isBeforeActiveStep - // ? tokens.colorPrimary - // : tokens.gray300, - // transition: `background-color ${tokens.transitionDurationLong} ${tokens.transitionEasingDefault}`, - // gridArea: 'divider-after', - // }, - // '&:first-child::before': { visibility: 'hidden' }, - // '&:last-child::after': { visibility: 'hidden' }, }), verticalListItem: (isBeforeActiveStep: boolean, isActive: boolean) => css({ @@ -197,6 +155,10 @@ export const getStyles = () => { borderRadius: '50%', }, }), + activeVertical: css({ + color: tokens.colorPrimary, + borderColor: tokens.colorPrimary, + }), activeIcon: css({ borderColor: tokens.colorPrimary, '&::after': { @@ -220,6 +182,10 @@ export const getStyles = () => { borderRadius: '50%', }, }), + disabledVertical: css({ + color: tokens.gray500, + borderColor: tokens.gray200, + }), disabledIcon: css({ '& p': { color: tokens.gray500, @@ -239,6 +205,11 @@ export const getStyles = () => { fontWeight: tokens.fontWeightDemiBold, }, }), + completeVertical: css({ + color: tokens.colorWhite, + borderColor: tokens.colorPrimary, + backgroundColor: tokens.colorPrimary, + }), completeIcon: css({ '&::after': { content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 250 200'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E")`, @@ -253,6 +224,11 @@ export const getStyles = () => { backgroundColor: tokens.colorNegative, }, }), + errorVertical: css({ + color: tokens.colorWhite, + borderColor: tokens.colorNegative, + backgroundColor: tokens.colorNegative, + }), errorIcon: css({ '&::after': { content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 255 180'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'%3E%3C/path%3E%3C/svg%3E");`, @@ -271,6 +247,14 @@ export const getStyles = () => { backgroundColor: tokens.colorWarning, }, }), + warningVertical: css({ + color: tokens.colorWhite, + borderColor: tokens.colorWarning, + backgroundColor: tokens.colorWarning, + '& svg': { + height: '18px', + }, + }), warningIcon: css({ '&::after': { content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 250 200'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3E%3C/path%3E%3C/svg%3E")`, diff --git a/packages/components/progress-stepper/src/Step/Step.tsx b/packages/components/progress-stepper/src/Step/Step.tsx index c1a4eff278..556ecd6a4c 100644 --- a/packages/components/progress-stepper/src/Step/Step.tsx +++ b/packages/components/progress-stepper/src/Step/Step.tsx @@ -53,12 +53,25 @@ function _Step(props: StepProps, ref: React.Ref) { const isActiveStep = stepNumber === activeStep; const stepNumberToDisplay = stepNumber + 1; - return ( + const renderStep = () => { + switch (true) { + case stepStyle === 'number': + return stepNumberToDisplay; + case state === 'complete': + return ; + case state === 'error': + return ; + case state === 'warning': + return ; + default: + return
; + } + }; + + const renderHorizontalStep = () => (
  • ) { > {labelText}

    - {/* + ); + + const renderVerticalStep = () => ( +
  • + {renderStep()} {labelText && (

    {labelText}

    - )} */} + )}
    • ); + + return orientation === 'horizontal' + ? renderHorizontalStep() + : renderVerticalStep(); } export const Step = React.forwardRef(_Step);