feat(fab): elevated undefined connotation

.stylelintrc.js

@@ -24,6 +24,7 @@ module.exports = {
 		'declaration-block-no-duplicate-properties': true,
 		'function-parentheses-space-inside': null,
 		'rule-empty-line-before': null,
-		'a11y/media-prefers-reduced-motion': null
+		'a11y/media-prefers-reduced-motion': null,
+		'length-zero-no-unit': null
 	},
 };

components/fab/src/vwc-fab.scss

@@ -1,24 +1,63 @@
+@use 'sass:selector';
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-typography/scss/typography' as typography;
-@use 'sass:selector';
+@use '@vonage/vvd-foundation/scss/mixins/connotation/config' with (
+	$connotations-set: primary cta
+);
+@use '@vonage/vvd-foundation/scss/mixins/connotation' as connotation;
 
-.mdc-fab {
-	@include typography.typography-mdc-coupling('button', 'body-2-bold');
-	font-stretch: var(--mdc-typography-button-font-stretch); // ! this was supposed to be set by MDC
-	letter-spacing: initial;
-	text-transform: initial;
+:host {
+	.mdc-fab {
 
-	&--extended vwc-icon {
-		margin-inline-end: 12px;
-	}
-}
+		// prevent mdc's flash of green before tokens are applied
+		--mdc-theme-secondary: unset;
+		--mdc-theme-on-secondary: unset;
 
-:host([connotation='primary']) .mdc-fab {
-	--mdc-theme-secondary: var(#{scheme-variables.$vvd-color-primary});
-	--mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-on-primary});
-}
+		--mdc-fab-extended-label-padding: 20px;
+		--mdc-fab-extended-icon-padding: 12px;
+		--mdc-fab-focus-outline-color: initial;
+		--mdc-fab-focus-outline-width: 0px;
+
+		--mdc-theme-secondary: var(
+			#{connotation.$vvd-color-connotation},
+			var(#{scheme-variables.$vvd-color-surface-4dp})
+		);
+		--mdc-theme-on-secondary: var(
+			#{connotation.$vvd-color-on-connotation},
+			var(#{scheme-variables.$vvd-color-on-canvas})
+		);
+		--mdc-ripple-color: currentcolor;
+		--mdc-fab-box-shadow: 0 none;
+		@include connotation.connotation;
+		@include typography.typography-cat-shorthand('body-2-bold');
+		box-shadow: 0 none;
+		filter: var(#{scheme-variables.$vvd-shadow-surface-4dp});
 
-:host([connotation='cta']) .mdc-fab {
-	--mdc-theme-secondary: var(#{scheme-variables.$vvd-color-cta});
-	--mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-on-cta});
+		&:not([disabled]) {
+			&.mdc-ripple-upgraded--background-focused,
+			&:not(.mdc-ripple-upgraded):focus {
+				box-shadow: 0 none;
+				filter: var(#{scheme-variables.$vvd-shadow-surface-8dp});
+			}
+
+			&:active,
+			&:focus:active {
+				box-shadow: 0 none;
+				filter: var(#{scheme-variables.$vvd-shadow-surface-12dp});
+			}
+		}
+
+		&[disabled] {
+			--mdc-theme-secondary: var(#{scheme-variables.$vvd-color-neutral-20});
+			--mdc-theme-on-secondary: var(#{scheme-variables.$vvd-color-neutral-50});
+			filter: var(#{scheme-variables.$vvd-shadow-surface-2dp});
+			.ripple {
+				display: none;
+			}
+		}
+	}
+
+	.mdc-fab__icon {
+		--connotation: initial;
+	}
 }

components/fab/src/vwc-fab.ts

@@ -39,7 +39,8 @@ export class VWCFab extends MWCFab {
 	    'mdc-fab--touch': hasTouchTarget,
 	    'mdc-fab--exited': this.exited,
 	    'mdc-fab--extended': this.extended,
-	    'icon-end': this.showIconAtEnd,
+			'icon-end': this.showIconAtEnd,
+			[`connotation-${this.connotation}`]: !!this.connotation,
 	  };
 
 	  const ariaLabel = this.label ? this.label : this.icon;

components/fab/stories/arg-types.js

@@ -2,7 +2,7 @@ export const argTypes = {
 	connotation: {
 		control: {
 			type: 'select',
-			options: ['primary', 'cta'],
+			options: [undefined, 'primary', 'cta'],
 		}
 	},
 	mini: {

components/fab/stories/fab.stories.js

@@ -11,12 +11,25 @@ export default {
 
 const Template = args => html`<vwc-fab ...=${spread(args)} @click="${onClick}"></vwc-fab>`;
 
+export const Basic = Template.bind({});
+Basic.args = { icon: 'store' };
+
 export const Mini = Template.bind({});
 Mini.args = { mini: '', icon: 'store' };
 
 export const Extended = Template.bind({});
 Extended.args = { extended: '', label: 'Add to cart', icon: 'wallet' };
 
+export const IconTrailing = Template.bind({});
+IconTrailing.args = { extended: '', showIconAtEnd: '', label: 'Add to cart', icon: 'wallet' };
+
+export const Connotation = Template.bind({});
+Connotation.args = { extended: '', connotation: 'primary', label: 'Add to cart', icon: 'wallet' };
+
+export const Disabled = Template.bind({});
+Disabled.args = { extended: '', disabled: '', label: 'Add to cart', icon: 'wallet' };
+
+
 function onClick(event) {
 	console.log(`'${event.target.getAttribute('icon')}' fab clicked`);
 }

ui-tests/tests/vwc-fab/index.js

@@ -0,0 +1,17 @@
+import '@vonage/vwc-fab';
+
+export async function createElementVariations(wrapper) {
+	const textElementWrapper = document.createElement('div');
+	textElementWrapper.innerHTML = `
+		<vwc-fab icon="store"></vwc-fab>
+		<vwc-fab icon="store" mini></vwc-fab>
+		<vwc-fab icon="wallet" label="Add to cart" extended></vwc-fab>
+		<vwc-fab icon="wallet" label="Add to cart" extended showIconAtEnd></vwc-fab>
+		<vwc-fab icon="wallet" label="Add to cart" extended disabled></vwc-fab>
+		<vwc-fab icon="store" connotation="primary"></vwc-fab>
+		<vwc-fab icon="store" connotation="cta"></vwc-fab>
+	`;
+	wrapper.appendChild(textElementWrapper);
+}
+
+