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

Commit 8addf4d

Browse files
acdvorakacdvorak
committed
Merge remote-tracking branch 'origin' into feat/typescript
2 parents 87a5e8e + 67a1f18 commit 8addf4d

22 files changed

+667
-212
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ matrix:
3535
env:
3636
- TEST_SUITE=lint
3737
script:
38-
- if has_testable_files; then npm run lint; else log_untestable_files; fi
38+
- if has_testable_files; then npm run lint && npm run test:feature-targeting; else log_untestable_files; fi
3939

4040
- node_js: 8
4141
env:

‎CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<a name="0.43.1"></a>
2+
## [0.43.1](https://github.com/material-components/material-components-web/compare/v0.43.0...v0.43.1) (2019-01-22)
3+
4+
5+
### Bug Fixes
6+
7+
* **text-field:** Reset z-index property of chrome autofill box ([#4232](https://github.com/material-components/material-components-web/issues/4232)) ([9e06b77](https://github.com/material-components/material-components-web/commit/9e06b77))
8+
9+
110
<a name="0.43.0"></a>
211
# [0.43.0](https://github.com/material-components/material-components-web/compare/v0.42.0...v0.43.0) (2019-01-07)
312

‎docs/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ Then configure webpack to convert `app.js` into `bundle.js` by modifying the fol
269269
filename: 'bundle.js',
270270
}
271271
```
272-
3. Add the `babel-loader` object to the rules array after the `scss-loader` object:
272+
3. Add the `babel-loader` object to the rules array after the `sass-loader` object:
273273
```js
274274
{
275275
test: /\.js$/,

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"lerna": "2.0.0-beta.36",
3-
"version": "0.43.0",
3+
"version": "0.43.1",
44
"commands": {
55
"publish": {
66
"ignore": [

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"test:watch": "karma start --auto-watch",
3939
"test:unit": "karma start --single-run",
4040
"test:dependency": "./scripts/dependency-test.sh",
41+
"test:feature-targeting": "node test/scss/verify-feature-targeting.js",
4142
"test:site": "npm run clean:site && ./scripts/site-generator-test.sh"
4243
},
4344
"devDependencies": {
@@ -169,6 +170,7 @@
169170
"drawer",
170171
"elevation",
171172
"fab",
173+
"feature-targeting",
172174
"floating-label",
173175
"form-field",
174176
"grid-list",

‎packages/material-components-web/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "material-components-web",
33
"description": "Modular and customizable Material Design UI components for the web",
4-
"version": "0.43.0",
4+
"version": "0.43.1",
55
"license": "MIT",
66
"keywords": [
77
"material components",
@@ -25,6 +25,7 @@
2525
"@material/drawer": "^0.43.0",
2626
"@material/elevation": "^0.43.0",
2727
"@material/fab": "^0.43.0",
28+
"@material/feature-targeting": "0.0.0",
2829
"@material/floating-label": "^0.43.0",
2930
"@material/form-field": "^0.43.0",
3031
"@material/grid-list": "^0.43.0",
@@ -48,10 +49,10 @@
4849
"@material/snackbar": "^0.43.0",
4950
"@material/switch": "^0.43.0",
5051
"@material/tab": "^0.43.0",
51-
"@material/tab-bar": "^0.43.0",
52+
"@material/tab-bar": "^0.43.1",
5253
"@material/tab-indicator": "^0.43.0",
53-
"@material/tab-scroller": "^0.43.0",
54-
"@material/textfield": "^0.43.0",
54+
"@material/tab-scroller": "^0.43.1",
55+
"@material/textfield": "^0.43.1",
5556
"@material/theme": "^0.43.0",
5657
"@material/toolbar": "^0.43.0",
5758
"@material/top-app-bar": "^0.43.0",

‎packages/mdc-button/_mixins.scss

Lines changed: 185 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
//
2222

2323
@import "@material/elevation/mixins";
24+
@import "@material/feature-targeting/functions";
25+
@import "@material/feature-targeting/mixins";
2426
@import "@material/ripple/mixins";
2527
@import "@material/rtl/mixins";
2628
@import "@material/theme/functions";
@@ -30,6 +32,97 @@
3032
@import "@material/shape/functions";
3133
@import "./variables";
3234

35+
@mixin mdc-button($query: mdc-feature-all()) {
36+
$feat-color: mdc-feature-create-target($query, color);
37+
$feat-structure: mdc-feature-create-target($query, structure);
38+
39+
@include mdc-ripple-common($query);
40+
41+
// postcss-bem-linter: define button
42+
.mdc-button {
43+
@include mdc-button-base_($query);
44+
45+
@include mdc-feature-targets($feat-structure) {
46+
@include mdc-button-shape-radius(small);
47+
// This fits under structure because it doesn't depend on the theme.
48+
@include mdc-button-container-fill-color(transparent);
49+
50+
// The icon CSS class overrides styles defined in the .material-icons CSS
51+
// class, which is loaded separately so the order of CSS definitions is not
52+
// guaranteed. Therefore, increase specifity by nesting this class to ensure
53+
// overrides apply.
54+
.mdc-button__icon {
55+
@include mdc-button__icon_;
56+
}
57+
}
58+
59+
@include mdc-feature-targets($feat-color) {
60+
@include mdc-button-ink-color(primary);
61+
}
62+
63+
@include mdc-states(primary, false, $query);
64+
}
65+
66+
@include mdc-feature-targets($feat-structure) {
67+
.mdc-button__label + .mdc-button__icon {
68+
@include mdc-button__icon-trailing_;
69+
}
70+
71+
// stylelint-disable-next-line selector-no-qualifying-type
72+
svg.mdc-button__icon {
73+
@include mdc-button__icon-svg_;
74+
}
75+
76+
.mdc-button--raised,
77+
.mdc-button--unelevated,
78+
.mdc-button--outlined {
79+
.mdc-button__icon {
80+
// Icons inside contained buttons have different styles due to increased button padding
81+
@include mdc-button__icon-contained_;
82+
}
83+
84+
.mdc-button__label + .mdc-button__icon {
85+
@include mdc-button__icon-contained-trailing_;
86+
}
87+
}
88+
}
89+
90+
.mdc-button--raised,
91+
.mdc-button--unelevated {
92+
@include mdc-button--filled_($query);
93+
94+
@include mdc-feature-targets($feat-color) {
95+
@include mdc-button-container-fill-color(primary);
96+
@include mdc-button-ink-color(on-primary);
97+
}
98+
99+
@include mdc-states(on-primary, false, $query);
100+
}
101+
102+
.mdc-button--raised {
103+
@include mdc-button--raised_($query);
104+
}
105+
106+
.mdc-button--outlined {
107+
@include mdc-button--outlined_($query);
108+
109+
@include mdc-feature-targets($feat-structure) {
110+
@include mdc-button-outline-width(2px);
111+
}
112+
113+
@include mdc-feature-targets($feat-color) {
114+
@include mdc-button-outline-color(primary);
115+
}
116+
}
117+
118+
.mdc-button--dense {
119+
@include mdc-feature-targets($feat-structure) {
120+
@include mdc-button--dense_;
121+
}
122+
}
123+
// postcss-bem-linter: end
124+
}
125+
33126
@mixin mdc-button-filled-accessible($container-fill-color) {
34127
$fill-tone: mdc-theme-tone($container-fill-color);
35128

@@ -92,48 +185,63 @@
92185
border-width: $outline-width;
93186
}
94187

95-
@mixin mdc-button-base_() {
96-
@include mdc-typography(button);
97-
@include mdc-ripple-surface;
98-
@include mdc-ripple-radius-bounded;
99-
@include mdc-button-horizontal-padding($mdc-button-horizontal-padding);
100-
101-
display: inline-flex;
102-
position: relative;
103-
align-items: center;
104-
justify-content: center;
105-
box-sizing: border-box;
106-
min-width: 64px;
107-
height: $mdc-button-height;
108-
border: none;
109-
outline: none;
110-
/* @alternate */
111-
line-height: inherit;
112-
user-select: none;
113-
-webkit-appearance: none;
114-
overflow: hidden;
115-
vertical-align: middle;
116-
117-
&::-moz-focus-inner {
118-
padding: 0;
119-
border: 0;
120-
}
121-
122-
// postcss-bem-linter: ignore
123-
&:active {
124-
outline: none;
188+
@mixin mdc-button-base_($query) {
189+
$feat-color: mdc-feature-create-target($query, color);
190+
$feat-structure: mdc-feature-create-target($query, structure);
191+
$feat-typography: mdc-feature-create-target($query, typography);
192+
193+
@include mdc-feature-targets($feat-typography) {
194+
@include mdc-typography(button);
125195
}
126196

127-
&:hover {
128-
cursor: pointer;
197+
@include mdc-ripple-surface($query);
198+
199+
@include mdc-feature-targets($feat-structure) {
200+
@include mdc-ripple-radius-bounded;
201+
@include mdc-button-horizontal-padding($mdc-button-horizontal-padding);
202+
203+
display: inline-flex;
204+
position: relative;
205+
align-items: center;
206+
justify-content: center;
207+
box-sizing: border-box;
208+
min-width: 64px;
209+
height: $mdc-button-height;
210+
border: none;
211+
outline: none;
212+
/* @alternate */
213+
line-height: inherit;
214+
user-select: none;
215+
-webkit-appearance: none;
216+
overflow: hidden;
217+
vertical-align: middle;
218+
219+
&::-moz-focus-inner {
220+
padding: 0;
221+
border: 0;
222+
}
223+
224+
// postcss-bem-linter: ignore
225+
&:active {
226+
outline: none;
227+
}
228+
229+
&:hover {
230+
cursor: pointer;
231+
}
129232
}
130233

131234
&:disabled {
132-
@include mdc-theme-prop(background-color, transparent);
235+
@include mdc-feature-targets($feat-color) {
236+
@include mdc-theme-prop(background-color, transparent);
237+
238+
color: $mdc-button-disabled-ink-color;
239+
}
133240

134-
color: $mdc-button-disabled-ink-color;
135-
cursor: default;
136-
pointer-events: none;
241+
@include mdc-feature-targets($feat-structure) {
242+
cursor: default;
243+
pointer-events: none;
244+
}
137245
}
138246
}
139247

@@ -163,39 +271,60 @@
163271
@include mdc-rtl-reflexive-property(margin, 8px, -4px);
164272
}
165273

166-
@mixin mdc-button--outlined_() {
167-
border-style: solid;
274+
@mixin mdc-button--outlined_($query) {
275+
$feat-color: mdc-feature-create-target($query, color);
276+
$feat-structure: mdc-feature-create-target($query, structure);
168277

169-
&:disabled {
170-
border-color: $mdc-button-disabled-ink-color;
278+
@include mdc-feature-targets($feat-structure) {
279+
border-style: solid;
280+
}
281+
282+
@include mdc-feature-targets($feat-color) {
283+
&:disabled {
284+
border-color: $mdc-button-disabled-ink-color;
285+
}
171286
}
172287
}
173288

174-
@mixin mdc-button--filled_() {
175-
@include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);
289+
@mixin mdc-button--filled_($query) {
290+
$feat-color: mdc-feature-create-target($query, color);
291+
$feat-structure: mdc-feature-create-target($query, structure);
176292

177-
&:disabled {
178-
background-color: rgba(mdc-theme-prop-value(on-surface), .12);
179-
color: $mdc-button-disabled-ink-color;
293+
@include mdc-feature-targets($feat-structure) {
294+
@include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);
295+
}
296+
297+
@include mdc-feature-targets($feat-color) {
298+
&:disabled {
299+
background-color: rgba(mdc-theme-prop-value(on-surface), .12);
300+
color: $mdc-button-disabled-ink-color;
301+
}
180302
}
181303
}
182304

183-
@mixin mdc-button--raised_() {
184-
@include mdc-elevation(2);
305+
@mixin mdc-button--raised_($query) {
306+
$feat-animation: mdc-feature-create-target($query, animation);
307+
$feat-color: mdc-feature-create-target($query, color);
185308

186-
transition: mdc-elevation-transition-value();
309+
@include mdc-feature-targets($feat-color) {
310+
@include mdc-elevation(2);
187311

188-
&:hover,
189-
&:focus {
190-
@include mdc-elevation(4);
191-
}
312+
&:hover,
313+
&:focus {
314+
@include mdc-elevation(4);
315+
}
192316

193-
&:active {
194-
@include mdc-elevation(8);
317+
&:active {
318+
@include mdc-elevation(8);
319+
}
320+
321+
&:disabled {
322+
@include mdc-elevation(0);
323+
}
195324
}
196325

197-
&:disabled {
198-
@include mdc-elevation(0);
326+
@include mdc-feature-targets($feat-animation) {
327+
transition: mdc-elevation-transition-value();
199328
}
200329
}
201330

0 commit comments

Comments
 (0)