Skip to content

feat(stepper): Add initial styles to stepper based on Material guidelines #6242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 6, 2017
Merged

feat(stepper): Add initial styles to stepper based on Material guidelines #6242

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab28eb9
Add initial styles to stepper based on Material guidelines
jwshinjwshin Aug 3, 2017
398123b
Fix flex-shrink and min-width
jwshinjwshin Aug 3, 2017
95c81b0
Changes made based on review
jwshinjwshin Aug 4, 2017
06762a9
Fix alignment
jwshinjwshin Aug 4, 2017
7bb7a54
Margin modifications
jwshinjwshin Aug 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions src/demo-app/stepper/stepper-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,113 @@
<h2>Vertical Stepper Demo</h2>
<md-vertical-stepper>
<md-step>
<ng-template mdStepLabel>Fill out your name</ng-template>
<md-input-container>
<input mdInput placeholder="First Name">
<md-error>This field is required</md-error>
</md-input-container>

<md-input-container>
<input mdInput placeholder="Last Name">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>
<div>Fill out your phone number</div>
</ng-template>
<md-input-container>
<input mdInput placeholder="Phone number">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>
<div>Fill out your address</div>
</ng-template>
<md-input-container>
<input mdInput placeholder="Address">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>Confirm your information</ng-template>
Everything seems correct.
<div>
<button md-button>Done</button>
</div>
</md-step>
</md-vertical-stepper>

<h2>Horizontal Stepper Demo</h2>
<md-horizontal-stepper>
<md-step>
<ng-template mdStepLabel>Fill out your name</ng-template>
<md-input-container>
<input mdInput placeholder="First Name">
<md-error>This field is required</md-error>
</md-input-container>

<md-input-container>
<input mdInput placeholder="Last Name">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>
<div>Fill out your phone number</div>
</ng-template>
<md-input-container>
<input mdInput placeholder="Phone number">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>
<div>Fill out your address</div>
</ng-template>
<md-input-container>
<input mdInput placeholder="Address">
<md-error>This field is required</md-error>
</md-input-container>
<div>
<button md-button mdStepperPrevious type="button">Back</button>
<button md-button mdStepperNext type="button">Next</button>
</div>
</md-step>

<md-step>
<ng-template mdStepLabel>Confirm your information</ng-template>
Everything seems correct.
<div>
<button md-button>Done</button>
</div>
</md-step>
</md-horizontal-stepper>

<h2>Horizontal Stepper Demo</h2>
<md-horizontal-stepper>
<md-step *ngFor="let step of steps" [label]="step.label">
Expand Down
2 changes: 2 additions & 0 deletions src/lib/core/theming/_all-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
@import '../../sidenav/sidenav-theme';
@import '../../slide-toggle/slide-toggle-theme';
@import '../../slider/slider-theme';
@import '../../stepper/stepper-theme';
@import '../../tabs/tabs-theme';
@import '../../toolbar/toolbar-theme';
@import '../../tooltip/tooltip-theme';
Expand Down Expand Up @@ -55,6 +56,7 @@
@include mat-sidenav-theme($theme);
@include mat-slide-toggle-theme($theme);
@include mat-slider-theme($theme);
@include mat-stepper-theme($theme);
@include mat-tabs-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-tooltip-theme($theme);
Expand Down
43 changes: 43 additions & 0 deletions src/lib/stepper/_stepper-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/typography/_typography-utils.scss';

@mixin mat-stepper-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$primary: map-get($theme, primary);

.mat-horizontal-stepper-header, .mat-vertical-stepper-header {

.mat-stepper-label {
color: mat-color($foreground, text);
}

.mat-stepper-index {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}

&[aria-selected='false'] {
.mat-stepper-label {
color: mat-color($foreground, disabled-text);
}

.mat-stepper-index {
background-color: mat-color($foreground, disabled-text);
}
}
}

.mat-stepper-horizontal, .mat-stepper-vertical {
background-color: mat-color($background, card);
}

.vertical-content-container {
border-left-color: mat-color($foreground, divider);
}

.connector-line {
border-top-color: mat-color($foreground, divider);
}
}
44 changes: 24 additions & 20 deletions src/lib/stepper/stepper-horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
<div #stepHeader *ngFor="let step of _steps; let i = index; let isLast = last"
class="mat-stepper-header" role="tab"
[id]="_getStepLabelId(i)"
[attr.aria-controls]="_getStepContentId(i)"
[attr.aria-selected]="selectedIndex == i"
[tabIndex]="_focusIndex == i ? 0 : -1"
(click)="step.select()"
(keydown)="_onKeydown($event)">
<div class="mat-stepper-index">
{{i + 1}}
</div>
<div class="mat-horizontal-stepper-header-container">
<ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
<div #stepHeader class="mat-horizontal-stepper-header"
role="tab"
[id]="_getStepLabelId(i)"
[attr.aria-controls]="_getStepContentId(i)"
[attr.aria-selected]="selectedIndex == i"
[tabIndex]="_focusIndex == i ? 0 : -1"
(click)="step.select()"
(keydown)="_onKeydown($event)">
<div class="mat-stepper-index">
{{i + 1}}
</div>

<div class="mat-stepper-label">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div *ngIf="!step.stepLabel">{{step.label}}</div>
</div>
<div class="mat-stepper-label">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div *ngIf="!step.stepLabel">{{step.label}}</div>
</div>
</div>

