Skip to content

Commit

Permalink
feat: migrate switch to new mdc-web version
Browse files Browse the repository at this point in the history
  • Loading branch information
hperrin committed Nov 15, 2021
1 parent 58b98e0 commit 943795f
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 145 deletions.
10 changes: 9 additions & 1 deletion MIGRATING.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ This doc contains information that will help you migrate your code from an older
SMUI 6 migrated to upstream MDC 13.0 from 11.0:
https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md#1300-2021-09-24

## Changes

### Components

- Switch
- No longer needs `valueKey` prop.
- Default color is now "primary".

# SMUI 4 -> SMUI 5

## Breaking Changes
Expand Down Expand Up @@ -45,7 +53,7 @@ You should update your MDC dependencies to 11.0 as well.

## New Features

### Compoennts
### Components

- Banner
- Add focus trap on the banner.
Expand Down
7 changes: 6 additions & 1 deletion packages/ripple/Ripple.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type RippleProps = {
color?: 'primary' | 'secondary';
/** Whether the ripple is active. Leave null to determine automatically. */
active?: boolean;
rippleElement?: HTMLElement;
eventTarget?: HTMLElement;
activeTarget?: HTMLElement;
addClass?: (className: string) => void;
Expand All @@ -30,6 +31,7 @@ export default function Ripple(
disabled = false,
color,
active,
rippleElement,
eventTarget,
activeTarget,
addClass = (className) => node.classList.add(className),
Expand Down Expand Up @@ -77,7 +79,8 @@ export default function Ripple(
instance = new MDCRippleFoundation({
addClass,
browserSupportsCssVars: () => util.supportsCssVariables(window),
computeBoundingRect: () => node.getBoundingClientRect(),
computeBoundingRect: () =>
(rippleElement || node).getBoundingClientRect(),
containsEventTarget: (target) => node.contains(target as Node),
deregisterDocumentInteractionHandler: (evtType, handler) =>
document.documentElement.removeEventListener(
Expand Down Expand Up @@ -177,6 +180,7 @@ export default function Ripple(
disabled,
color,
active,
rippleElement,
eventTarget,
activeTarget,
addClass,
Expand All @@ -190,6 +194,7 @@ export default function Ripple(
disabled: false,
color: undefined,
active: undefined,
rippleElement: undefined,
eventTarget: undefined,
activeTarget: undefined,
addClass: (className) => node.classList.add(className),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<FormField>
<Switch color="primary" bind:checked={checked1} />
<Switch color="secondary" bind:checked={checked1} />
<span slot="label">Fields of grain.</span>
</FormField>
</div>
Expand All @@ -9,7 +9,7 @@

<div style="margin-top: 1em;">
<FormField align="end">
<Switch color="primary" bind:checked={checked2} />
<Switch color="secondary" bind:checked={checked2} />
<span slot="label">Fields of grain.</span>
</FormField>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/site/src/routes/demo/switch/index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@

<Demo component={Simple} file="switch/_Simple.svelte" />

<Demo component={PrimaryColor} file="switch/_PrimaryColor.svelte">
Primary color
<Demo component={SecondaryColor} file="switch/_SecondaryColor.svelte">
Secondary color
</Demo>

<Demo component={Group} file="switch/_Group.svelte">Group switch</Demo>
Expand All @@ -20,6 +20,6 @@
import Demo from '$lib/Demo.svelte';
import Simple from './_Simple.svelte';
import PrimaryColor from './_PrimaryColor.svelte';
import SecondaryColor from './_SecondaryColor.svelte';
import Group from './_Group.svelte';
</script>

0 comments on commit 943795f

Please sign in to comment.