diff --git a/MIGRATING.md b/MIGRATING.md index f56153e63..60db7f05a 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -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 @@ -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. diff --git a/packages/ripple/Ripple.ts b/packages/ripple/Ripple.ts index e79f593d3..cb228b8ec 100644 --- a/packages/ripple/Ripple.ts +++ b/packages/ripple/Ripple.ts @@ -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; @@ -30,6 +31,7 @@ export default function Ripple( disabled = false, color, active, + rippleElement, eventTarget, activeTarget, addClass = (className) => node.classList.add(className), @@ -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( @@ -177,6 +180,7 @@ export default function Ripple( disabled, color, active, + rippleElement, eventTarget, activeTarget, addClass, @@ -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), diff --git a/packages/site/src/routes/demo/switch/_PrimaryColor.svelte b/packages/site/src/routes/demo/switch/_SecondaryColor.svelte similarity index 80% rename from packages/site/src/routes/demo/switch/_PrimaryColor.svelte rename to packages/site/src/routes/demo/switch/_SecondaryColor.svelte index 379b5e7b8..a1ff3faba 100644 --- a/packages/site/src/routes/demo/switch/_PrimaryColor.svelte +++ b/packages/site/src/routes/demo/switch/_SecondaryColor.svelte @@ -1,6 +1,6 @@