Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(shape): Fix errors related to multi-value shape categories #4547

Merged
merged 13 commits into from
Apr 2, 2019
Merged

fix(shape): Fix errors related to multi-value shape categories #4547

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bec54cf
fix(notched-outline): Warn when radius resolves to multiple values
Mar 27, 2019
b8f8538
WIP Missed one variable rename
Mar 28, 2019
95ede35
Merge branch 'master' into fix/textfield-select-shape-warn
kfranqueiro Mar 28, 2019
6307eba
WIP Fixes to correctly support categories specifying multiple radii
Mar 29, 2019
937f539
WIP Shorten warning message
Mar 29, 2019
5904bd1
WIP Fix lint
Mar 29, 2019
dfe2347
WIP Add clarifying comment
Mar 29, 2019
f76d287
WIP Add examples
Apr 2, 2019
726b27a
fix(shape): Added new test to check radius list override
abhiomkar Apr 2, 2019
d05f6ae
Merge remote-tracking branch 'origin/master' into fix/textfield-selec…
abhiomkar Apr 2, 2019
242c352
fix(shape): Fix lint errors
abhiomkar Apr 2, 2019
875b8e3
fix(shape): Fix specificity in tests and init components
abhiomkar Apr 2, 2019
308b6e7
fix(shape): Updated golden.json
abhiomkar Apr 2, 2019
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
7 changes: 7 additions & 0 deletions packages/mdc-notched-outline/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
$radius: mdc-shape-prop-value($radius);

@if (length($radius) > 1) {
// stylelint-disable-next-line max-line-length
@warn "mdc-notched-outline-shape-radius currently only supports a single radius value. Follow https://github.com/material-components/material-components-web/issues/4140 for updates.";
}

$radius: nth($radius, 1);

.mdc-notched-outline__leading {
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);

Expand Down
15 changes: 9 additions & 6 deletions packages/mdc-select/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,12 @@
}

@mixin mdc-select-outline-shape-radius($radius, $rtl-reflexive: false) {
$resolved-radius: mdc-shape-resolve-percentage-radius($mdc-select-height, $radius);
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($mdc-select-height, mdc-shape-prop-value($radius)), 1);

@if (length(mdc-shape-prop-value($radius)) > 1) {
// stylelint-disable-next-line max-line-length
@warn "mdc-select-outline-shape-radius currently only supports a single radius value. Follow https://github.com/material-components/material-components-web/issues/4140 for updates.";
}

.mdc-notched-outline {
@include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
Expand All @@ -118,21 +123,19 @@
@include mdc-shape-radius($resolved-radius, $rtl-reflexive);
}

$radius-pixels: mdc-shape-prop-value($resolved-radius);

@if ($radius-pixels > $mdc-notched-outline-leading-width) {
@if ($resolved-radius > $mdc-notched-outline-leading-width) {
.mdc-select__native-control {
@include mdc-rtl-reflexive-property(
padding,
$radius-pixels + $mdc-notched-outline-padding,
$resolved-radius + $mdc-notched-outline-padding,
$mdc-select-arrow-padding
);
}

+ .mdc-select-helper-text {
@include mdc-rtl-reflexive-property(
margin,
$radius-pixels + $mdc-notched-outline-padding,
$resolved-radius + $mdc-notched-outline-padding,
$mdc-select-outline-label-offset
);
}
Expand Down
15 changes: 9 additions & 6 deletions packages/mdc-textfield/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,21 +217,24 @@
}

@mixin mdc-text-field-outline-shape-radius($radius, $rtl-reflexive: false) {
$resolved-radius: mdc-shape-resolve-percentage-radius($mdc-text-field-height, $radius);
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($mdc-text-field-height, mdc-shape-prop-value($radius)), 1);

@if (length(mdc-shape-prop-value($radius)) > 1) {
// stylelint-disable-next-line max-line-length
@warn "mdc-text-field-outline-shape-radius currently only supports a single radius value. Follow https://github.com/material-components/material-components-web/issues/4140 for updates.";
}

.mdc-notched-outline {
@include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
}

$radius-pixels: mdc-shape-prop-value($resolved-radius);

@if ($radius-pixels > $mdc-notched-outline-leading-width) {
@if ($resolved-radius > $mdc-notched-outline-leading-width) {
.mdc-text-field__input {
@include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, 0);
@include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, 0);
}

+ .mdc-text-field-helper-line {
@include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, $radius-pixels);
@include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, $radius-pixels);
}
}
}
Expand Down