feat(chips): Add mixins to customize horizontal padding and icon margins #3530
Conversation
packages/mdc-chips/README.md
Outdated
| @@ -208,14 +208,17 @@ Mixin | Description | |||
| `mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match | |||
| `mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state | |||
| `mdc-chip-outline($width, $style, $color)` | Customizes the outline properties for a chip | |||
| `mdc-chip-outline-width($width)` | Customizes the outline width for a chip | |||
| `mdc-chip-outline-width($width, $horizontal-padding)` | Customizes the outline width for a chip | |||
There was a problem hiding this comment.
Add another sentence:
$horizontal-padding is only required in cases where mdc-chip-horizontal-padding is also included with a custom value.
(This is based on how we documented the outline-width mixin for Button.)
|
All 389 screenshot tests passed for commit 0fcb7c9 vs. |
|
I would've asked for a screenshot test if it weren't for the fact that we don't have any screenshot tests for chips yet... Do we want to work on that in a separate PR? |
|
I'll be adding screenshot tests in a separate PR first, and then will update this to include them for these changes. |
|
Updated with screenshot tests for each mixin: https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/09/13/22_36_05_454/report/report.html?utm_source=cli&utm_content=test_results |
packages/mdc-chips/_mixins.scss
Outdated
| $right: $mdc-chip-leading-icon-margin-right, | ||
| $bottom: $mdc-chip-leading-icon-margin-bottom, | ||
| $left: $mdc-chip-leading-icon-margin-left) { | ||
| .mdc-chip__icon.mdc-chip__icon--leading { |
There was a problem hiding this comment.
the .mdc-chip__icon is overly specific in this instance. mdc-chip__icon--leading can only apply to mdc-chip__icon, so you don't need to specify it again.
We did some research offline and realize that sometimes we need to be overly specific about our CSS selectors for icon elements, because we want to override styles applied by material-icons-extended
However,margin is applied by material-icons-extended, so it does not apply in this case.
So remove mdc-chip__icon, pretty please, and re-run the screenshot tests.
packages/mdc-chips/_mixins.scss
Outdated
| $right: $mdc-chip-trailing-icon-margin-right, | ||
| $bottom: $mdc-chip-trailing-icon-margin-bottom, | ||
| $left: $mdc-chip-trailing-icon-margin-left) { | ||
| .mdc-chip__icon.mdc-chip__icon--trailing { |
| @@ -77,13 +77,13 @@ | |||
| } | |||
|
|
|||
| .mdc-chip__icon--trailing { | |||
| margin: 0 -4px 0 4px; | |||
| margin: $mdc-chip-trailing-icon-margin-top $mdc-chip-trailing-icon-margin-right $mdc-chip-trailing-icon-margin-bottom $mdc-chip-trailing-icon-margin-left; | |||
There was a problem hiding this comment.
this is basically duplicating the logic in mdc-chip-trailing-icon-margin...so instead call mdc-chip-trailing-icon-margin from @at-root
and then re-run the screenshots :)
No description provided.