feat(button): stacked style flow support (#1174)

Vonage · Dec 30, 2021 · d4d975d · d4d975d
1 parent 4976266
commit d4d975d
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 25 deletions.
diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -1,4 +1,3 @@
-
 @forward './vwc-button-coupling';
 @use './vwc-button-variables' as button-variables;
 @use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
@@ -10,7 +9,7 @@
 	$default: primary,
 );
 @use '@vonage/vvd-foundation/scss/mixins/connotation' as connotation;
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with(
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
 	$variable-name: --vvd-button-shape
 );
 @use '@vonage/vvd-foundation/scss/mixins/layout/config' as layout-config with (
@@ -40,7 +39,6 @@
 	--mdc-button-outline-color: var(#{layout.$vvd-layout-color-outline}, var(--mdc-theme-primary));
 	--mdc-button-horizontal-padding: 16px;
 	--button-block-size: 40px;
-	$gutter: 8px;
 
 	@include vvd-formfield.coupling;
 	@include connotation.connotation;
@@ -65,35 +63,36 @@
 		display: flex;
 	}
 
+	> .trailing-icon,
+	> .leading-icon {
+		vwc-icon {
+			--gutter: 8px;
+
+			:host([enlarged]) & {
+				--gutter: 10px;
+			}
+
+			:host([stacked]) & {
+				--gutter: 0;
+			}
+		}
+	}
+
 	> .trailing-icon {
 		vwc-icon {
-			margin-inline-start: $gutter;
+			margin-inline-start: var(--gutter);
 		}
 	}
 
 	> .leading-icon {
 		vwc-icon {
-			margin-inline-end: $gutter;
+			margin-inline-end: var(--gutter);
 		}
 	}
 
 	/* stylelint-disable-next-line order/order -- variants */
 	@include size(dense, 4);
-	@include size(enlarged, 6) {
-		$gutter: 10px;
-
-		> .trailing-icon {
-			vwc-icon {
-				margin-inline-start: $gutter;
-			}
-		}
-
-		> .leading-icon {
-			vwc-icon {
-				margin-inline-end: $gutter;
-			}
-		}
-	}
+	@include size(enlarged, 6);
 
 	:host([raised]) &,
 	:host([unelevated]) & {
@@ -117,6 +116,36 @@
 	:host([enlarged]) & {
 		--mdc-button-horizontal-padding: 20px;
 	}
+
+	&.button-stacked {
+		--button-block-size: 68px;
+		flex-direction: column;
+		line-height: normal;
+
+		:host([enlarged]) & {
+			--button-block-size: 80px;
+		}
+
+		:host([dense]) & {
+			--button-block-size: 56px;
+		}
+
+		> .leading-icon vwc-icon,
+		.leading-icon ::slotted(*) {
+			margin-block-end: 0.5rem;
+		}
+
+		> .trailing-icon vwc-icon,
+		.trailing-icon ::slotted(*) {
+			margin-block-start: 0.5rem;
+		}
+
+		.trailing-icon ::slotted(*),
+		.leading-icon ::slotted(*) {
+			margin-inline-end: 0;
+			margin-inline-start: 0;
+		}
+	}
 }
 
 @include shape-mixins.shape(

diff --git a/components/button/src/vwc-button.ts b/components/button/src/vwc-button.ts
@@ -74,6 +74,9 @@ export class VWCButton extends MWCButton {
 	@property({ attribute: 'form', reflect: true })
 		formId: string | null = null;
 
+	@property({ type: Boolean, reflect: true })
+		stacked = false;
+
 	#_hiddenButton: HTMLButtonElement = VWCButton.createHiddenButton();
 
 	protected updateFormAndButton(): void {
@@ -164,7 +167,8 @@ export class VWCButton extends MWCButton {
 			'mdc-button--outlined': this.outlined,
 			'mdc-button--dense': this.dense,
 			[`connotation-${this.connotation}`]: !!this.connotation,
-			[`layout-${this.layout}`]: !!this.layout
+			[`layout-${this.layout}`]: !!this.layout,
+			'button-stacked': this.stacked,
 		});
 	}
 

diff --git a/components/button/stories/arg-types.js b/components/button/stories/arg-types.js
@@ -24,6 +24,12 @@ export const argTypes = {
 			].includes(s)),
 		}
 	},
