Skip to content

Commit

Permalink
fix(wizard): redesign wizard stepnav (add success icon and align stat…
Browse files Browse the repository at this point in the history 
…es) (#1478)

- The step number is not removed for steps with error status.
- An icon, in addition to color, is used to show wizard step completed
status.
- The hover and active states use correct text colors.
- The stepnav item does not have padding resulting in the button (and
thus the hover, active, and selected background colors) not to be
surrounded by padding.

CDE-2229, VPAT-776
  • Loading branch information
@kevinbuhmann
kevinbuhmann authored Aug 7, 2024
1 parent cd57050 commit fa8918a
Show file tree
Hide file tree
Showing 27 changed files with 102 additions and 66 deletions.
55 changes: 30 additions & 25 deletions projects/angular/src/wizard/STYLES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@
| --clr-wizard-stepnav-bgcolor | Wizard navigation background color |
| --clr-wizard-main-text-color | Wizard text color |
| --clr-wizard-stepnav-text | Wizard navigation text color |
| --clr-wizard-stepnav-text--active | Wizard navigation text color of the currently active element |
| --clr-wizard-stepnav-text-active | Wizard navigation item color when active |
| --clr-wizard-stepnav-text-hover | Wizard navigation item color when hovered |
| --clr-wizard-stepnav-text--active | Wizard navigation item color when selected (misnamed) |
| --clr-wizard-stepnav-text-disabled | Wizard navigation item color when disabled |
| --clr-wizard-title-text | Wizard title text color |
| --clr-wizard-stepnav-border-size | Wizard navigation border size |
| --clr-wizard-stepnav-item-border-color | Wizard navigation border color |
| --clr-wizard-stepnav-item-border-color--active | Wizard navigation border color for the currently active element |
| --clr-wizard-stepnav-item-border-color--active | Wizard navigation item complete border color (misnamed) |
| --clr-wizard-stepnav-active-bgcolor | _Deprecated in v18_ Wizard navigation background color for the currently selected element |
| --clr-wizard-stepnav-selected-bgcolor | Wizard navigation background color for the currently selected element |
| --clr-wizard-stepnav-selected-hover-bgcolor | Wizard navigation background color for the currently hovered selected element |
Expand All @@ -27,33 +30,35 @@
| --clr-wizard-stepnav-link-padding | Wizard navigation item button padding |
| --clr-wizard-stepnav-link-error-icon-color | Wizard navigation item button error icon color |
| --clr-wizard-stepnav-item-error-border-color | Wizard navigation item error border color |
| --clr-wizard-stepnav-link-complete-icon-color | Wizard navigation item button complete icon color |
| --clr-wizard-footer-height | Wizard page footer height |
| --clr-wizard-stepnav-link-hover-bg-color | Wizard navigation item button background color on hover |
| --clr-wizard-stepnav-link-active-bg-color | Wizard navigation item button background color when active |
| --clr-wizard-stepnav-link-hover-bg-color | Wizard navigation item button background color when hovered |
| --clr-wizard-title-font-size | Wizard title font size |
| --clr-wizard-title-line-height | Wizard title line height |
| --clr-wizard-content-background-color | Wizard content background color |

## CSS Classes

| Class name | Description |
| ---------------------------------- | ---------------------------------------------- |
| clr-wizard | Main wizard element |
| clr-wizard-content | Wizard content container |
| clr-wizard-page | Wizard page container |
| wizard-#{SIZE} | Wizard size; sizes: [md, lg, xl] |
| clr-wizard-btn | Wizard control button |
| clr-wizard-title | Wizard title elelment |
| clr-wizard-header-action | Wizard header action |
| clr-wizard-stepnav | Wizard navigation container |
| clr-wizard-stepnav-list | Wizard navigation list |
| clr-wizard-stepnav-item | Wizard navigation item |
| clr-wizard-stepnav-link | Wizard navigation item link indicator |
| clr-wizard-stepnav-link-suffix | Wizard navigation item link state indicator |
| clr-wizard-stepnav-item-error-icon | Wizard navigation item error icon |
| clr-wizard-footer | Wizard footer |
| clr-wizard-footer-buttons | Wizard footer buttons container |
| clr-wizard--no-title | Remove wizard dialog title |
| clr-wizard--no-shadow | Remove wizard dialog shadow |
| clr-wizard-stepnav-wrapper | Internal wrapper for the wizard navigation |
| clr-wizard-footer-buttons-wrapper | Internal wrapper for the wizard footer buttons |
| clr-wizard-btn-wrapper | Internal wrapper for wizard control buttons |
| Class name | Description |
| ----------------------------------- | ---------------------------------------------- |
| clr-wizard | Main wizard element |
| clr-wizard-content | Wizard content container |
| clr-wizard-page | Wizard page container |
| wizard-#{SIZE} | Wizard size; sizes: [md, lg, xl] |
| clr-wizard-btn | Wizard control button |
| clr-wizard-title | Wizard title element |
| clr-wizard-header-action | Wizard header action |
| clr-wizard-stepnav | Wizard navigation container |
| clr-wizard-stepnav-list | Wizard navigation list |
| clr-wizard-stepnav-item | Wizard navigation item |
| clr-wizard-stepnav-link | Wizard navigation item link |
| clr-wizard-stepnav-link-icon | Wizard navigation item icon wrapper |
| clr-wizard-stepnav-item-page-number | Wizard navigation item page number |
| clr-wizard-footer | Wizard footer |
| clr-wizard-footer-buttons | Wizard footer buttons container |
| clr-wizard--no-title | Remove wizard dialog title |
| clr-wizard--no-shadow | Remove wizard dialog shadow |
| clr-wizard-stepnav-wrapper | Internal wrapper for the wizard navigation |
| clr-wizard-footer-buttons-wrapper | Internal wrapper for the wizard footer buttons |
| clr-wizard-btn-wrapper | Internal wrapper for wizard control buttons |
8 changes: 8 additions & 0 deletions projects/angular/src/wizard/_properties.wizard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,27 @@

--clr-wizard-stepnav-bgcolor: #{tokens.$cds-alias-object-interaction-background};
--clr-wizard-stepnav-text: #{tokens.$cds-alias-typography-color-400};
--clr-wizard-stepnav-text-active: #{tokens.$cds-alias-object-interaction-color-active};
--clr-wizard-stepnav-text-hover: #{tokens.$cds-alias-object-interaction-color-hover};
// @TODO v18 rename to --clr-wizard-stepnav-text-selected
--clr-wizard-stepnav-text--active: #{tokens.$cds-alias-object-interaction-color-selected};
--clr-wizard-stepnav-text-disabled: #{tokens.$cds-alias-typography-disabled};
--clr-wizard-stepnav-item-border-color: #{tokens.$cds-alias-status-neutral-tint};
--clr-wizard-stepnav-border-size: #{tokens.$cds-global-space-3};
// @TODO v18 rename to --clr-wizard-stepnav-item-complete-border-color
--clr-wizard-stepnav-item-border-color--active: #{tokens.$cds-alias-status-success};
// @TODO v18 remove in favor of --clr-wizard-stepnav-selected-bgcolor
--clr-wizard-stepnav-active-bgcolor: #{tokens.$cds-alias-object-interaction-background-selected};
--clr-wizard-stepnav-selected-bgcolor: var(--clr-wizard-stepnav-active-bgcolor);
--clr-wizard-stepnav-selected-hover-bgcolor: var(--cds-alias-object-interaction-background-selected-hover);
--clr-wizard-stepnav-selected-active-bgcolor: var(--cds-alias-object-interaction-background-selected-active);
--clr-wizard-stepnav-link-error-icon-color: #{tokens.$cds-alias-status-danger};
--clr-wizard-stepnav-link-complete-icon-color: #{tokens.$cds-alias-status-success};

--clr-wizard-stepnav-border-color: #{tokens.$cds-alias-object-container-border-color};
// @TODO v18 rename to --clr-wizard-stepnav-hover-bgcolor
--clr-wizard-stepnav-link-hover-bg-color: #{tokens.$cds-alias-object-interaction-background-hover};
// @TODO v18 rename to --clr-wizard-stepnav-active-bgcolor
--clr-wizard-stepnav-link-active-bg-color: #{tokens.$cds-alias-object-interaction-background-active};
--clr-wizard-stepnav-link-padding: calc(#{tokens.$cds-global-space-5} - #{tokens.$cds-global-space-1});
--clr-wizard-stepnav-item-error-border-color: #{tokens.$cds-alias-status-danger};
Expand Down
4 changes: 4 additions & 0 deletions projects/angular/src/wizard/_variables.wizard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ $clr-wizard-main-text-color: var(--clr-wizard-main-text-color) !default;

$clr-wizard-stepnav-bgcolor: var(--clr-wizard-stepnav-bgcolor) !default;
$clr-wizard-stepnav-text: var(--clr-wizard-stepnav-text) !default;
$clr-wizard-stepnav-text-active: var(--clr-wizard-stepnav-text-active) !default;
$clr-wizard-stepnav-text-hover: var(--clr-wizard-stepnav-text-hover) !default;
$clr-wizard-stepnav-text--active: var(--clr-wizard-stepnav-text--active) !default;
$clr-wizard-stepnav-text-disabled: var(--clr-wizard-stepnav-text-disabled) !default;
$clr-wizard-stepnav-border-color: var(--clr-wizard-stepnav-border-color) !default;
$clr-wizard-stepnav-border-size: var(--clr-wizard-stepnav-border-size) !default;
$clr-wizard-stepnav-item-border-color: var(--clr-wizard-stepnav-item-border-color) !default;
Expand All @@ -25,6 +28,7 @@ $clr-wizard-stepnav-selected-bgcolor: var(--clr-wizard-stepnav-selected-bgcolor)
$clr-wizard-stepnav-selected-hover-bgcolor: var(--clr-wizard-stepnav-selected-hover-bgcolor) !default;
$clr-wizard-stepnav-selected-active-bgcolor: var(--clr-wizard-stepnav-selected-active-bgcolor) !default;
$clr-wizard-stepnav-link-error-icon-color: var(--clr-wizard-stepnav-link-error-icon-color) !default;
$clr-wizard-stepnav-link-complete-icon-color: var(--clr-wizard-stepnav-link-complete-icon-color) !default;
$clr-wizard-stepnav-item-error-border-color: var(--clr-wizard-stepnav-item-error-border-color) !default;
$clr-wizard-stepnav-link-hover-bg-color: var(--clr-wizard-stepnav-link-hover-bg-color) !default;
$clr-wizard-stepnav-link-active-bg-color: var(--clr-wizard-stepnav-link-active-bg-color) !default;
Expand Down
71 changes: 41 additions & 30 deletions projects/angular/src/wizard/_wizard.clarity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,35 +170,42 @@
wizard-variables.$clr-wizard-stepnav-item-border-color;

margin: 0 0 calc(-1 * #{tokens.$cds-alias-object-border-width-100}) 0;
padding: #{tokens.$cds-global-space-4} 0 #{tokens.$cds-global-space-4} #{tokens.$cds-global-space-3};
color: wizard-variables.$clr-wizard-stepnav-text;
background-color: wizard-variables.$clr-wizard-stepnav-bgcolor;

// prevent button colors from "leaking" into the stepnav items
button.clr-wizard-stepnav-link {
color: inherit;
background-color: inherit;
}

&.disabled {
color: wizard-variables.$clr-wizard-stepnav-text-disabled;
}

// active class actually means "selected"
&.active {
color: wizard-variables.$clr-wizard-stepnav-text--active;
.clr-wizard-stepnav-link {
color: wizard-variables.$clr-wizard-stepnav-text--active;
background-color: wizard-variables.$clr-wizard-stepnav-selected-bgcolor;
border-radius: wizard-variables.$clr-wizard-border-radius 0 0 wizard-variables.$clr-wizard-border-radius;
background-color: wizard-variables.$clr-wizard-stepnav-selected-bgcolor;

&:hover {
background-color: wizard-variables.$clr-wizard-stepnav-selected-hover-bgcolor;
}

&:active {
background-color: wizard-variables.$clr-wizard-stepnav-selected-active-bgcolor;
}
}

&:not(.disabled) {
&:not(.disabled):not(.active) {
&:hover {
.clr-wizard-stepnav-link {
color: wizard-variables.$clr-wizard-stepnav-text--active;
background-color: wizard-variables.$clr-wizard-stepnav-link-hover-bg-color;
}
&.active .clr-wizard-stepnav-link {
background-color: wizard-variables.$clr-wizard-stepnav-selected-hover-bgcolor;
}
color: wizard-variables.$clr-wizard-stepnav-text-hover;
background-color: wizard-variables.$clr-wizard-stepnav-link-hover-bg-color;
}

&:active {
.clr-wizard-stepnav-link {
background-color: wizard-variables.$clr-wizard-stepnav-link-active-bg-color;
}
&.active .clr-wizard-stepnav-link {
background-color: wizard-variables.$clr-wizard-stepnav-selected-active-bgcolor;
}
color: wizard-variables.$clr-wizard-stepnav-text-active;
background-color: wizard-variables.$clr-wizard-stepnav-link-active-bg-color;
}
}

Expand All @@ -210,11 +217,19 @@
&.complete {
border-color: wizard-variables.$clr-wizard-stepnav-item-border-color--active;
transition: border-color 0.2s ease-in;

.clr-wizard-stepnav-link-icon cds-icon {
--color: #{wizard-variables.$clr-wizard-stepnav-link-complete-icon-color};
}
}

&.error {
border-color: wizard-variables.$clr-wizard-stepnav-item-error-border-color;
transition: border-color 0.2s ease-in;

.clr-wizard-stepnav-link-icon cds-icon {
--color: #{wizard-variables.$clr-wizard-stepnav-link-error-icon-color};
}
}

&.no-click button {
Expand All @@ -226,29 +241,25 @@
width: 100%;
display: flex;
place-content: normal;
gap: 0;
color: inherit;
align-items: center;
text-align: left;
text-transform: none;
margin: 0;
padding: tokens.$cds-global-space-5;
height: auto;
min-height: tokens.$cds-global-space-11;
min-height: tokens.$cds-global-space-12;
max-width: inherit;

@include mixins.generate-typography-token('BODY-14-MD-STD');

.clr-wizard-stepnav-link-suffix {
display: flex;
justify-content: center;
min-width: tokens.$cds-global-space-9;
padding-right: tokens.$cds-global-space-5;
.clr-wizard-stepnav-link-icon {
display: flex; // this vertically centers the icon
}

.clr-wizard-stepnav-item-error-icon {
transform: none;
fill: wizard-variables.$clr-wizard-stepnav-link-error-icon-color;
}
.clr-wizard-stepnav-link-icon,
.clr-wizard-stepnav-link-page-number {
width: tokens.$cds-global-space-7;
}
}

Expand Down
11 changes: 11 additions & 0 deletions projects/angular/src/wizard/wizard-stepnav-item.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,17 @@ export default function (): void {
expect(myStepnavItem.querySelector('cds-icon[shape="error-standard"]')).not.toBeNull();
});

it('should have a cds-icon when page has is complete', () => {
expect(myStepnavItem.classList.contains('error')).toBe(
false,
'stepnav item does not have .error class when page has no error'
);
fakeOutPage.completed = true;
fakeOutPage.hasError = false;
fixture.detectChanges();
expect(myStepnavItem.querySelector('cds-icon[shape="success-standard"]')).not.toBeNull();
});

it('should have a span with text "Error" when page has an error', () => {
fakeOutPage.completed = true;
fakeOutPage.hasError = true;
Expand Down
15 changes: 6 additions & 9 deletions projects/angular/src/wizard/wizard-stepnav-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,12 @@ import { ClrWizardPage } from './wizard-page';
(click)="click()"
[attr.disabled]="isDisabled ? '' : null"
>
<span class="clr-wizard-stepnav-link-suffix">
<cds-icon
shape="error-standard"
status="danger"
class="clr-wizard-stepnav-item-error-icon"
*ngIf="hasError"
></cds-icon>
<ng-content *ngIf="!hasError"></ng-content>
</span>
<div class="clr-wizard-stepnav-link-icon">
<cds-icon *ngIf="hasError" shape="error-standard" aria-label="error"></cds-icon>
<cds-icon *ngIf="!hasError && isComplete" shape="success-standard" aria-label="complete"></cds-icon>
</div>
<div class="clr-wizard-stepnav-link-page-number"><ng-content></ng-content></div>
<span class="clr-wizard-stepnav-link-title">
<ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
</span>
Expand Down
4 changes: 2 additions & 2 deletions projects/angular/src/wizard/wizard.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ClarityIcons, errorStandardIcon } from '@cds/core/icon';
import { ClarityIcons, errorStandardIcon, successStandardIcon } from '@cds/core/icon';

import { ClrAlertModule } from '../emphasis/alert/alert.module';
import { ClrModalModule } from '../modal/modal.module';
Expand Down Expand Up @@ -44,6 +44,6 @@ export const CLR_WIZARD_DIRECTIVES: any[] = [
})
export class ClrWizardModule {
constructor() {
ClarityIcons.addIcons(errorStandardIcon);
ClarityIcons.addIcons(errorStandardIcon, successStandardIcon);
}
}
Binary file modified tests/snapshots/chromium/wizard/wizard--full-screen-wizard-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/chromium/wizard/wizard--full-screen-wizard-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/chromium/wizard/wizard--wizard-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/chromium/wizard/wizard--wizard-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../snapshots/chromium/wizard/wizard-long-titles--wizard-long-titles-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots/chromium/wizard/wizard-long-titles--wizard-long-titles-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/chromium/wizard/wizard-page--wizard-page-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/chromium/wizard/wizard-page--wizard-page-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/chromium/wizard/wizard-page--wizard-page-status-indicators-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/chromium/wizard/wizard-page--wizard-page-status-indicators-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard--full-screen-wizard-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard--full-screen-wizard-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard--wizard-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard--wizard-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/snapshots/firefox/wizard/wizard-long-titles--wizard-long-titles-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../snapshots/firefox/wizard/wizard-long-titles--wizard-long-titles-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard-page--wizard-page-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/firefox/wizard/wizard-page--wizard-page-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/firefox/wizard/wizard-page--wizard-page-status-indicators-core-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/firefox/wizard/wizard-page--wizard-page-status-indicators-core-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fa8918a

Please sign in to comment.