From 91270f1f5476eb5766ea878cab32f0c0d2cb1b0f Mon Sep 17 00:00:00 2001 From: rtannenbaum Date: Tue, 5 Apr 2022 14:05:38 +0300 Subject: [PATCH 1/6] fix(elevation): style for card migration --- components/elevation/readme.md | 6 ------ components/elevation/src/vwc-elevation.scss | 14 ++++++++++---- components/elevation/stories/elevation.stories.js | 1 + ui-tests/tests/vwc-elevation/index.js | 5 +---- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/components/elevation/readme.md b/components/elevation/readme.md index 3601cefb01..ce905c9686 100644 --- a/components/elevation/readme.md +++ b/components/elevation/readme.md @@ -24,12 +24,6 @@ Note that this component is responsible for the perceived elevation alone and no |--- |--- |--- |-------------------------------------------------------------------------------------------| |dp|property/attribute|string| Level in Density-Independent Pixels (DP). Possible values: `0`,`2`,`4`,`8`,`12`,`16`,`24` | -### CSS Variables - -|name|description|default| -|--- |--- |--- | -|`--vvd-elevation-background-color`|Color for the elevation surface background | defaults to theme’s surface background | -|`--vvd-elevation-border-radius`|Border radius of the elevation’s surface in pixels| 6px | # Example: diff --git a/components/elevation/src/vwc-elevation.scss b/components/elevation/src/vwc-elevation.scss index 5974f774b1..af8636111e 100644 --- a/components/elevation/src/vwc-elevation.scss +++ b/components/elevation/src/vwc-elevation.scss @@ -19,12 +19,18 @@ $elevation-border-radius: --elevation-border-radius; @each $dp in $dps { #{get-default-selector($dps, $dp)} { - background-color: var(--vvd-color-surface-#{$dp}dp); - filter: var(--vvd-shadow-surface-#{$dp}dp); + ::slotted(*) { + background-color: var(--vvd-color-surface-#{$dp}dp); + filter: var(--vvd-shadow-surface-#{$dp}dp); + } } } .vwc-elevation { - --elevation-border-radius: 6px; - border-radius: var(#{--elevation-border-radius}); + height: inherit; + slot { + height: inherit; + } } + + diff --git a/components/elevation/stories/elevation.stories.js b/components/elevation/stories/elevation.stories.js index ad2d49a50c..6ca75a7627 100644 --- a/components/elevation/stories/elevation.stories.js +++ b/components/elevation/stories/elevation.stories.js @@ -26,6 +26,7 @@ const styles = () => html` padding: 20px; text-align: center; width: 500px; + border-radius: 6px; } `; diff --git a/ui-tests/tests/vwc-elevation/index.js b/ui-tests/tests/vwc-elevation/index.js index 877bc25f0e..4efbec36b3 100644 --- a/ui-tests/tests/vwc-elevation/index.js +++ b/ui-tests/tests/vwc-elevation/index.js @@ -5,10 +5,6 @@ export async function createElementVariations(wrapper) { elementWrapper.innerHTML = ` From 00f5c1aaf93ddd05302df46b57ae1763ae11be5f Mon Sep 17 00:00:00 2001 From: rtannenbaum Date: Tue, 5 Apr 2022 17:36:49 +0300 Subject: [PATCH 2/6] add part --- components/elevation/src/vwc-elevation.scss | 8 -------- components/elevation/src/vwc-elevation.ts | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/components/elevation/src/vwc-elevation.scss b/components/elevation/src/vwc-elevation.scss index af8636111e..fd2376ff8b 100644 --- a/components/elevation/src/vwc-elevation.scss +++ b/components/elevation/src/vwc-elevation.scss @@ -26,11 +26,3 @@ $elevation-border-radius: --elevation-border-radius; } } -.vwc-elevation { - height: inherit; - slot { - height: inherit; - } -} - - diff --git a/components/elevation/src/vwc-elevation.ts b/components/elevation/src/vwc-elevation.ts index 937181d166..dabb3a0bc3 100644 --- a/components/elevation/src/vwc-elevation.ts +++ b/components/elevation/src/vwc-elevation.ts @@ -26,7 +26,7 @@ export class VWCElevation extends LitElement { }; return html` -
+
`; From a5c9a14c916caab5f1a64d3be5ed0906d2fd5005 Mon Sep 17 00:00:00 2001 From: rtannenbaum Date: Wed, 6 Apr 2022 12:06:29 +0300 Subject: [PATCH 3/6] fix alternate in popup --- components/popup/src/vwc-popup-base.ts | 7 ++++--- components/popup/src/vwc-popup.scss | 9 ++++++--- ui-tests/snapshots/vwc-elevation.png | Bin 60310 -> 82991 bytes ui-tests/tests/vwc-elevation/index.js | 16 ++++++++++------ 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/components/popup/src/vwc-popup-base.ts b/components/popup/src/vwc-popup-base.ts index 6a98ec93f7..927b3308cd 100644 --- a/components/popup/src/vwc-popup-base.ts +++ b/components/popup/src/vwc-popup-base.ts @@ -211,7 +211,8 @@ export class VWCPopupBase extends LitElement { } private renderArrow(): TemplateResult | unknown { - return this.arrow ? html`` : nothing; + const part = this.alternate ? 'vvd-scheme-alternate' : ''; + return this.arrow ? html`` : nothing; } protected getRenderClasses(): ClassInfo { @@ -228,8 +229,8 @@ export class VWCPopupBase extends LitElement { return html`