fix(elevation): style for card migration (#1276)

* fix(elevation): style for card migration * add part * fix alternate in popup * fix test md * change popup HTML wrappers * comment
Vonage · Apr 10, 2022 · d186cca · d186cca
1 parent ec49b38
commit d186cca
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 34 deletions.
diff --git a/__snapshots__/popup.md b/__snapshots__/popup.md
@@ -3,8 +3,8 @@
 #### `should internal contents`
 
 ```html
-<div class="popup-wrapper">
-  <vwc-elevation dp="2">
+<vwc-elevation dp="2">
+  <div class="popup-wrapper">
     <div
       aria-hidden="true"
       class="popup"
@@ -15,8 +15,8 @@
         </slot>
       </div>
     </div>
-  </vwc-elevation>
-</div>
+  </div>
+</vwc-elevation>
 
 ```
 
diff --git 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
@@ -19,12 +19,10 @@ $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});
-}
diff --git 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`
-			<div class="vwc-elevation ${classMap(classList)}">
+			<div class="vwc-elevation ${classMap(classList)}" part="base">
 				<slot></slot>
 			</div>
 		`;

diff --git 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;
 		}
 	</style>
 `;

diff --git a/components/popup/src/vwc-popup-base.ts b/components/popup/src/vwc-popup-base.ts
@@ -222,21 +222,25 @@ export class VWCPopupBase extends LitElement {
     }
 
     protected override render(): TemplateResult {
-    	const part = this.alternate ? 'vvd-scheme-alternate' : '';
+    	const alternate = this.alternate ? 'vvd-scheme-alternate' : '';
     	const aria = this.open ? 'false' : 'true';
 
     	return html`
-            <div class="popup-wrapper">
                 <vwc-elevation dp="2">
-                    <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${part}>
-                        <div class="popup-content">
+									<!-- 'popup-wrapper' is selected by the wrapping elevation, thus required for shadow styling -->
+									<!-- the reason for not applying directly to its first-child 'popup' is to avoid scenario where popup is set to alternate scheme
+												and affect the shadow style surfacing contrast which should still in default scheme context -->
+									<div class="popup-wrapper">
+                    <div class="popup ${classMap(this.getRenderClasses())}" aria-hidden=${aria} part=${alternate}>
+                        <div class="popup-content" >
                             <slot></slot>
                             ${this.renderDismissButton()}
                         </div>
                         ${this.renderArrow()}
                     </div>
+									</div>
                 </vwc-elevation>
-            </div>
+
 		`;
     }
 }
diff --git a/components/popup/src/vwc-popup.scss b/components/popup/src/vwc-popup.scss
@@ -8,17 +8,17 @@
 }
 
 .popup {
-	--border-radius-size: 6px;
 	width: min-content;
 	background-color: var(#{scheme-variables.$vvd-color-surface-4dp});
-	border-radius: var(--border-radius-size);
+	border-radius: inherit;
 	contain: layout;
 	&:not(.popup-open) {
 		display: none;
 	}
 
 	&-wrapper {
 		position: absolute;
+		border-radius: 6px;
 	}
 
 	&-content {

diff --git a/ui-tests/snapshots/vwc-elevation.png b/ui-tests/snapshots/vwc-elevation.png
diff --git a/ui-tests/tests/vwc-elevation/index.js b/ui-tests/tests/vwc-elevation/index.js
@@ -1,25 +1,24 @@
 import '@vonage/vwc-elevation';
+import '@vonage/vwc-layout';
+
 
 export async function createElementVariations(wrapper) {
 	const elementWrapper = document.createElement('div');
 	elementWrapper.innerHTML =
 		`
 			<style>
-				#VwcElevation {
-					display: inline-block;
-				}
-
-				vwc-elevation {
-					margin: 25px;
-					display: block;
-				}
 				.card {
-					width: 300px;
-					height: 30px;
 					padding: 20px;
 					text-align: center;
+					border-radius: 6px;
+				}
+				.wrapper {
+				 width: 380px;
+				 display: inline-block;
 				}
 			</style>
+			<div class="wrapper">
+			<vwc-layout column-basis="block" column-spacing="sm" gutters="md">
 			<vwc-elevation dp="0">
 		  	<div class="card">
 					This is the content inside the elevation with DP 0
@@ -61,6 +60,8 @@ export async function createElementVariations(wrapper) {
 					This is the content inside the elevation with DP 24
 				</div>
 			</vwc-elevation>
+			</<vwc-layout>
+			</div>
 		`;
 	wrapper.appendChild(elementWrapper);
 }