<div *ngIf="!isLast" class="connector-line"></div>
<div *ngIf="!isLast" class="connector-line"></div>
</ng-container>
</div>

<div *ngFor="let step of _steps; let i = index"
class="mat-stepper-content" role="tabpanel"
class="mat-horizontal-stepper-content" role="tabpanel"
[id]="_getStepContentId(i)"
[attr.aria-labelledby]="_getStepLabelId(i)"
[attr.aria-expanded]="selectedIndex == i">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/stepper/stepper-horizontal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
moduleId: module.id,
selector: 'md-horizontal-stepper, mat-horizontal-stepper',
templateUrl: 'stepper-horizontal.html',
styleUrls: ['stepper.scss'],
styleUrls: ['stepper.css'],
inputs: ['selectedIndex'],
host: {
'class': 'mat-stepper-horizontal',
Expand Down
17 changes: 9 additions & 8 deletions src/lib/stepper/stepper-vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div *ngFor="let step of _steps; let i = index; let isLast = last">
<div #stepHeader class="mat-stepper-header" role="tab"
<div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
<div #stepHeader class="mat-vertical-stepper-header" role="tab"
[id]="_getStepLabelId(i)"
[attr.aria-controls]="_getStepContentId(i)"
[attr.aria-selected]="selectedIndex == i"
Expand All @@ -19,11 +19,12 @@
</div>

</div>
<div *ngIf="!isLast" class="connector-line"></div>
<div class="mat-stepper-content" role="tabpanel"
[id]="_getStepContentId(i)"
[attr.aria-labelledby]="_getStepLabelId(i)"
[attr.aria-expanded]="selectedIndex == i">
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
<div class="vertical-content-container">
<div class="mat-vertical-stepper-content" role="tabpanel"
[id]="_getStepContentId(i)"
[attr.aria-labelledby]="_getStepLabelId(i)"
[attr.aria-expanded]="selectedIndex == i">
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/lib/stepper/stepper-vertical.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
moduleId: module.id,
selector: 'md-vertical-stepper, mat-vertical-stepper',
templateUrl: 'stepper-vertical.html',
styleUrls: ['stepper.scss'],
styleUrls: ['stepper.css'],
inputs: ['selectedIndex'],
host: {
'class': 'mat-stepper-vertical',
Expand Down
110 changes: 106 additions & 4 deletions src/lib/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,109 @@
.mat-stepper-content[aria-expanded='false'] {
display: none;
$mat-horizontal-stepper-header-height: 72px;
$mat-label-header-height: 24px;
$mat-stepper-label-min-width: 50px;
$mat-stepper-side-gap: 24px;
$mat-vertical-stepper-content-margin-right: 12px;
$mat-vertical-stepper-content-padding: 16px 0 32px 0;
$mat-vertical-content-container-padding: 8px;
$mat-connector-line-width: 1px;
$mat-connector-line-gap: 8px;
$mat-horizontal-connector-line-size: 5%;

:host {
display: block;
padding-left: $mat-stepper-side-gap;
}

.mat-stepper-label {
display: inline-flex;
white-space: nowrap;
overflow: hidden;
// TODO(jwshin): text-overflow does not work as expected.
text-overflow: ellipsis;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this work now? if not leave a TODO to investigate

min-width: $mat-stepper-label-min-width;
}

.mat-stepper-index {
border-radius: 50%;
height: $mat-label-header-height;
width: $mat-label-header-height;
text-align: center;
line-height: $mat-label-header-height;
}

.mat-horizontal-stepper-header-container {
white-space: nowrap;
display: flex;
padding-right: $mat-stepper-side-gap;
align-items: center;
}

.mat-horizontal-stepper-header {
display: inline-flex;
line-height: $mat-horizontal-stepper-header-height;
overflow: hidden;
align-items: center;

.mat-stepper-index {
margin-right: $mat-connector-line-gap;
display: inline-block;
flex: none;
}
}

.mat-vertical-stepper-header {
display: inline-flex;
align-items: center;

.mat-stepper-index {
margin-right: $mat-vertical-stepper-content-margin-right;
}
}

.mat-stepper-index, .mat-stepper-label {
display: inline-block;
.connector-line {
border-top-width: $mat-connector-line-width;
border-top-style: solid;
width: $mat-horizontal-connector-line-size;
flex: auto;
margin: 0 $mat-connector-line-gap;
height: 0;
}

.mat-horizontal-stepper-content {
padding-right: $mat-stepper-side-gap;

&[aria-expanded='false'] {
display: none;
}
}

.vertical-content-container {
border-left-width: $mat-connector-line-width;
border-left-style: solid;
margin: $mat-connector-line-gap 0 $mat-connector-line-gap $mat-vertical-stepper-content-margin-right;
padding: $mat-vertical-content-container-padding 0;
}

.mat-vertical-stepper-content {
padding-left: $mat-stepper-side-gap;

&[aria-expanded='false'] {
display: none;
}

&[aria-expanded='true'] {
padding: $mat-vertical-stepper-content-padding;
}
}

.mat-step {
&:last-child {
.vertical-content-container {
border: none;
}
}

&:first-child {
padding-top: $mat-stepper-side-gap;
}
}
2 changes: 1 addition & 1 deletion src/lib/stepper/stepper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {MdStepLabel} from './step-label';
@Component({
moduleId: module.id,
selector: 'md-step, mat-step',
templateUrl: 'step.html',
templateUrl: 'step.html'
})
export class MdStep extends CdkStep {
/** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
Expand Down
Loading