feat(linear-progress): Implement Linear Progress indicators #672
Conversation
Resolves #29: Implement Linear Progress Indicator Component
Codecov Report
@@ Coverage Diff @@
## master #672 +/- ##
==========================================
+ Coverage 99.92% 99.92% +<.01%
==========================================
Files 59 62 +3
Lines 2504 2572 +68
Branches 291 295 +4
==========================================
+ Hits 2502 2570 +68
Misses 2 2
Continue to review full report at Codecov.
|
demos/index.html
Outdated
| @@ -167,6 +167,14 @@ | |||
| </li> | |||
|
|
|||
| <li class="mdc-list-item"> | |||
| <span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/ic_component_24px.svg" /></span> | |||
There was a problem hiding this comment.
I believe this image should be:
https://material.io/components/images/component_icons/progress_activity.svg
At least, that's what iOS uses.
demos/linear-progress.html
Outdated
| <main class="mdc-toolbar-fixed-adjust"> | ||
|
|
||
| <section class="hero"> | ||
| <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate"> |
| @@ -0,0 +1,186 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
This demos look gorgeous. The only thing I might change is giving each example a little more space to breath. For a good minute I was looking at the reverse LPI thinking it was a very wrong implementation of buffer LPI. 😝
| transform: translateX(0); | ||
| } | ||
|
|
||
| 59.15% { |
There was a problem hiding this comment.
Just looking for clarification, not necessarily that it's wrong
There was a problem hiding this comment.
I just copied all the animation from here
https://component-spec.googleplex.com/progress_and_activity/linear_progress_indicator
| width: 100%; | ||
| height: 4px; | ||
| transform: translateZ(0); | ||
| transition: opacity 250ms linear; |
There was a problem hiding this comment.
Consider using mdc-animation here
| @@ -0,0 +1,89 @@ | |||
| /** | |||
| * Copyright 2016 Google Inc. All Rights Reserved. | |||
| @@ -0,0 +1,68 @@ | |||
| /** | |||
| * Copyright 2016 Google Inc. All Rights Reserved. | |||
| @@ -0,0 +1,132 @@ | |||
| // Copyright 2016 Google Inc. All Rights Reserved. | |||
| @@ -0,0 +1,136 @@ | |||
| /** | |||
| * Copyright 2016 Google Inc. All Rights Reserved. | |||
| @@ -0,0 +1,87 @@ | |||
| /** | |||
| * Copyright 2016 Google Inc. All Rights Reserved. | |||
…/material-components-web into feat/linear-progress
|
Addressed comments. PTAL |
| getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR), | ||
| hasClass: (className) => this.root_.classList.contains(className), | ||
| removeClass: (className) => this.root_.classList.remove(className), | ||
| setTransform: (el, value) => { |
There was a problem hiding this comment.
Consider extending mdc-animation and extract this out to make the adapter conform more to our recommended best practices. That said, there's nothing mysterious about what this adapter method is doing, so up to you. :)
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| // SVG is optimized for daya URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) |
|
|
||
| setScale(el, scaleValue) { | ||
| const value = 'scaleX(' + scaleValue + ')'; | ||
| for (let i=0; i<transformStyleProperties.length; i++) { |
Resolves #29: Implement Linear Progress Indicator Component