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

Commit a58f2d2

Browse files
kfranqueirokfranqueiro
authored
feat(icon-button): Add feature targeting for styles (#4536)
1 parent 0bfeabb commit a58f2d2

File tree

4 files changed

+110
-59
lines changed

4 files changed

+110
-59
lines changed

‎packages/mdc-icon-button/_mixins.scss

Lines changed: 102 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,51 +20,123 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "@material/ripple/common";
23+
@import "@material/feature-targeting/functions";
24+
@import "@material/feature-targeting/mixins";
2425
@import "@material/ripple/mixins";
2526
@import "@material/theme/mixins";
2627
@import "./variables";
2728

28-
@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2) {
29-
width: $width + $padding * 2;
30-
height: $height + $padding * 2;
31-
padding: $padding;
32-
font-size: max($width, $height);
29+
@mixin mdc-icon-button-core-styles($query: mdc-feature-all()) {
30+
@include mdc-icon-button-without-ripple($query);
31+
@include mdc-icon-button-ripple($query);
32+
}
33+
34+
@mixin mdc-icon-button-without-ripple($query: mdc-feature-all()) {
35+
$feat-structure: mdc-feature-create-target($query, structure);
36+
37+
// postcss-bem-linter: define icon-button
38+
.mdc-icon-button {
39+
@include mdc-icon-button-base_($query: $query);
40+
}
41+
42+
.mdc-icon-button__icon {
43+
@include mdc-feature-targets($feat-structure) {
44+
display: inline-block;
45+
}
46+
47+
// stylelint-disable-next-line plugin/selector-bem-pattern
48+
&.mdc-icon-button__icon--on {
49+
@include mdc-feature-targets($feat-structure) {
50+
display: none;
51+
}
52+
}
53+
}
54+
55+
.mdc-icon-button--on {
56+
.mdc-icon-button__icon {
57+
@include mdc-feature-targets($feat-structure) {
58+
display: none;
59+
}
60+
61+
// stylelint-disable-next-line plugin/selector-bem-pattern
62+
&.mdc-icon-button__icon--on {
63+
@include mdc-feature-targets($feat-structure) {
64+
display: inline-block;
65+
}
66+
}
67+
}
68+
}
69+
// postcss-bem-linter: end
70+
}
71+
72+
@mixin mdc-icon-button-ripple($query: mdc-feature-all()) {
73+
@include mdc-ripple-common($query);
74+
75+
.mdc-icon-button {
76+
@include mdc-ripple-surface($query: $query);
77+
@include mdc-ripple-radius-unbounded($query: $query);
78+
@include mdc-states($query: $query);
79+
}
80+
}
81+
82+
@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2, $query: mdc-feature-all()) {
83+
$feat-structure: mdc-feature-create-target($query, structure);
84+
85+
@include mdc-feature-targets($feat-structure) {
86+
width: $width + $padding * 2;
87+
height: $height + $padding * 2;
88+
padding: $padding;
89+
font-size: max($width, $height);
90+
}
3391

3492
// stylelint-disable-next-line selector-max-type
3593
svg,
3694
img {
37-
width: $width;
38-
height: $height;
95+
@include mdc-feature-targets($feat-structure) {
96+
width: $width;
97+
height: $height;
98+
}
3999
}
40100
}
41101

42-
@mixin mdc-icon-button-ink-color($color) {
43-
@include mdc-theme-prop(color, $color);
44-
@include mdc-states($color);
102+
@mixin mdc-icon-button-ink-color($color, $query: mdc-feature-all()) {
103+
$feat-color: mdc-feature-create-target($query, color);
104+
105+
@include mdc-feature-targets($feat-color) {
106+
@include mdc-theme-prop(color, $color);
107+
}
108+
109+
@include mdc-states($color, $query: $query);
45110
}
46111

47-
@mixin mdc-icon-button-base_() {
48-
@include mdc-ripple-surface;
49-
@include mdc-ripple-radius-unbounded;
50-
@include mdc-icon-button-size($mdc-icon-button-size);
51-
52-
display: inline-block;
53-
position: relative;
54-
box-sizing: border-box;
55-
border: none;
56-
outline: none;
57-
background-color: transparent;
58-
fill: currentColor;
59-
color: inherit;
60-
text-decoration: none;
61-
cursor: pointer;
62-
user-select: none;
112+
@mixin mdc-icon-button-base_($query: mdc-feature-all()) {
113+
$feat-color: mdc-feature-create-target($query, color);
114+
$feat-structure: mdc-feature-create-target($query, structure);
115+
116+
@include mdc-icon-button-size($mdc-icon-button-size, $query: $query);
117+
118+
@include mdc-feature-targets($feat-structure) {
119+
display: inline-block;
120+
position: relative;
121+
box-sizing: border-box;
122+
border: none;
123+
outline: none;
124+
background-color: transparent;
125+
fill: currentColor;
126+
color: inherit;
127+
text-decoration: none;
128+
cursor: pointer;
129+
user-select: none;
130+
}
63131

64132
&:disabled {
65-
@include mdc-theme-prop(color, text-disabled-on-light);
133+
@include mdc-feature-targets($feat-color) {
134+
@include mdc-theme-prop(color, text-disabled-on-light);
135+
}
66136

67-
cursor: default;
68-
pointer-events: none;
137+
@include mdc-feature-targets($feat-structure) {
138+
cursor: default;
139+
pointer-events: none;
140+
}
69141
}
70142
}

‎packages/mdc-icon-button/mdc-icon-button.scss

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,5 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
// postcss-bem-linter: define icon-button
24-
2523
@import "./mixins";
26-
27-
.mdc-icon-button {
28-
@include mdc-icon-button-base_;
29-
@include mdc-states;
30-
}
31-
32-
.mdc-icon-button__icon {
33-
display: inline-block;
34-
35-
// stylelint-disable-next-line plugin/selector-bem-pattern
36-
&.mdc-icon-button__icon--on {
37-
display: none;
38-
}
39-
}
40-
41-
.mdc-icon-button--on {
42-
.mdc-icon-button__icon {
43-
display: none;
44-
45-
// stylelint-disable-next-line plugin/selector-bem-pattern
46-
&.mdc-icon-button__icon--on {
47-
display: inline-block;
48-
}
49-
}
50-
}
51-
52-
// postcss-bem-linter: end
24+
@include mdc-icon-button-core-styles;

‎packages/mdc-icon-button/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@material/base": "^1.0.0",
23+
"@material/feature-targeting": "^0.44.1",
2324
"@material/ripple": "^1.0.1",
2425
"@material/theme": "^1.0.0",
2526
"tslib": "^1.9.3"

‎test/scss/_feature-targeting-test.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import "@material/elevation/mixins";
66
@import "@material/fab/mixins";
77
@import "@material/form-field/mixins";
8+
@import "@material/icon-button/mixins";
89
@import "@material/image-list/mixins";
910
@import "@material/list/mixins";
1011
@import "@material/menu-surface/mixins";
@@ -81,6 +82,11 @@
8182
// Form Field
8283
@include mdc-form-field-core-styles($query: $query);
8384

85+
// Icon Button
86+
@include mdc-icon-button-core-styles($query: $query);
87+
@include mdc-icon-button-size(0, $query: $query);
88+
@include mdc-icon-button-ink-color(red, $query: $query);
89+
8490
// Image List
8591
@include mdc-image-list-core-styles($query: $query);
8692
@include mdc-image-list-aspect(1, $query: $query);

0 commit comments

Comments
 (0)