feat(vwc-icon-button): viv-306 layout, shape, connotation support

__snapshots__/icon button.md

@@ -4,13 +4,13 @@
 
 ```html
 <button
-  aria-label=""
+  aria-label="bin"
   class="mdc-icon-button"
 >
   <vwc-icon
-    class="icon"
+    class="vwc-icon"
     size="small"
-    type=""
+    type="bin"
   >
   </vwc-icon>
   <span class="default-slot-container">

common/foundation/scss/mixins/_layout-mixins.scss

@@ -3,14 +3,15 @@
 @use '../functions';
 
 // override to apply relevance
-$layouts: filled outlined soft text !default;
+$layouts: filled outlined soft text ghost !default;
 ////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////
 $allLayouts: (
 	filled: 'filled',
 	outlined: 'outlined',
 	soft: 'soft',
 	text: 'text',
+	ghost: 'ghost',
 );
 
 $bg: var(#{color-semantic.$vvd-color-connotation});
@@ -32,6 +33,12 @@ $bg: var(#{color-semantic.$vvd-color-connotation});
 	--opaque: 20;
 }
 
+%text,
+%ghost {
+	--background-color: transparent;
+	--color: var(#{scheme-variables.$vvd-color-on-base});
+}
+
 @mixin layout() {
 	@each $layout in functions.pick($layouts, $allLayouts) {
 		#{':host([layout="#{$layout}"])'} {

common/foundation/scss/mixins/_shape-mixins.scss

@@ -18,6 +18,7 @@
 	$shapes: (
 		rounded: var(#{shape-var-names.$shape-border-radius-md-css-variable-name}),
 		pill: var(#{shape-var-names.$shape-border-radius-lg-css-variable-name}),
+		circled: 50%,
 	),
 	$default: rounded
 ) {

common/foundation/src/constants.ts

@@ -13,6 +13,7 @@ export enum Connotation {
 export enum Shape {
 	Rounded = 'rounded',
 	Pill = 'pill',
+	Circled = 'circled',
 }
 
 export enum Size {
@@ -27,4 +28,5 @@ export enum Layout {
 	Filled = 'filled',
 	Outlined = 'outlined',
 	Soft = 'soft',
+	Ghost = 'ghost',
 }

components/badge/src/vwc-badge-base.ts

@@ -17,12 +17,14 @@ type BadgeLayout = Extract<
 	Layout.Filled | Layout.Outlined | Layout.Soft
 >;
 
+type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+
 export class BadgeBase extends LitElement {
 	@property({ type: String, reflect: true })
 	connotation: BadgeConnotation = Connotation.Primary;
 
 	@property({ type: String, reflect: true })
-	shape?: Shape;
+	shape?: BadgeShape;
 
 	@property({ type: String, reflect: true })
 	layout: BadgeLayout = Layout.Filled;

components/badge/stories/arg-types.js

@@ -13,7 +13,9 @@ export const argTypes = {
 	shape: {
 		control: {
 			type: 'select',
-			options: Object.values(Shape)
+			options: Object.values(Shape).filter(s => [
+				Shape.Rounded, Shape.Pill
+			].includes(s)),
 		}
 	},
 	layout: {

components/button/src/vwc-button.ts

@@ -35,6 +35,8 @@ type ButtonConnotation = Extract<
 	| Connotation.Announcement
 >;
 
+type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+
 /**
  * This component is an extension of [<mwc-button>](https://github.com/material-components/material-components-web-components/tree/master/packages/button)
  * Our button supports native features like the 'form' and 'type' attributes
@@ -51,7 +53,7 @@ export class VWCButton extends MWCButton {
 	connotation: ButtonConnotation = Connotation.Primary;
 
 	@property({ type: String, reflect: true })
-	shape?: Shape;
+	shape?: ButtonShape;
 
 	@property({ type: String, reflect: true })
 	type: ButtonType[number] = 'submit';

components/button/stories/arg-types.js

@@ -19,7 +19,9 @@ export const argTypes = {
 	shape: {
 		control: {
 			type: 'select',
-			options: Object.values(Shape),
+			options: Object.values(Shape).filter(s => [
+				Shape.Rounded, Shape.Pill
+			].includes(s)),
 		}
 	},
 	dense: {

components/button/test/button.connotation.test.js

@@ -1,4 +1,3 @@
-import '../vwc-button.js';
 import {
 	textToDomToParent,
 	isolatedElementsCreation,
@@ -7,16 +6,19 @@ import {
 	assertConnotationAttribute,
 	assertConnotationProperty,
 } from '@vonage/vvd-foundation/test/connotation.test.js';
+import { Connotation } from '@vonage/vvd-foundation/constants';
+
+const CONNOTATIONS_SUPPORTED = Object.values(Connotation).filter((c) =>
+	[
+		Connotation.Primary,
+		Connotation.CTA,
+		Connotation.Success,
+		Connotation.Alert,
+		Connotation.Info,
+		Connotation.Announcement,
+	].includes(c)
+);
 
-const VWC_BUTTON = 'vwc-button';
-const CONNOTATIONS_SUPPORTED = [
-	'primary',
-	'cta',
-	'success',
-	'alert',
-	'info',
-	'announcement',
-];
 const LAYOUTS_AFFECTED = [
 	{
 		layout: 'filled',
@@ -36,15 +38,17 @@ const LAYOUTS_AFFECTED = [
 	},
 ];
 
-describe('button connotation', () => {
+export async function connotationTestCases(COMPONENT_NAME) {
 	const addElement = isolatedElementsCreation();
 
 	for (const { layout, childrenAffected, stylesAffected } of LAYOUTS_AFFECTED) {
 		for (const connotation of CONNOTATIONS_SUPPORTED) {
 			it(`should reflect '${connotation}' connotation (attribute) visually, ${layout}`, async () => {
 				const [button] = addElement(
 					textToDomToParent(
-						`<${VWC_BUTTON} layout="${layout}">Button</${VWC_BUTTON}>`
+						`<${COMPONENT_NAME} layout="${layout}" icon="bin">
+							${COMPONENT_NAME === 'vwc-button' ? 'Button' : ''}
+						</${COMPONENT_NAME}>`
 					)
 				);
 				await assertConnotationAttribute({
@@ -58,7 +62,9 @@ describe('button connotation', () => {
 			it(`should reflect '${connotation}' connotation (property) visually, ${layout}`, async () => {
 				const [button] = addElement(
 					textToDomToParent(
-						`<${VWC_BUTTON} layout="${layout}">Button</${VWC_BUTTON}>`
+						`<${COMPONENT_NAME} layout="${layout}" icon="bin">
+							${COMPONENT_NAME === 'vwc-button' ? 'Button' : ''}
+						</${COMPONENT_NAME}>`
 					)
 				);
 				await assertConnotationProperty({
@@ -70,4 +76,4 @@ describe('button connotation', () => {
 			});
 		}
 	}
-});
+}

components/button/test/button.test.js

@@ -4,7 +4,12 @@ import {
 	textToDomToParent,
 	assertComputedStyle,
 } from '../../../test/test-helpers.js';
-import { shapeStyles } from '../../../test/style-utils.js';
+import {
+	sizingTestCases,
+	shapeRoundedTestCases,
+	shapePillTestCases,
+} from '../../../test/shared';
+import { connotationTestCases } from './button.connotation.test.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 import {
 	isolatedElementsCreation,
@@ -362,65 +367,15 @@ describe('button', () => {
 	});
 
 	describe('sizing', () => {
-		it('should have normal size by default', async () => {
-			const addedElements = addElement(
-				textToDomToParent(`<${COMPONENT_NAME}>Button Text</${COMPONENT_NAME}>`)
-			);
-			const actualElement = addedElements[0];
-			await waitNextTask();
-			assertComputedStyle(actualElement, { height: '40px' });
-		});
-
-		it('should have dense size when dense', async () => {
-			const addedElements = addElement(
-				textToDomToParent(
-					`<${COMPONENT_NAME} dense>Button Text</${COMPONENT_NAME}>`
-				)
-			);
-			const actualElement = addedElements[0];
-			await waitNextTask();
-			assertComputedStyle(actualElement, { height: '32px' });
-		});
-
-		it('should have enlarged size when enlarged', async () => {
-			const addedElements = addElement(
-				textToDomToParent(
-					`<${COMPONENT_NAME} enlarged>Button Text</${COMPONENT_NAME}>`
-				)
-			);
-			const actualElement = addedElements[0];
-			await waitNextTask();
-			assertComputedStyle(actualElement, { height: '48px' });
-		});
+		sizingTestCases(COMPONENT_NAME);
 	});
 
 	describe('shape', () => {
-		let formElement, actualElement;
-		beforeEach(async () => {
-			const addedElements = addElement(
-				textToDomToParent(
-					`<${COMPONENT_NAME} layout="filled">Button Text</${COMPONENT_NAME}>`
-				)
-			);
-			await waitNextTask();
-			formElement = addedElements[0];
-			actualElement = formElement.shadowRoot.querySelector('#button');
-		});
-
-		it('should have rounded shape by default', async () => {
-			assertComputedStyle(actualElement, shapeStyles('rounded'));
-		});
-
-		it('should have rounded shape when shape set to rounded', async () => {
-			formElement.shape = 'rounded';
-			await waitNextTask();
-			assertComputedStyle(actualElement, shapeStyles('rounded'));
-		});
+		shapeRoundedTestCases(COMPONENT_NAME);
+		shapePillTestCases(COMPONENT_NAME);
+	});
 
-		it('should have pill shape when shape set to pill', async () => {
-			formElement.shape = 'pill';
-			await waitNextTask();
-			assertComputedStyle(actualElement, shapeStyles('pill'));
-		});
+	describe('button connotation', () => {
+		connotationTestCases(COMPONENT_NAME);
 	});
 });

components/icon-button/src/vwc-icon-button.scss

@@ -1,22 +1,52 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins';
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
+	$connotations: primary cta success alert info announcement
+);
+@use '@vonage/vvd-foundation/scss/mixins/layout-mixins' with (
+	$layouts: filled outlined ghost
+);
 
 :host {
 	.mdc-icon-button {
+		background-color: var(--background-color);
+		border: var(--border);
+		border-radius: var(--border-radius);
+		color: var(--color);
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		overflow: hidden;
+	}
+
+	.vwc-icon {
+		--size: 20px;
+		height: var(--size);
+		width: var(--size);
 	}
 }
 
 // theming
-:host {
-	.mdc-icon-button {
-		color: var(#{scheme-variables.$vvd-color-on-base});
+@include color-connotation-mixins.connotations-context(
+	':host([layout="filled"]#{color-connotation-mixins.$connotation-placeholder}),:host([layout="outlined"]#{color-connotation-mixins.$connotation-placeholder})'
+);
+
+:host([layout='filled']) {
+	.mdc-icon-button:disabled {
+		background-color: var(#{scheme-variables.$vvd-color-contrast-soft});
+	}
+}
+
+:host([layout='outlined']) {
+	.mdc-icon-button:disabled {
+		border-color: var(#{color-semantic.$formfield-disabled-ink});
 	}
+}
 
+:host {
 	.mdc-icon-button:disabled {
-		color: var(	#{color-semantic.$formfield-disabled-ink});
+		color: var(#{color-semantic.$formfield-disabled-ink});
 	}
 }
 
@@ -27,8 +57,25 @@
 
 :host([dense]) {
 	--mdc-icon-button-size: 32px;
+
+	.vwc-icon {
+		--size: 16px;
+	}
 }
 
 :host([enlarged]) {
 	--mdc-icon-button-size: 48px;
+
+	.vwc-icon {
+		--size: 24px;
+	}
 }
+
+@include shape-mixins.shape(
+	$shapes: (
+		rounded: 6px,
+		circled: 50%,
+	)
+);
+
+@include layout-mixins.layout();