Skip to content

Commit fbdd397

Browse files
asyncLizasyncLiz
authored
Merge branch 'master' into chore/release
2 parents 191f8fa + 7ec9697 commit fbdd397

File tree

23 files changed

+349
-299
lines changed

23 files changed

+349
-299
lines changed

‎docs/migrating-from-mdl.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ MDC Web:
9999

100100
```html
101101
<label class="mdc-text-field">
102-
<div class="mdc-text-field__ripple"></div>
102+
<span class="mdc-text-field__ripple"></span>
103103
<input class="mdc-text-field__input" type="text" aria-labelledby="label">
104104
<span id="label" class="mdc-floating-label">Input Label</span>
105-
<div class="mdc-line-ripple"></div>
105+
<span class="mdc-line-ripple"></span>
106106
</label>
107107
```
108108

@@ -126,10 +126,10 @@ element, with the component’s class name as the value. For example:
126126

127127
```html
128128
<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
129-
<div class="mdc-text-field__ripple"></div>
129+
<span class="mdc-text-field__ripple"></span>
130130
<input class="mdc-text-field__input" type="text" aria-labelledby="label">
131131
<span id="label" class="mdc-floating-label">Input Label</span>
132-
<div class="mdc-line-ripple"></div>
132+
<span class="mdc-line-ripple"></span>
133133
</label>
134134
```
135135

‎docs/open_source/rotation.md

-111
This file was deleted.

‎packages/material-components-web/index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@use './material-components-web';
1+
@use "./material-components-web";

‎packages/mdc-auto-init/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ properly.
3333

