fix(elevation): sharp or rounded shape (#1185)

* fix(elevation): sharp or rounded shape * code review changes
Vonage · Jan 11, 2022 · 545c6b2 · 545c6b2
1 parent 7ef982f
commit 545c6b2
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 31 deletions.
diff --git a/components/elevation/src/vwc-elevation.scss b/components/elevation/src/vwc-elevation.scss
@@ -1,8 +1,7 @@
 @use 'sass:list';
 
 $dps: 0 2 4 8 12 16 24;
-$vvd-elevation-background-color: --vvd-elevation-background-color;
-$vvd-elevation-border-radius: --vvd-elevation-border-radius;
+$elevation-border-radius: --elevation-border-radius;
 
 @function get-default-selector($list, $default) {
 	@if list.length($list) == 1 {
@@ -20,12 +19,13 @@ $vvd-elevation-border-radius: --vvd-elevation-border-radius;
 
 @each $dp in $dps {
 	#{get-default-selector($dps, $dp)} {
-		background-color: var(#{$vvd-elevation-background-color}, var(--vvd-color-surface-#{$dp}dp));
+		background-color: var(--vvd-color-surface-#{$dp}dp);
 		filter: var(--vvd-shadow-surface-#{$dp}dp);
 	}
 }
 
 .vwc-elevation {
+	--elevation-border-radius: 6px;
 	width: fit-content;
-	border-radius: var(#{$vvd-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
@@ -22,7 +22,7 @@ export class VWCElevation extends LitElement {
 
 	protected override render(): unknown {
 		const classList = {
-			[`vwc-elevation-dp-${this.dp}`]: true
+			[`vwc-elevation-dp-${this.dp}`]: true,
 		};
 
 		return html`

diff --git a/components/elevation/stories/elevation.stories.js b/components/elevation/stories/elevation.stories.js
@@ -48,12 +48,6 @@ Basic.args = { label: 'Basic' };
 export const AllElevations = AllTemplate.bind({});
 AllTemplate.args = { label: 'All' };
 
-export const BackgroundColor = Template.bind({});
-BackgroundColor.args = { label: 'Background Color', style: '--vvd-elevation-background-color: lightblue', dp: 8 };
-
-export const BorderRadius = Template.bind({});
-BorderRadius.args = { label: 'Border Radius', style: '--vvd-elevation-border-radius: 16px', dp: 24 };
-
 const HoverEffectExampleTemplate = args => html`
 	${styles()}
 	<vwc-elevation ...=${spread(args)}
@@ -64,7 +58,7 @@ const HoverEffectExampleTemplate = args => html`
 `;
 
 export const HoverEffectExample = HoverEffectExampleTemplate.bind({});
-HoverEffectExample.args = { label: 'Border Radius', style: '--vvd-elevation-border-radius: 16px', dp: 24 };
+HoverEffectExample.args = { label: 'Border Radius', dp: 24 };
 
 function onMouseEnter(e) {
 	e.target.setAttribute('dp', '24');

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
@@ -22,7 +22,7 @@ export async function createElementVariations(wrapper) {
 			</style>
 			<vwc-elevation dp="0">
 		  	<div class="card">
-					This is the content inside the elevation with DP 2
+					This is the content inside the elevation with DP 0
 				</div>
 			</vwc-elevation>
 
@@ -61,24 +61,6 @@ export async function createElementVariations(wrapper) {
 					This is the content inside the elevation with DP 24
 				</div>
 			</vwc-elevation>
-
-			<vwc-elevation style="--vvd-elevation-border-radius: 16px; --vvd-elevation-background-color:lightblue;">
-		  	<div class="card">
-					This is the content inside the elevation with background and radius
-				</div>
-			</vwc-elevation>
-
-			<vwc-elevation>
-		  	<div class="card" style="background-color: lightpink; height: auto;">
-					This is the content inside the elevation with radius and inside element with background color
-				</div>
-			</vwc-elevation>
-
-						<vwc-elevation style="--vvd-elevation-border-radius: 0;">
-		  	<div class="card" style="background-color: lightpink; height: auto;">
-					This is the content inside the elevation with no border-radius
-				</div>
-			</vwc-elevation>
 		`;
 	wrapper.appendChild(elementWrapper);
 }