fix(note): viv-383 issue-619 fixing the safari 13 compliance (#620)

* issue #619: fixing the sfari 13 compliance * fixing PR remarks
Vonage · Jan 29, 2021 · 9a7224a · 9a7224a
1 parent 45aeb4e
commit 9a7224a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/components/note/src/vwc-note.scss b/components/note/src/vwc-note.scss
@@ -5,15 +5,21 @@
 	$connotations: success alert warning info announcement
 );
 
+$border-value:  8px solid var(#{color-semantic.$vvd-color-connotation});
+
 :host {
 	padding: 20px;
 	display: flex;
 	align-items: stretch;
 	background-color: var(#{scheme-variables.$vvd-color-base});
 	color: var(#{scheme-variables.$vvd-color-on-base});
-	border-inline-start: 8px solid var(#{color-semantic.$vvd-color-connotation});
+	border-left: $border-value;
+	border-inline-start: $border-value;
 	border-radius: 6px;
-	box-shadow: inset 0 1px 0 0 #b3b3b3, inset -1px 0 0 0 #b3b3b3, inset 0 -1px 0 0 #b3b3b3;
+	box-shadow:
+		inset 0 1px 0 0 var(#{scheme-variables.$vvd-color-contrast-tinged}),
+	 	inset -1px 0 0 0 var(#{scheme-variables.$vvd-color-contrast-tinged}),
+	  inset 0 -1px 0 0 var(#{scheme-variables.$vvd-color-contrast-tinged});
 	overflow: hidden;
 	contain: content;
 }

diff --git a/components/note/test/note.test.js b/components/note/test/note.test.js
@@ -56,6 +56,17 @@ describe('note', () => {
 		assertComputedStyle(note, { paddingBlockEnd: '20px' });
 	});
 
+	it('should have border appearing correct', async () => {
+		const [note] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME}>Internal contents</${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+		assertComputedStyle(note, {
+			boxShadow:
+				'rgb(179, 179, 179) 0px 1px 0px 0px inset, rgb(179, 179, 179) -1px 0px 0px 0px inset, rgb(179, 179, 179) 0px -1px 0px 0px inset',
+		});
+	});
+
 	describe('header', () => {
 		it('should have header when header is set', async () => {
 			const [note] = addElement(