+	stacked: {
+		control: {
+			type: 'inline-radio',
+			options: { 'true': '', 'false': undefined }
+		}
+	},
 	dense: {
 		control: {
 			type: 'inline-radio',

diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
@@ -10,7 +10,7 @@ export default {
 	argTypes
 };
 
-const Template = args => html`<vwc-button ...=${spread(args)}></vwc-button>`;
+const Template = args => html`<vwc-button ...=${spread(args)}>`;
 
 export const Basic = Template.bind({});
 Basic.args = { label: 'Basic', layout: 'text' };
@@ -33,6 +33,9 @@ Enlarged.args = { label: 'Enlarged', layout: 'filled', enlarged: '' };
 export const Icon = Template.bind({});
 Icon.args = { label: 'Icon', layout: 'filled', icon: 'download' };
 
+export const Stacked = Template.bind({});
+Stacked.args = { label: 'Action', layout: 'filled', icon: 'compose-line', stacked: '' };
+
 export const Disabled = Template.bind({});
 Disabled.args = { label: 'Disabled', layout: 'filled', disabled: '' };
 
@@ -46,3 +49,25 @@ const TemplateState = args => html`<vwc-button ...=${spread(args)}>
 
 export const Pending = TemplateState.bind({});
 Pending.args = { label: 'Pending', layout: 'filled', disabled: '' };
+
+const TemplateSizes = args => html`
+	<style>
+		.wrapper {
+			display: grid;
+			grid-template-columns: repeat(2, 100px);
+			gap: 2rem;
+			justify-items: center;
+		}
+	</style>
+	<div class="wrapper">
+		<vwc-button label="Button" layout="filled" dense ...=${spread(args)}></vwc-button>
+		<vwc-button label="Button" layout="filled" icon="calendar-line" dense ...=${spread(args)}></vwc-button>
+		<vwc-button label="Button" layout="filled" ...=${spread(args)}></vwc-button>
+		<vwc-button label="Button" layout="filled" icon="calendar-line" ...=${spread(args)}></vwc-button>
+		<vwc-button label="Button" layout="filled" enlarged ...=${spread(args)}></vwc-button>
+		<vwc-button label="Button" layout="filled" icon="calendar-line" enlarged ...=${spread(args)}></vwc-button>
+	</div>
+	<vwc-button >
+</vwc-button>`;
+
+export const MixesSizes = TemplateSizes.bind({});
diff --git a/ui-tests/snapshots/vwc-button.png b/ui-tests/snapshots/vwc-button.png
diff --git a/ui-tests/tests/vwc-button/index.js b/ui-tests/tests/vwc-button/index.js
@@ -34,22 +34,139 @@ export async function createElementVariations(wrapper) {
 		<vwc-button connotation="primary" layout="filled" dense>Button</vwc-button>
 		<vwc-button connotation="primary" layout="filled">Button</vwc-button>
 		<vwc-button connotation="primary" layout="filled" enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="filled" dense>Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="filled">Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="filled" enlarged>Button</vwc-button>
 		<hr>
 		<vwc-button connotation="primary" layout="outlined" dense>Button</vwc-button>
 		<vwc-button connotation="primary" layout="outlined">Button</vwc-button>
 		<vwc-button connotation="primary" layout="outlined" enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="outlined" dense>Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="outlined">Button</vwc-button>
+		<vwc-button connotation="primary" shape="pill" layout="outlined" enlarged>Button</vwc-button>
 		<hr>
 		<vwc-button connotation="primary" layout="" dense>Button</vwc-button>
 		<vwc-button connotation="primary" layout="">Button</vwc-button>
 		<vwc-button connotation="primary" layout="" enlarged>Button</vwc-button>
 		<hr>
-		<vwc-button connotation="primary" layout="outlined" fullwidth>Button</vwc-button>
-		<vwc-button connotation="primary" layout="filled" fullwidth>Button</vwc-button>
-		<hr>
 
+<!--		sizes with icons-->
+		<vwc-button connotation="primary" layout="filled" icon="download" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line"  enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line"  enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line"  dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line"  enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line"  dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line"  enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" enlarged>Button</vwc-button>
+		<hr>
 
+		<!--		sizes with trailing icons-->
+		<vwc-button connotation="primary" layout="filled" trailingIcon icon="download" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" trailingIcon icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" trailingIcon icon="calendar-line"  enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" trailingIcon shape="pill" icon="calendar-line" dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" trailingIcon shape="pill" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" trailingIcon shape="pill" icon="calendar-line"  enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon icon="calendar-line"  dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon icon="calendar-line"  enlarged>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon shape="pill" icon="calendar-line"  dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon shape="pill" icon="calendar-line" >Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" trailingIcon shape="pill" icon="calendar-line"  enlarged>Button</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" trailingIcon dense>Button</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" trailingIcon >Button</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="calendar-line" trailingIcon enlarged>Button</vwc-button>
+		<hr>
+		<!--		sizes with stacked icons - using Label -->
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action" dense stacked></vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action"  stacked></vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action"  enlarged stacked></vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action" shape="pill" dense stacked></vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action"  shape="pill" stacked></vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" label="Action"  shape="pill" enlarged stacked></vwc-button>
+		<hr>
+		<!--		sizes with stacked icons-->
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line"  stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line"  enlarged stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" shape="pill" dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line"  shape="pill" stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line"  shape="pill" enlarged stacked>Action</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" enlarged stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" shape="pill" dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" shape="pill" stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" shape="pill" enlarged stacked>Action</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="" icon="compose-line" dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="compose-line"  stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="compose-line" enlarged stacked>Action</vwc-button>
+		<hr>
+				<!--		sizes with stacked icons - trailing icon-->
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" dense  trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="compose-line" trailingIcon enlarged stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="compose-line" dense  trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="compose-line" trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="filled" shape="pill" icon="compose-line" trailingIcon enlarged stacked>Action</vwc-button>
+		<hr>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" trailingIcon dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="compose-line" trailingIcon enlarged stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="compose-line" trailingIcon dense stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="compose-line" trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" shape="pill" icon="compose-line" trailingIcon enlarged stacked>Action</vwc-button>
 
+		<hr>
+		<vwc-button connotation="primary" layout="" icon="compose-line" dense  trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="compose-line" trailingIcon stacked>Action</vwc-button>
+		<vwc-button connotation="primary" layout="" icon="compose-line" enlarged trailingIcon stacked>Action</vwc-button>
+		<hr>
 
+		<vwc-button connotation="primary" layout="outlined" fullwidth>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" fullwidth>Button</vwc-button>
+		<hr>
+<!--with icons:-->
+		<vwc-button connotation="primary" layout="ghost" icon="calendar-line">Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line">Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line">Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line" disabled>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line" trailingIcon>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line">
+			<span style="padding-right: 0.5rem;">Button</span>
+			<vwc-icon type="download" slot="icon"></vwc-icon>
+		</vwc-button>
+			<hr>
+		<vwc-button connotation="primary" layout="ghost" icon="calendar-line" stacked>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line" stacked>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line" stacked>Button</vwc-button>
+		<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
+		<vwc-button connotation="primary" layout="filled" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
+		<hr>
+<!--		distorted buttons-->
+		<vwc-button connotation="primary" layout="outlined"  stacked>
+			<span>Button</span>
+			<vwc-icon type="calendar-line" slot="icon"></vwc-icon>
+		</vwc-button>
+				<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon enlarged stacked>
+			<span style="padding-right: 0.5rem;">Button</span>
+			<vwc-icon type="download" slot="icon"></vwc-icon>
+		</vwc-button>
 		`;
 	wrapper.appendChild(textElementWrapper);
 }