Skip to content

Commit

Permalink
fix: restore correct styling for vertical orientation
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilbitner
lilbitner committed Oct 3, 2024
1 parent 09aca67 commit 0ded977
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 62 deletions.
68 changes: 26 additions & 42 deletions packages/components/progress-stepper/src/Step/Step.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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({
Expand Down Expand Up @@ -197,6 +155,10 @@ export const getStyles = () => {
borderRadius: '50%',
},
}),
activeVertical: css({
color: tokens.colorPrimary,
borderColor: tokens.colorPrimary,
}),
activeIcon: css({
borderColor: tokens.colorPrimary,
'&::after': {
Expand All @@ -220,6 +182,10 @@ export const getStyles = () => {
borderRadius: '50%',
},
}),
disabledVertical: css({
color: tokens.gray500,
borderColor: tokens.gray200,
}),
disabledIcon: css({
'& p': {
color: tokens.gray500,
Expand All @@ -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")`,
Expand All @@ -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");`,
Expand All @@ -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")`,
Expand Down
62 changes: 42 additions & 20 deletions packages/components/progress-stepper/src/Step/Step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,25 @@ function _Step(props: StepProps, ref: React.Ref<HTMLLIElement>) {
const isActiveStep = stepNumber === activeStep;
const stepNumberToDisplay = stepNumber + 1;

return (
const renderStep = () => {
switch (true) {
case stepStyle === 'number':
return stepNumberToDisplay;
case state === 'complete':
return <DoneIcon size="tiny" variant="white" />;
case state === 'error':
return <CloseIcon size="tiny" variant="white" />;
case state === 'warning':
return <WarningIcon size="tiny" variant="white" />;
default:
return <div />;
}
};

const renderHorizontalStep = () => (
<li
className={cx(
orientation === 'horizontal'
? styles.horizontalListItem(isBeforeActiveStep, isActiveStep)
: styles.verticalListItem(isBeforeActiveStep, isActiveStep),
styles.horizontalListItem(isBeforeActiveStep, isActiveStep),
{
[styles.incomplete]: state === 'incomplete',
[styles.active]: state === 'active',
Expand Down Expand Up @@ -88,34 +101,43 @@ function _Step(props: StepProps, ref: React.Ref<HTMLLIElement>) {
>
{labelText}
</p>
{/* <span
</li>
);

const renderVerticalStep = () => (
<li
className={styles.verticalListItem(isBeforeActiveStep, isActiveStep)}
ref={ref}
data-test-id={`cf-ui-step-${state}`}
aria-label={`Step ${stepNumberToDisplay} ${state}`}
>
<span
className={cx(styles.listItemContent, {
[styles.active]: state === 'active',
[styles.disabled]: state === 'disabled',
[styles.complete]: state === 'complete',
[styles.error]: state === 'error',
[styles.warning]: state === 'warning',
[styles.activeVertical]: state === 'active',
[styles.disabledVertical]: state === 'disabled',
[styles.completeVertical]: state === 'complete',
[styles.errorVertical]: state === 'error',
[styles.warningVertical]: state === 'warning',
})}
>
{renderStep()}
</span>
{labelText && (
<p
className={cx(
orientation === 'horizontal'
? styles.horizontalLabel
: styles.verticalLabel,
{
[styles.incompleteLabel]: state === 'incomplete',
[styles.disabledLabel]: state === 'disabled',
},
)}
className={cx(styles.verticalLabel, {
[styles.incompleteLabel]: state === 'incomplete',
[styles.disabledLabel]: state === 'disabled',
})}
>
{labelText}
</p>
)} */}
)}
</li>
);

return orientation === 'horizontal'
? renderHorizontalStep()
: renderVerticalStep();
}

export const Step = React.forwardRef(_Step);

0 comments on commit 0ded977

Please sign in to comment.