Skip to content

Commit 6e44b76

Browse files
hobbitronicshobbitronics
committed
build(deps): update material-components-web and sass
BREAKING CHANGE: Consumer must install [email protected] and material-components-web@13. See https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md
1 parent 12d120d commit 6e44b76

File tree

14 files changed

+1281
-1639
lines changed

14 files changed

+1281
-1639
lines changed

‎components/mdc/Drawer/Drawer.svelte

+10-10
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,11 @@ main {
9494
}
9595
9696
/* TODO: keep an eye on this bug https://github.com/material-components/material-components-web/issues/5242, overriding for now so menu items will take on the themed color */
97-
.mdc-drawer .mdc-list-item--activated,
98-
.mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
97+
.mdc-drawer .mdc-deprecated-list-item--activated,
98+
.mdc-drawer .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic {
9999
color: var(--mdc-theme-primary-variant, var(--mdc-theme-primary));
100100
}
101-
.mdc-list-item {
101+
.mdc-deprecated-list-item {
102102
margin: 4px 8px;
103103
}
104104
.main-content-height {
@@ -124,7 +124,7 @@ main {
124124
<slot name="drawer-content-top" />
125125
<!-- override built-in padding so height 100 works correctly without creating a vertical scroller -->
126126
<!-- changing the list to flex causes the margins to not collapse -->
127-
<nav class="mdc-list flex column p-0" class:h-100={isFullHeightMenu} on:click={onListClick} bind:this={listElement}>
127+
<nav class="mdc-deprecated-listflex column p-0" class:h-100={isFullHeightMenu} on:click={onListClick} bind:this={listElement}>
128128
{#each menuItems as { icon, label, url, urlPattern, hide, button, tooltip }, i}
129129
{#if label === '--break--'}
130130
<span class="grow-1" />
@@ -136,23 +136,23 @@ main {
136136
<IconButton class="mdc-theme--primary pl-1" {icon} ariaLabel={label} {url} />
137137
{:else if url}
138138
<a
139-
class="mdc-list-item"
140-
class:mdc-list-item--activated={isMenuItemActive(currentUrl, url, urlPattern)}
139+
class="mdc-deprecated-list-item"
140+
class:mdc-deprecated-list-item--activated={isMenuItemActive(currentUrl, url, urlPattern)}
141141
href={url}
142142
aria-current={isMenuItemActive(currentUrl, url, urlPattern) ? 'page' : null}
143143
tabindex={i === 0 ? 0 : undefined}
144144
>
145-
<span class="mdc-list-item__ripple" />
145+
<span class="mdc-deprecated-list-item__ripple" />
146146
{#if icon}
147-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
147+
<i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">{icon}</i>
148148
{/if}
149149

150150
{#if label && isNotMini}
151-
<span class="mdc-list-item__text">{label}</span>
151+
<span class="mdc-deprecated-list-item__text">{label}</span>
152152
{/if}
153153
</a>
154154
{:else}
155-
<hr class="mdc-list-divider mdc-list-divider--inset-leading mdc-list-divider--inset-trailing" />
155+
<hr class="mdc-deprecated-list-divider mdc-deprecated-list-divider--inset-leading mdc-deprecated-list-divider--inset-trailing" />
156156
{/if}
157157
</Tooltip.Wrapper>
158158
{#if tooltip}

‎components/mdc/Drawer/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@include drawer.core-styles;
55
@include drawer.dismissible-core-styles;
66
@include drawer.modal-core-styles;
7-
@include list.core-styles;
7+
@include list.deprecated-core-styles;
88

99
.border-white {
1010
@include drawer.border-color(#fff);

‎components/mdc/IconButton/IconButton.svelte

+10-4
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,11 @@ onMount(() => {
2929
on:mousedown
3030
on:blur
3131
on:focus
32-
bind:this={element}>{icon}</a
33-
>
32+
bind:this={element}>
33+
<div class="mdc-icon-button__ripple"></div>
34+
<span class="mdc-icon-button__focus-ring"></span>
35+
{icon}
36+
</a>
3437
{:else}
3538
<button
3639
class="mdc-icon-button material-icons {$$props.class}"
@@ -40,6 +43,9 @@ onMount(() => {
4043
on:mousedown
4144
on:blur
4245
on:focus
43-
bind:this={element}>{icon}</button
44-
>
46+
bind:this={element}>
47+
<div class="mdc-icon-button__ripple"></div>
48+
<span class="mdc-icon-button__focus-ring"></span>
49+
{icon}
50+
</button>
4551
{/if}

‎components/mdc/IconButton/_index.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
@use '@material/icon-button';
2-
3-
@include icon-button.core-styles;
1+
@use '@material/icon-button/styles';

‎components/mdc/List/Divider.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<li role="separator" class="mdc-list-divider" />
1+
<li role="separator" class="mdc-deprecated-list-divider" />

‎components/mdc/List/Item.svelte

+11-11
Original file line numberDiff line numberDiff line change
@@ -36,39 +36,39 @@ img {
3636

3737
<li
3838
bind:this={element}
39-
class="mdc-list-item"
40-
class:mdc-list-item--activated={activated}
41-
class:mdc-list-item--disabled={nonInteractive}
39+
class="mdc-deprecated-list-item"
40+
class:mdc-deprecated-list-item--activated={activated}
41+
class:mdc-deprecated-list-item--disabled={nonInteractive}
4242
data-mdc-dialog-action={$$props['data-mdc-dialog-action']}
4343
on:click
4444
{tabindex}
4545
>
4646
{#if graphicURL}
47-
<div class="mdc-list-item__graphic">
47+
<div class="mdc-deprecated-list-item__graphic">
4848
<img class="br-50" alt={graphicAlt} src={graphicURL} />
4949
</div>
5050
{:else if icon}
51-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
51+
<i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">{icon}</i>
5252
{/if}
5353

54-
<span class="mdc-list-item__ripple" />
54+
<span class="mdc-deprecated-list-item__ripple" />
5555

56-
<span class="mdc-list-item__text" class:nonInteractive>
56+
<span class="mdc-deprecated-list-item__text" class:nonInteractive>
5757
{#if primary || secondary}
58-
<span class="mdc-list-item__primary-text">{primary}</span>
59-
<span class="mdc-list-item__secondary-text">{secondary}</span>
58+
<span class="mdc-deprecated-list-item__primary-text">{primary}</span>
59+
<span class="mdc-deprecated-list-item__secondary-text">{secondary}</span>
6060
{:else}
6161
{text}
6262
<slot />
6363
{/if}
6464
</span>
6565

66-
<div class="mdc-list-item__meta">
66+
<div class="mdc-deprecated-list-item__meta">
6767
{meta}
6868
<slot name="meta" />
6969
</div>
7070
</li>
7171

7272
{#if withDivider}
73-
<li role="separator" class="mdc-list-divider" />
73+
<li role="separator" class="mdc-deprecated-list-divider" />
7474
{/if}

‎components/mdc/List/List.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ ul {
2020
</style>
2121

2222
<ul
23-
class="mdc-list {$$props.class}"
24-
class:mdc-list--two-line={twoLine}
25-
class:mdc-list--avatar-list={avatar}
23+
class="mdc-deprecated-list {$$props.class}"
24+
class:mdc-deprecated-list--two-line={twoLine}
25+
class:mdc-deprecated-list--avatar-list={avatar}
2626
bind:this={element}
2727
>
2828
<slot />

‎components/mdc/List/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
@use '@material/list';
22

3-
@include list.core-styles;
3+
@include list.deprecated-core-styles;

‎components/mdc/Menu/Menu.svelte

+13-13
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const closeMenuHandler = () => {
3636
</script>
3737

3838
<style>
39-
.mdc-list-item__subtitle {
39+
.mdc-deprecated-list-item__subtitle {
4040
color: var(--mdc-list-item__subtitle, var(#5f6368));
4141
}
4242
i {
@@ -48,50 +48,50 @@ i {
4848
<svelte:body on:click={closeMenuHandler} />
4949
<div id="toolbar" class="toolbar mdc-menu-surface--anchor">
5050
<div class="mdc-menu mdc-menu-surface {$$props.class}" bind:this={element}>
51-
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
51+
<ul class="mdc-deprecated-list-" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
5252
{#each menuItems as { icon, label, url, subtitle, action }, i}
5353
<!-- svelte-ignore a11y-invalid-attribute -->
5454
{#if subtitle}
55-
<li class="mdc-list-item" role="separator">
56-
<span class="mdc-list-item__subtitle">{subtitle}</span>
55+
<li class="mdc-deprecated-list-item" role="separator">
56+
<span class="mdc-deprecated-list-item__subtitle">{subtitle}</span>
5757
</li>
5858
{:else if url}
5959
<a
6060
href={url}
6161
role="menuitem"
62-
class="mdc-list-item"
63-
class:mdc-list-item--activated={isMenuItemActive(currentUrl, url)}
62+
class="mdc-deprecated-list-item"
63+
class:mdc-deprecated-list-item--activated={isMenuItemActive(currentUrl, url)}
6464
aria-current={isMenuItemActive(currentUrl, url) ? 'page' : null}
6565
tabindex={i === 0 ? 0 : undefined}
6666
on:blur={closeMenuHandler}
6767
>
68-
<span class="mdc-list-item__ripple" />
68+
<span class="mdc-deprecated-list-item__ripple" />
6969
{#if icon}
70-
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
70+
<span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon">
7171
<i class="material-icons" aria-hidden="true">{icon}</i>
7272
</span>
7373
{/if}
7474
{#if label}
75-
<span class="mdc-list-item__text">{label}</span>
75+
<span class="mdc-deprecated-list-item__text">{label}</span>
7676
{/if}
7777
</a>
7878
{:else}
7979
<li
8080
on:click|preventDefault={() => handleItemClick(action)}
8181
on:keydown|preventDefault={(e) => handleItemKeydown(e, action)}
8282
role="menuitem"
83-
class="mdc-list-item"
83+
class="mdc-deprecated-list-item"
8484
tabindex={i === 0 ? 0 : undefined}
8585
on:blur={closeMenuHandler}
8686
>
87-
<span class="mdc-list-item__ripple" />
87+
<span class="mdc-deprecated-list-item__ripple" />
8888
{#if icon}
89-
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
89+
<span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon">
9090
<i class="material-icons" aria-hidden="true">{icon}</i>
9191
</span>
9292
{/if}
9393
{#if label}
94-
<span class="mdc-list-item__text">{label}</span>
94+
<span class="mdc-deprecated-list-item__text">{label}</span>
9595
{/if}
9696
</li>
9797
{/if}

‎components/mdc/Select/Select.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ afterUpdate(() => {
7575
</div>
7676

7777
<div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}" role="listbox">
78-
<ul class="mdc-list">
78+
<ul class="mdc-deprecated-list">
7979
{#each options as { id, name } (id)}
80-
<li class="mdc-list-item" data-value={id} role="option">
81-
<span class="mdc-list-item__text">{name}</span>
80+
<li class="mdc-deprecated-list-item" data-value={id} role="option">
81+
<span class="mdc-deprecated-list-item__text">{name}</span>
8282
</li>
8383
{/each}
8484
</ul>

‎components/mdc/Snackbar/Snackbar.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,16 @@ function open(msg) {
4545
}
4646
</script>
4747

48-
<div class="mdc-snackbar" bind:this={element}>
49-
<div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}">
50-
<div class="mdc-snackbar__label" role="status" aria-live="polite" />
48+
<aside class="mdc-snackbar" bind:this={element}>
49+
<div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}" role="status" aria-relevant="additions">
50+
<div class="mdc-snackbar__label" aria-atomic="false">
5151
{#if action}
52-
<div class="mdc-snackbar__actions">
52+
<div class="mdc-snackbar__actions" aria-atomic="true">
5353
<button type="button" class="mdc-button mdc-snackbar__action" on:click={clickHandler}>
5454
<div class="mdc-button__ripple" />
5555
<span class="mdc-button__label">{action}</span>
5656
</button>
5757
</div>
5858
{/if}
5959
</div>
60-
</div>
60+
</aside>

‎components/mdc/Tooltip/Tooltip.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ onMount(() => {
3333
</script>
3434

3535
<div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
36-
<div class="mdc-tooltip__surface {$$props.class}">
36+
<div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class}">
3737
<slot />
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)