Skip to content

Commit

Permalink
feat(stepper): Add initial styles to stepper based on Material guidel…
Browse files Browse the repository at this point in the history 
…ines (#6242)

* Add initial styles to stepper based on Material guidelines

* Fix flex-shrink and min-width

* Changes made based on review

* Fix alignment

* Margin modifications
  • Loading branch information
@jwshinjwshin
jwshinjwshin committed Aug 16, 2017
1 parent e3f015d commit ad6d370
Show file tree
Hide file tree
Showing 9 changed files with 297 additions and 35 deletions.
110 changes: 110 additions & 0 deletions src/demo-app/stepper/stepper-demo.html
View file
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
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 @@ -57,6 +58,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
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
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
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
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
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
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 !default;
$mat-label-header-height: 24px !default;
$mat-stepper-label-min-width: 50px !default;
$mat-stepper-side-gap: 24px !default;
$mat-vertical-stepper-content-margin: 12px !default;
$mat-vertical-stepper-content-padding: 16px 0 32px $mat-stepper-side-gap !default;
$mat-vertical-content-container-padding: 8px !default;
$mat-connector-line-width: 1px !default;
$mat-connector-line-gap: 8px !default;
$mat-horizontal-connector-line-size: 5% !default;
$mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-gap !default;

:host {
display: block;
padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $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;
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;
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: flex;
align-items: center;
margin: $mat-connector-line-gap 0;

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

.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[aria-expanded='false'] {
display: none;
}

.vertical-content-container {
border-left-width: $mat-connector-line-width;
border-left-style: solid;
margin-left: $mat-vertical-stepper-content-margin;
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 {
margin-top: $mat-connector-line-gap;

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

&:first-child {
margin-top: 0;
padding-top: $mat-vertical-stepper-margin-top;
}
}
2 changes: 1 addition & 1 deletion src/lib/stepper/stepper.ts
View file
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

0 comments on commit ad6d370

Please sign in to comment.