Skip to content

Commit

Permalink
fix(stepper): added styles for blocked state (#2237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agliga
agliga authored Jan 4, 2024
1 parent b2d5079 commit bda7e38
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 218 deletions.
8 changes: 8 additions & 0 deletions dist/progress-stepper/progress-stepper.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ hr.progress-stepper__separator {
.progress-stepper__item[aria-current] + hr.progress-stepper__separator {
background-image: linear-gradient(90deg, var(--progress-stepper-active-color, var(--color-background-information)) 50%, var(--progress-stepper-upcoming-color, var(--color-background-disabled)) 50%);
}
.progress-stepper__item--attention[aria-current] ~ hr.progress-stepper__separator {
background-color: var(--progress-stepper-upcoming-color, var(--color-background-disabled));
background-image: none;
}
.progress-stepper__text > * {
margin: 0;
}
Expand Down Expand Up @@ -100,6 +104,10 @@ hr.progress-stepper__separator {
.progress-stepper--vertical .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
background: linear-gradient(180deg, var(--progress-stepper-active-color, var(--color-background-information)) 50%, var(--progress-stepper-upcoming-color, var(--color-background-disabled)) 50%);
}
.progress-stepper--vertical .progress-stepper__item--attention[aria-current] ~ hr.progress-stepper__separator {
background-color: var(--progress-stepper-upcoming-color, var(--color-background-disabled));
background-image: none;
}
.progress-stepper--vertical .progress-stepper__items {
display: block;
}
Expand Down
15 changes: 15 additions & 0 deletions src/less/progress-stepper/progress-stepper.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,13 @@ hr.progress-stepper__separator {
);
}

.progress-stepper__item--attention[aria-current]
~ hr.progress-stepper__separator {
.background-color-token(progress-stepper-upcoming-color, color-background-disabled);

background-image: none;
}

.progress-stepper__text > * {
margin: 0;
}
Expand Down Expand Up @@ -160,6 +167,14 @@ hr.progress-stepper__separator {
);
}

.progress-stepper--vertical
.progress-stepper__item--attention[aria-current]
~ hr.progress-stepper__separator {
.background-color-token(progress-stepper-upcoming-color, color-background-disabled);

background-image: none;
}

.progress-stepper--vertical .progress-stepper__items {
display: block;
}
Expand Down
218 changes: 0 additions & 218 deletions src/less/progress-stepper/stories/progress-stepper.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,60 +159,6 @@ export const allSelected = () => `
</div>
`;

export const currentBubble = () => `
<div class="progress-stepper">
<div class="progress-stepper__items progress-stepper__items--current" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-current-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
`;

export const noneSelected = () => `
<div class="progress-stepper">
<div class="progress-stepper__items progress-stepper__items--upcoming" role="list">
Expand Down Expand Up @@ -322,60 +268,6 @@ export const RTL = () => `
`;

export const currentBubbleRTL = () => `
<div class="progress-stepper" dir="rtl">
<div class="progress-stepper__items progress-stepper__items--current" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-current-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
`;

export const vertical = () => `
<div class="progress-stepper progress-stepper--vertical">
<div class="progress-stepper__items" role="list">
Expand Down Expand Up @@ -546,116 +438,6 @@ export const verticalRTL = () => `
</div>
`;

export const currentBubbleVertical = () => `
<div class="progress-stepper progress-stepper--vertical">
<div class="progress-stepper__items progress-stepper__items--current" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-current-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
`;

export const currentBubbleVerticalRTL = () => `
<div dir="rtl">
<div class="progress-stepper progress-stepper--vertical">
<div class="progress-stepper__items progress-stepper__items--current" role="list">
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Started</h4>
<p>July 3rd</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-confirmation-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Shipped</h4>
<p>July 4th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div aria-current="step" class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-current-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Transit</h4>
<p>July 5th</p>
</span>
</div>
<hr class="progress-stepper__separator" role="presentation" />
<div class="progress-stepper__item" role="listitem">
<span class="progress-stepper__icon">
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
<use href="#icon-stepper-upcoming-24"></use>
</svg>
</span>
<span class="progress-stepper__text">
<h4>Delivered</h4>
<p>July 6th</p>
</span>
</div>
</div>
</div>
</div>
`;

export const errorState = () => `
<div class="progress-stepper">
<div class="progress-stepper__items" role="list">
Expand Down

0 comments on commit bda7e38

Please sign in to comment.