Skip to content

Commit 8a94e95

Browse files
hperrinhperrin
committed
fix: prevent new Svelte versions from mangling MDC classes
This is required because new Svelte versions (since 3.13) check for and remove any classes that aren't "supposed" to be there when you use a class: directive. This removes classes that MDC web components add. Fixes #52.
1 parent 36bf931 commit 8a94e95

38 files changed

+357
-215
lines changed

‎packages/button/Button.svelte

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
<a
33
use:useActions={use}
44
use:forwardEvents
5-
class="mdc-button {className}"
6-
class:mdc-button--raised={variant === 'raised'}
7-
class:mdc-button--unelevated={variant === 'unelevated'}
8-
class:mdc-button--outlined={variant === 'outlined'}
9-
class:mdc-button--dense={dense}
10-
class:smui-button--color-secondary={color === 'secondary'}
11-
class:mdc-card__action={context === 'card:action'}
12-
class:mdc-card__action--button={context === 'card:action'}
13-
class:mdc-dialog__button={context === 'dialog:action'}
14-
class:mdc-top-app-bar__navigation-icon={context === 'top-app-bar:navigation'}
15-
class:mdc-top-app-bar__action-item={context === 'top-app-bar:action'}
16-
class:mdc-snackbar__action={context === 'snackbar'}
5+
class="
6+
mdc-button
7+
{className}
8+
{variant === 'raised' ? 'mdc-button--raised' : ''}
9+
{variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
10+
{variant === 'outlined' ? 'mdc-button--outlined' : ''}
11+
{dense ? 'mdc-button--dense' : ''}
12+
{color === 'secondary' ? 'smui-button--color-secondary' : ''}
13+
{context === 'card:action' ? 'mdc-card__action' : ''}
14+
{context === 'card:action' ? 'mdc-card__action--button' : ''}
15+
{context === 'dialog:action' ? 'mdc-dialog__button' : ''}
16+
{context === 'top-app-bar:navigation' ? 'mdc-top-app-bar__navigation-icon' : ''}
17+
{context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
18+
{context === 'snackbar' ? 'mdc-snackbar__action' : ''}
19+
"
1720
use:Ripple={[ripple, {unbounded: false}]}
1821
{href}
1922
{...actionProp}
@@ -24,18 +27,21 @@
2427
<button
2528
use:useActions={use}
2629
use:forwardEvents
27-
class="mdc-button {className}"
28-
class:mdc-button--raised={variant === 'raised'}
29-
class:mdc-button--unelevated={variant === 'unelevated'}
30-
class:mdc-button--outlined={variant === 'outlined'}
31-
class:mdc-button--dense={dense}
32-
class:smui-button--color-secondary={color === 'secondary'}
33-
class:mdc-card__action={context === 'card:action'}
34-
class:mdc-card__action--button={context === 'card:action'}
35-
class:mdc-dialog__button={context === 'dialog:action'}
36-
class:mdc-top-app-bar__navigation-icon={context === 'top-app-bar:navigation'}
37-
class:mdc-top-app-bar__action-item={context === 'top-app-bar:action'}
38-
class:mdc-snackbar__action={context === 'snackbar'}
30+
class="
31+
mdc-button
32+
{className}
33+
{variant === 'raised' ? 'mdc-button--raised' : ''}
34+
{variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
35+
{variant === 'outlined' ? 'mdc-button--outlined' : ''}
36+
{dense ? 'mdc-button--dense' : ''}
37+
{color === 'secondary' ? 'smui-button--color-secondary' : ''}
38+
{context === 'card:action' ? 'mdc-card__action' : ''}
39+
{context === 'card:action' ? 'mdc-card__action--button' : ''}
40+
{context === 'dialog:action' ? 'mdc-dialog__button' : ''}
41+
{context === 'top-app-bar:navigation' ? 'mdc-top-app-bar__navigation-icon' : ''}
42+
{context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
43+
{context === 'snackbar' ? 'mdc-snackbar__action' : ''}
44+
"
3945
use:Ripple={[ripple, {unbounded: false}]}
4046
{...actionProp}
4147
{...defaultProp}

‎packages/button/Group.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<div
22
use:useActions={use}
33
use:forwardEvents
4-
class="smui-button__group {className}"
5-
class:smui-button__group--raised={variant === 'raised'}
4+
class="
5+
smui-button__group
6+
{className}
7+
{variant === 'raised' ? 'smui-button__group--raised' : ''}
8+
"
69
{...exclude($$props, ['use', 'class', 'variant'])}
710
><slot></slot></div>
811

‎packages/card/Actions.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<div
22
use:useActions={use}
33
use:forwardEvents
4-
class="mdc-card__actions {className}"
5-
class:mdc-card__actions--full-bleed={fullBleed}
4+
class="
5+
mdc-card__actions
6+
{className}
7+
{fullBleed ? 'mdc-card__actions--full-bleed' : ''}
8+
"
69
{...exclude($$props, ['use', 'class', 'fullBleed'])}
710
><slot></slot></div>
811

‎packages/card/Card.svelte

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<div
22
use:useActions={use}
33
use:forwardEvents
4-
class="mdc-card {className}"
5-
class:mdc-card--outlined={variant === 'outlined'}
6-
class:smui-card--padded={padded}
4+
class="
5+
mdc-card
6+
{className}
7+
{variant === 'outlined' ? 'mdc-card--outlined' : ''}
8+
{padded ? 'smui-card--padded' : ''}
9+
"
710
{...exclude($$props, ['use', 'class', 'variant', 'padded'])}
811
><slot></slot></div>
912

‎packages/card/Media.svelte

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<div
22
use:useActions={use}
33
use:forwardEvents
4-
class="mdc-card__media {className}"
5-
class:mdc-card__media--square={aspectRatio === 'square'}
6-
class:mdc-card__media--16-9={aspectRatio === '16x9'}
4+
class="
5+
mdc-card__media
6+
{className}
7+
{aspectRatio === 'square' ? 'mdc-card__media--square' : ''}
8+
{aspectRatio === '16x9' ? 'mdc-card__media--16-9' : ''}
9+
"
710
{...exclude($$props, ['use', 'class', 'aspectRatio'])}
811
><slot></slot></div>
912

‎packages/card/PrimaryAction.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<div
22
use:useActions={use}
33
use:forwardEvents
4-
class="mdc-card__primary-action {className}"
5-
class:smui-card__primary-action--padded={padded}
4+
class="
5+
mdc-card__primary-action
6+
{className}
7+
{padded ? 'smui-card__primary-action--padded' : ''}
8+
"
69
use:Ripple={[ripple, {unbounded: false, color}]}
710
{tabindex}
811
{...exclude($$props, ['use', 'class', 'ripple', 'color', 'padded', 'tabindex'])}

‎packages/checkbox/Checkbox.svelte

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
bind:this={element}
33
use:useActions={use}
44
use:forwardEvents
5-
class="mdc-checkbox {className}"
6-
class:mdc-checkbox--disabled={disabled}
7-
class:mdc-data-table__header-row-checkbox={context === 'data-table' && dataTableHeader}
8-
class:mdc-data-table__row-checkbox={context === 'data-table' && !dataTableHeader}
5+
class="
6+
mdc-checkbox
7+
{className}
8+
{disabled ? 'mdc-checkbox--disabled' : ''}
9+
{(context === 'data-table' && dataTableHeader) ? 'mdc-data-table__header-row-checkbox' : ''}
10+
{(context === 'data-table' && !dataTableHeader) ? 'mdc-data-table__row-checkbox' : ''}
11+
"
912
{...exclude($$props, ['use', 'class', 'disabled', 'indeterminate', 'group', 'checked', 'value', 'valueKey', 'input$'])}
1013
>
1114
<input

‎packages/chips/Chip.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
bind:this={element}
33
use:useActions={use}
44
use:forwardEvents
5-
class="mdc-chip {className}"
6-
class:mdc-chip--selected={selected}
5+
class="
6+
mdc-chip
7+
{className}
8+
{selected ? 'mdc-chip--selected' : ''}
9+
"
710
on:MDCChip:selection={handleSelection}
811
{...exclude($$props, ['use', 'class', 'ripple', 'selected', 'shouldRemoveOnTrailingIconClick'])}
912
><slot></slot></div>

‎packages/chips/Set.svelte

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
bind:this={element}
33
use:useActions={use}
44
use:forwardEvents
5-
class="mdc-chip-set {className}"
6-
class:mdc-chip-set--choice={choice}
7-
class:mdc-chip-set--filter={filter}
8-
class:mdc-chip-set--input={input}
5+
class="
6+
mdc-chip-set
7+
{className}
8+
{choice ? 'mdc-chip-set--choice' : ''}
9+
{filter ? 'mdc-chip-set--filter' : ''}
10+
{input ? 'mdc-chip-set--input' : ''}
11+
"
912
on:MDCChip:removal={handleRemoval}
1013
on:MDCChip:selection={handleSelection}
1114
{...exclude($$props, ['use', 'class', 'chips', 'key', 'selected', 'choice', 'filter', 'input'])}

‎packages/common/Icon.svelte

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<i
22
use:useActions={use}
33
use:forwardEvents
4-
class={className}
5-
class:mdc-button__icon={context === 'button'}
6-
class:mdc-fab__icon={context === 'fab'}
7-
class:mdc-icon-button__icon={context === 'icon-button'}
8-
class:mdc-icon-button__icon--on={context === 'icon-button' && on}
9-
class:mdc-chip__icon={context === 'chip'}
10-
class:mdc-chip__icon--leading={context === 'chip' && leading}
11-
class:mdc-chip__icon--leading-hidden={context === 'chip' && leadingHidden}
12-
class:mdc-chip__icon--trailing={context === 'chip' && trailing}
13-
class:mdc-tab__icon={context === 'tab'}
4+
class="
5+
{className}
6+
{context === 'button' ? 'mdc-button__icon' : ''}
7+
{context === 'fab' ? 'mdc-fab__icon' : ''}
8+
{context === 'icon-button' ? 'mdc-icon-button__icon' : ''}
9+
{(context === 'icon-button' && on) ? 'mdc-icon-button__icon--on' : ''}
10+
{context === 'chip' ? 'mdc-chip__icon' : ''}
11+
{(context === 'chip' && leading) ? 'mdc-chip__icon--leading' : ''}
12+
{(context === 'chip' && leadingHidden) ? 'mdc-chip__icon--leading-hidden' : ''}
13+
{(context === 'chip' && trailing) ? 'mdc-chip__icon--trailing' : ''}
14+
{context === 'tab' ? 'mdc-tab__icon' : ''}
15+
"
1416
aria-hidden="true"
1517
{...exclude($$props, ['use', 'class', 'on', 'leading', 'leadingHidden', 'trailing'])}
1618
><slot></slot></i>

0 commit comments

Comments
 (0)