3434
```html
3535
<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
36-
<div class="mdc-text-field__ripple"></div>
36+
<span class="mdc-text-field__ripple"></span>
3737
<input class="mdc-text-field__input" type="text" aria-labelledby="label">
3838
<span id="label" class="mdc-floating-label">Input Label</span>
39-
<div class="mdc-line-ripple"></div>
39+
<span class="mdc-line-ripple"></span>
4040
</label>
4141

4242
<!-- at the bottom of the page -->
@@ -54,10 +54,10 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
5454

5555
```html
5656
<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
57-
<div class="mdc-text-field__ripple"></div>
57+
<span class="mdc-text-field__ripple"></span>
5858
<input class="mdc-text-field__input" type="text" aria-labelledby="label">
5959
<span id="label" class="mdc-floating-label">Input Label</span>
60-
<div class="mdc-line-ripple"></div>
60+
<span class="mdc-line-ripple"></span>
6161
</label>
6262
```
6363

‎packages/mdc-base/_mixins.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use "sass:list";
21
//
32
// Copyright 2018 Google Inc.
43
//
@@ -21,6 +20,8 @@
2120
// THE SOFTWARE.
2221
//
2322

23+
@use "sass:list";
24+
2425
// This variable is not intended to be overridden externally; it uses !default to avoid being reset
2526
// every time this file is imported.
2627
$styles-emitted_: () !default;

‎packages/mdc-chips/mdc-chips.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
//
32
// Copyright 2017 Google Inc.
43
//

‎packages/mdc-layout-grid/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
$breakpoints: (
2222
desktop: 840px,
23-
tablet: 480px,
23+
tablet: 600px,
2424
phone: 0px
2525
) !default;
2626

‎packages/mdc-line-ripple/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ npm install @material/line-ripple
3232
### HTML Structure
3333

3434
```html
35-
<div class="mdc-line-ripple"></div>
35+
<span class="mdc-line-ripple"></span>
3636
```
3737

3838
### Styles

‎packages/mdc-line-ripple/test/component.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {createMockFoundation} from '../../../testing/helpers/foundation';
2828
const getFixture = () => {
2929
const wrapper = document.createElement('div');
3030
wrapper.innerHTML = `
31-
<div class="mdc-line-ripple"></div>
31+
<span class="mdc-line-ripple"></span>
3232
`;
3333
const el = wrapper.firstElementChild as HTMLElement;
3434
wrapper.removeChild(el);

‎packages/mdc-notched-outline/README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ npm install @material/notched-outline
3333
### HTML Structure
3434

3535
```html
36-
<div class="mdc-notched-outline">
37-
<div class="mdc-notched-outline__leading"></div>
38-
<div class="mdc-notched-outline__notch">
36+
<span class="mdc-notched-outline">
37+
<span class="mdc-notched-outline__leading"></span>
38+
<span class="mdc-notched-outline__notch">
3939
<span class="mdc-floating-label">Label</span>
40-
</div>
41-
<div class="mdc-notched-outline__trailing"></div>
42-
</div>
40+
</span>
41+
<span class="mdc-notched-outline__trailing"></span>
42+
</span>
4343
```
4444

4545
> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when

‎packages/mdc-notched-outline/test/component.test.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ import {MDCNotchedOutline} from '../../mdc-notched-outline/index';
2727
const getFixture = () => {
2828
const wrapper = document.createElement('div');
2929
wrapper.innerHTML = `
30-
<div class="mdc-notched-outline">
31-
<div class="mdc-notched-outline__leading"></div>
32-
<div class="mdc-notched-outline__notch"></div>
33-
<div class="mdc-notched-outline__trailing"></div>
34-
</div>
30+
<span class="mdc-notched-outline">
31+
<span class="mdc-notched-outline__leading"></span>
32+
<span class="mdc-notched-outline__notch"></span>
33+
<span class="mdc-notched-outline__trailing"></span>
34+
</span>
3535
`;
3636
const el = wrapper.firstElementChild as HTMLElement;
3737
wrapper.removeChild(el);

‎packages/mdc-select/README.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ The select requires that you set the `width` of the `mdc-select__anchor` element
5252
<i class="mdc-select__dropdown-icon"></i>
5353
<div class="mdc-select__selected-text"></div>
5454
<span class="mdc-floating-label">Pick a Food Group</span>
55-
<div class="mdc-line-ripple"></div>
55+
<span class="mdc-line-ripple"></span>
5656
</div>
5757

5858
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
@@ -113,7 +113,7 @@ The following is an example of the select component with all of the necessary ar
113113
<i class="mdc-select__dropdown-icon"></i>
114114
<div id="demo-selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label demo-selected-text">Vegetables</div>
115115
<span id="demo-label" class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>
116-
<div class="mdc-line-ripple"></div>
116+
<span class="mdc-line-ripple"></span>
117117
</div>
118118

119119
<div class="mdc-select__menu mdc-menu mdc-menu-surface" role="listbox">
@@ -146,13 +146,13 @@ same.
146146
<div class="mdc-select__anchor">
147147
<i class="mdc-select__dropdown-icon"></i>
148148
<div id="demo-selected-text" class="mdc-select__selected-text" aria-labelledby="outlined-select-label"></div>
149-
<div class="mdc-notched-outline">
150-
<div class="mdc-notched-outline__leading"></div>
151-
<div class="mdc-notched-outline__notch">
149+
<span class="mdc-notched-outline">
150+
<span class="mdc-notched-outline__leading"></span>
151+
<span class="mdc-notched-outline__notch">
152152
<span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
153-
</div>
154-
<div class="mdc-notched-outline__trailing"></div>
155-
</div>
153+
</span>
154+
<span class="mdc-notched-outline__trailing"></span>
155+
</span>
156156
</div>
157157

158158
<!-- Other elements from the select remain. -->
@@ -174,7 +174,7 @@ to set the selected item. The select also needs the text from the selected eleme
174174
<i class="mdc-select__dropdown-icon"></i>
175175
<div class="mdc-select__selected-text">Vegetables</div>
176176
<span class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</span>
177-
<div class="mdc-line-ripple"></div>
177+
<span class="mdc-line-ripple"></span>
178178
</div>
179179

180180
<div class="mdc-select__menu demo-width-class mdc-menu mdc-menu-surface">
@@ -215,7 +215,7 @@ and set the `aria-required` attribute on the `mdc-select__selected-text` element
215215
<i class="mdc-select__dropdown-icon"></i>
216216
<div class="mdc-select__selected-text" aria-required="true"></div>
217217
<span class="mdc-floating-label">Pick a Food Group</span>
218-
<div class="mdc-line-ripple"></div>
218+
<span class="mdc-line-ripple"></span>
219219
</div>
220220

221221
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -237,7 +237,7 @@ Add the `mdc-select--disabled` class to the `mdc-select` element and and set the
237237
<i class="mdc-select__dropdown-icon"></i>
238238
<div class="mdc-select__selected-text" aria-disabled="true"></div>
239239
<span class="mdc-floating-label">Pick a Food Group</span>
240-
<div class="mdc-line-ripple"></div>
240+
<span class="mdc-line-ripple"></span>
241241
</div>
242242

243243
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -301,7 +301,7 @@ structure.
301301
<div class="mdc-select__anchor demo-width-class">
302302
<i class="mdc-select__dropdown-icon"></i>
303303
<div class="mdc-select__selected-text"></div>
304-
<div class="mdc-line-ripple"></div>
304+
<span class="mdc-line-ripple"></span>
305305
</div>
306306

307307
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
@@ -328,10 +328,10 @@ structure.
328328
<div class="mdc-select__anchor demo-width-class">
329329
<i class="mdc-select__dropdown-icon"></i>
330330
<div class="mdc-select__selected-text"></div>
331-
<div class="mdc-notched-outline">
332-
<div class="mdc-notched-outline__leading"></div>
333-
<div class="mdc-notched-outline__trailing"></div>
334-
</div>
331+
<span class="mdc-notched-outline">
332+
<span class="mdc-notched-outline__leading"></span>
333+
<span class="mdc-notched-outline__trailing"></span>
334+
</span>
335335
</div>
336336

337337
<!-- Other elements from the select remain. -->

‎packages/mdc-select/test/component.test.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ function getFixture() {
9090
<div class="mdc-select__selected-text"></div>
9191
<i class="mdc-select__dropdown-icon"></i>
9292
<span class="mdc-floating-label">Pick a Food Group</span>
93-
<div class="mdc-line-ripple"></div>
93+
<span class="mdc-line-ripple"></span>
9494
</div>
9595
9696
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -116,13 +116,13 @@ function getOutlineFixture() {
116116
<i class="mdc-select__icon material-icons">code</i>
117117
<div class="mdc-select__selected-text"></div>
118118
<i class="mdc-select__dropdown-icon"></i>
119-
<div class="mdc-notched-outline">
120-
<div class="mdc-notched-outline__leading"></div>
121-
<div class="mdc-notched-outline__notch">
119+
<span class="mdc-notched-outline">
120+
<span class="mdc-notched-outline__leading"></span>
121+
<span class="mdc-notched-outline__notch">
122122
<span class="mdc-floating-label">Pick a Food Group</span>
123-
</div>
124-
<div class="mdc-notched-outline__trailing"></div>
125-
</div>
123+
</span>
124+
<span class="mdc-notched-outline__trailing"></span>
125+
</span>
126126
</div>
127127
128128
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -415,7 +415,7 @@ describe('MDCSelect', () => {
415415
<div class="mdc-select__anchor">
416416
<div class="mdc-select__selected-text"></div>
417417
<label class="mdc-floating-label">Pick a Food Group</label>
418-
<div class="mdc-line-ripple"></div>
418+
<span class="mdc-line-ripple"></span>
419419
</div>
420420
421421
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -442,7 +442,7 @@ describe('MDCSelect', () => {
442442
<div class="mdc-select__anchor">
443443
<div class="mdc-select__selected-text"></div>
444444
<label class="mdc-floating-label">Pick a Food Group</label>
445-
<div class="mdc-line-ripple"></div>
445+
<span class="mdc-line-ripple"></span>
446446
</div>
447447
448448
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
@@ -575,7 +575,7 @@ describe('MDCSelect', () => {
575575
<div class="mdc-select">
576576
<div class="mdc-select__anchor">
577577
<div class="mdc-select__selected-text"></div>
578-
<div class="mdc-line-ripple"></div>
578+
<span class="mdc-line-ripple"></span>
579579
</div>
580580
581581
<div class="mdc-select__menu mdc-menu mdc-menu-surface">

0 commit comments

Comments
 (0)