default border radius

Vonage · Dec 28, 2021 · 55ed121 · 55ed121
1 parent ee69f24
commit 55ed121
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/components/elevation/readme.md b/components/elevation/readme.md
@@ -20,16 +20,16 @@ Note that this component is responsible for the perceived elevation alone and no
 
 ### Properties/Attributes
 
-|name|attr/prop/reflected|type|description|
-|--- |--- |--- |--- |
-|dp|property/attribute|string|Level in Density-Independent Pixels (DP). Possible values: `2`,`4`,`8`,`12`,`16`,`24`|
+|name|attr/prop/reflected|type| description                                                                               |
+|--- |--- |--- |-------------------------------------------------------------------------------------------|
+|dp|property/attribute|string| Level in Density-Independent Pixels (DP). Possible values: `0`,`2`,`4`,`8`,`12`,`16`,`24` |
 
 ### CSS Variables
 
-|name|description|
-|--- |--- |
-|`--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|
+|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
@@ -27,6 +27,6 @@ $vvd-elevation-border-radius: --vvd-elevation-border-radius;
 
 .vwc-elevation {
 	width: fit-content;
-	border-radius: var(#{$vvd-elevation-border-radius}, 0);
+	border-radius: var(#{$vvd-elevation-border-radius}, 6px);
 	contain: 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
@@ -68,9 +68,15 @@ export async function createElementVariations(wrapper) {
 				</div>
 			</vwc-elevation>
 
-			<vwc-elevation style="--vvd-elevation-border-radius: 6px;">
+			<vwc-elevation>
 		  	<div class="card" style="background-color: lightpink; height: auto;">
-					This is the content inside the elevation with radius and inside element with backgrund color
+					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>
 		`;