fix(snackbar): support heading in non legacy mode (#1192)

Vonage · Feb 28, 2022 · 3d88e47 · 3d88e47
1 parent 6510ef0
commit 3d88e47
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 15 deletions.
diff --git a/__snapshots__/snackbar.md b/__snapshots__/snackbar.md
@@ -9,6 +9,8 @@
   position="BOTTOM-CENTER"
 >
   <div class="mdc-snackbar__surface">
+    <div class="header-and-label">
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -27,6 +29,14 @@
   position="BOTTOM-CENTER"
 >
   <div class="mdc-snackbar__surface">
+    <div class="header-and-label">
+      <h3
+        aria-hidden="true"
+        class="heading"
+      >
+        Header
+      </h3>
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -45,6 +55,8 @@
   position="BOTTOM-CENTER"
 >
   <div class="mdc-snackbar__surface">
+    <div class="header-and-label">
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -68,6 +80,8 @@
       type="home"
     >
     </vwc-icon>
+    <div class="header-and-label">
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -86,6 +100,8 @@
   position="BOTTOM-CENTER"
 >
   <div class="mdc-snackbar__surface">
+    <div class="header-and-label">
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -113,6 +129,8 @@
   position="BOTTOM-CENTER"
 >
   <div class="mdc-snackbar__surface">
+    <div class="header-and-label">
+    </div>
     <div class="mdc-snackbar__actions">
       <slot name="action">
       </slot>
@@ -138,7 +156,6 @@
     </div>
   </div>
 </div>
-
 ```
 
 #### `should have internal contents (header) - flavor = 'legacy'`
@@ -163,7 +180,6 @@
     </div>
   </div>
 </div>
-
 ```
 
 #### `should have internal contents (message) - flavor = 'legacy'`
@@ -182,7 +198,6 @@
     </div>
   </div>
 </div>
-
 ```
 
 #### `should have internal contents (icon) - flavor = 'legacy'`
@@ -206,7 +221,6 @@
     </div>
   </div>
 </div>
-
 ```
 
 #### `should have internal contents (dismissible) - flavor = 'legacy'`
@@ -234,7 +248,6 @@
     </div>
   </div>
 </div>
-
 ```
 
 #### `should have internal contents (slotted action) - flavor = 'legacy'`
@@ -253,6 +266,5 @@
     </div>
   </div>
 </div>
-
 ```
 
diff --git a/components/snackbar/src/vwc-snackbar.scss b/components/snackbar/src/vwc-snackbar.scss
@@ -33,20 +33,22 @@ $spacing: 16px;
 }
 
 .mdc-snackbar__label {
-	@include typography.typography-cat-shorthand('body-2');
+	@include typography.typography-cat-shorthand('body-1');
 	padding: 22px $spacing;
 	color: var(#{scheme-variables.$vvd-color-on-canvas});
 	-webkit-font-smoothing: initial;
 	-moz-osx-font-smoothing: initial;
 }
 
 .icon {
+	flex-shrink: 0;
 	margin-block-end: auto;
-	margin-block-start: 20px;
+	margin-block-start: 16px;
 	margin-inline-start: $spacing;
 	.vwc-snackbar-legacy & {
 		#{connotation.$vvd-color-connotation}: initial;
 		color: var(#{scheme-variables.$vvd-color-on-canvas});
+		margin-block-start: 20px;
 	}
 }
 
@@ -85,13 +87,22 @@ $spacing: 16px;
 			border-inline-start: 8px solid var(#{connotation.$vvd-color-connotation});
 		}
 	}
+	.header-and-label {
+		padding: 22px $spacing;
+		> .heading {
+			@include typography.typography-cat-shorthand('body-2-bold');
+		}
+	}
+	.mdc-snackbar__label {
+		@include typography.typography-cat-shorthand('body-2');
+	}
 }
 
-.vwc-snackbar-legacy .header-and-label {
-	padding: 22px $spacing;
+.header-and-label {
+	padding: 16px $spacing;
 
 	> .heading {
-		@include typography.typography-cat-shorthand('body-2-bold');
+		@include typography.typography-cat-shorthand('body-1-bold');
 		color: var(#{scheme-variables.$vvd-color-on-canvas});
 		margin-block-end: 4px;
 		margin-block-start: 0;

diff --git a/components/snackbar/src/vwc-snackbar.ts b/components/snackbar/src/vwc-snackbar.ts
@@ -118,7 +118,7 @@ export class VWCSnackbar extends MWCSnackbarBase {
 				@keydown="${this._handleKeydown}">
 				<div class="mdc-snackbar__surface">
 					${this.icon ? this.renderIcon() : ''}
-					${this.legacy ? this.renderLegacyUi() : accessibleSnackbarLabel(this.message, this.open)}
+					${this.legacy ? this.renderLegacyUi() : this.renderContent()}
 					<div class="mdc-snackbar__actions">
             ${!this.legacy ? html`<slot name="action" @click="${this._handleActionClick}"></slot>` : ''}
 						${this.renderDismissAction()}
@@ -148,6 +148,14 @@ export class VWCSnackbar extends MWCSnackbarBase {
 	}
 	/* eslint-enable lit-a11y/click-events-have-key-events */
 
+	private renderContent(): TemplateResult | string {
+		return html`
+			<div class="header-and-label">
+				${this.header ? this.renderHeading() : ''}
+				${accessibleSnackbarLabel(this.message, this.open)}
+			</div>`;
+	}
+
 	protected renderIcon(): TemplateResult {
 		return html`
     <vwc-icon class="icon" type="${this.icon}"></vwc-icon>`;

diff --git a/components/snackbar/stories/snackbar.js b/components/snackbar/stories/snackbar.js
@@ -37,7 +37,7 @@ const TemplateAction = args => html`
 		<vwc-button layout="filled" @click="${openSnackbar}">Show snackbar</vwc-button>
 	</div>
 	<vwc-snackbar ...=${spread(args)}>
-		<vwc-button slot="action" layout="outlined" shape="pill">Show more</vwc-button>
+		<vwc-button slot="action" layout="outlined" shape="pill" dense >Show more</vwc-button>
 	</vwc-snackbar>
 `;
 

diff --git a/ui-tests/snapshots/vwc-snackbar.png b/ui-tests/snapshots/vwc-snackbar.png
diff --git a/ui-tests/tests/vwc-snackbar/index.js b/ui-tests/tests/vwc-snackbar/index.js
@@ -18,8 +18,8 @@ export async function createElementVariations(wrapper) {
 	snapshotTheWholePage(wrapper);
 	wrapper.innerHTML = `
 		${element`connotation="alert" position="TOP-START" icon="error-solid"`}
-		${element`connotation="announcement" position="TOP-CENTER" icon="megaphone-solid"`}
-		${element`connotation="info" position="TOP-END" dismissible icon="help-solid"`}
+		${element`connotation="info" position="TOP-CENTER" icon="help-solid"`}
+		${element`connotation="announcement" position="TOP-END" dismissible icon="megaphone-solid"`}
 		${element`connotation="success" position="BOTTOM-START" legacy icon="check-solid"`}
 		${element`connotation="warning" position="BOTTOM-CENTER" legacy dismissible icon="warning-solid"`}
 		${element`connotation="info" position="BOTTOM-END" legacy dismissible icon="megaphone-solid"`}