feat(stepper): Add initial styles to stepper based on Material guidelines by g1shin · Pull Request #6242 · angular/components

g1shin · 2017-08-03T00:58:51Z

mmalerba · 2017-08-03T21:28:30Z

src/lib/stepper/_stepper-theme.scss

+    }
+
+    .mat-stepper-index {
+      background: mat-color($primary);


nit: background-color

mmalerba · 2017-08-03T21:28:48Z

src/lib/stepper/_stepper-theme.scss

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


background-color

mmalerba · 2017-08-03T21:30:41Z

src/lib/stepper/stepper.scss

+
+:host {
+  display: block;
+  padding-left: 24px;


create scss var for this

mmalerba · 2017-08-03T21:30:47Z

src/lib/stepper/stepper.scss

+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 50px;


mmalerba · 2017-08-03T21:30:58Z

src/lib/stepper/stepper.scss

+.mat-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  padding-right: 24px;


mmalerba · 2017-08-03T21:33:52Z

src/lib/stepper/stepper.scss

+.connector-line {
+  border: 0;
+  height: 1px;
+  border-top: 1px solid #bdbdbd;


border-top-color should be part of theme file

mmalerba · 2017-08-03T21:34:43Z

src/lib/stepper/stepper.scss

+
+.vertical-content-container {
+  content: '';
+  border-left: 1px solid #bdbdbd;


scss vars, border-left-color in theme file

mmalerba · 2017-08-03T21:34:59Z

src/lib/stepper/stepper.scss

+}
+
+.mat-vertical-stepper-content {
+  margin-left: 24px;


mmalerba · 2017-08-03T21:35:05Z

src/lib/stepper/stepper.scss

+  }
+
+  &[aria-expanded='true'] {
+    padding-bottom: 48px;


mmalerba · 2017-08-03T21:35:11Z

src/lib/stepper/stepper.scss

+  }
+
+  &:first-child {
+    padding-top: 24px;


g1shin · 2017-08-04T00:06:34Z

Ready for review again 😀

mmalerba

Are you using pixel margins to vertically center things? This is usually a bad idea because its very brittle. I can show you how to use some of the flexbox alignment properties to do this more easily

mmalerba · 2017-08-04T05:35:29Z

src/lib/stepper/stepper-vertical.html

-       [attr.aria-expanded]="selectedIndex == i">
-    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+  <div class="vertical-content-container">
+    <!--<div *ngIf="!isLast" class="vertical-connector-line"></div>-->


mmalerba · 2017-08-04T05:39:19Z

src/lib/stepper/stepper.scss

-.mat-stepper-content[aria-expanded='false'] {
-  display: none;
+$mat-horizontal-stepper-header-height: 72px;
+$mat-vertical-stepper-header-height: 24px;


are any of these values related to each other or conceptually the same thing? for example I see a lot of 24px

mmalerba · 2017-08-04T05:43:59Z

src/lib/stepper/stepper.scss

+.mat-horizontal-stepper-header {
+  display: inline-flex;
+  line-height: $mat-horizontal-stepper-header-height;
+  flex-grow: 0;


can use shorthand for flex-grow and flex-shrink: flex: 0 1 auto

mmalerba · 2017-08-04T05:44:20Z

src/lib/stepper/stepper.scss

+  display: inline-flex;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;


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

mmalerba · 2017-08-04T05:45:38Z

src/lib/stepper/stepper.scss

+    margin-right: $mat-horizontal-stepper-index-margin-right;
+    margin-top: $mat-horizontal-stepper-index-martin-top;
+    display: inline-block;
+    flex-shrink: 0;


flex: none

mmalerba · 2017-08-04T05:47:27Z

src/lib/stepper/stepper.scss

+  border-top-style: solid;
+  margin-top: $mat-connector-line-margin-top;
+  width: 5%;
+  flex-grow: 1;


flex: auto

mmalerba · 2017-08-04T05:48:17Z

src/lib/stepper/stepper.scss

+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: $mat-connector-line-margin;
+  margin-right: $mat-connector-line-margin;


can use margin shorthand: margin: <top> <right> 0 <left>

mmalerba · 2017-08-04T05:48:29Z

src/lib/stepper/stepper.scss

+}
+
+.vertical-content-container {
+  content: '';


mmalerba · 2017-08-04T05:48:57Z

src/lib/stepper/stepper.scss

+  border-top-width: $mat-connector-line-width;
+  border-top-style: solid;
+  margin-top: $mat-connector-line-margin-top;
+  width: 5%;


mmalerba · 2017-08-04T05:49:06Z

src/lib/stepper/stepper.scss

+  content: '';
+  border-left-width: $mat-connector-line-width;
+  border-left-style: solid;
+  margin: $mat-connector-line-margin 0 $mat-connector-line-margin 12px;


scss var for 12px

g1shin · 2017-08-04T18:44:18Z

Changes made; ready for review.

ocarreterom

SCSS vars should be !default.

g1shin · 2017-08-04T23:03:06Z

Changes have been made regarding managing margins, and I deployed the modified demo onto Firebase app. 👍

mmalerba

I'd like to further refine the CSS in the future, but for now it looks good

…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

…ines (angular#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

…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

@input

…tepper branch. (#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (#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 feat(stepper): Add support for linear stepper (#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper #2 - each step as its own form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (#6507) feat(stepper): Add documentation for stepper (#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

@input

…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#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 feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

@input

…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#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 feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

angular-automatic-lock-bot · 2019-09-06T20:02:45Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Add initial styles to stepper based on Material guidelines

ab28eb9

g1shin assigned jelbourn, kara, g1shin and mmalerba Aug 3, 2017

g1shin requested review from jelbourn, kara and mmalerba August 3, 2017 00:58

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 3, 2017

Fix flex-shrink and min-width

398123b

mmalerba reviewed Aug 3, 2017

View reviewed changes

Changes made based on review

95c81b0

mmalerba reviewed Aug 4, 2017

View reviewed changes

Fix alignment

06762a9

ocarreterom reviewed Aug 4, 2017

View reviewed changes

Margin modifications

7bb7a54

mmalerba approved these changes Aug 5, 2017

View reviewed changes

mmalerba added the pr: lgtm label Aug 5, 2017

g1shin merged commit b0f11d6 into angular:stepper Aug 6, 2017

g1shin deleted the css branch August 6, 2017 18:23

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Conversation

g1shin commented Aug 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 4, 2017

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 4, 2017

Uh oh!

ocarreterom left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 4, 2017

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

g1shin commented Aug 3, 2017 •

edited

Loading

ocarreterom left a comment •

edited

Loading