Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button): stacked style flow support #1174

Merged
merged 16 commits into from
Dec 30, 2021
Merged

feat(button): stacked style flow support #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f966d52
feat(button): stacked style flow support
yinonov Dec 27, 2021
b4fc2fb
styling stacked buttons
rachelbt Dec 28, 2021
2e5b016
revert index
yinonov Dec 28, 2021
1a73614
Merge branch 'master' into issue1156
rachelbt Dec 29, 2021
6aeae89
styling stack button
rachelbt Dec 29, 2021
ef43421
mixed buttons size story
rachelbt Dec 29, 2021
f9b7131
update UI screenshot
rachelbt Dec 29, 2021
52772b7
Merge branch 'master' into issue1156
rachelbt Dec 29, 2021
a58e42d
Merge branch 'master' into issue1156
rachelbt Dec 30, 2021
c203b6f
formatting
rachelbt Dec 30, 2021
b9d4297
Update components/button/src/vwc-button.scss
yinonov Dec 30, 2021
fd8beb5
Update components/button/src/vwc-button.scss
yinonov Dec 30, 2021
41e2d50
cosmetics
yinonov Dec 30, 2021
2e373f8
Merge branch 'master' into issue1156
rachelbt Dec 30, 2021
c5e7434
ui test png
rachelbt Dec 30, 2021
3f3da3f
fix icon margin
rachelbt Dec 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
69 changes: 49 additions & 20 deletions components/button/src/vwc-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 (
Expand Down Expand Up @@ -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;
Expand All @@ -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]) & {
Expand All @@ -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(
Expand Down
6 changes: 5 additions & 1 deletion components/button/src/vwc-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
});
}

Expand Down
6 changes: 6 additions & 0 deletions components/button/stories/arg-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ export const argTypes = {
].includes(s)),
}
},
stacked: {
control: {
type: 'inline-radio',
options: { 'true': '', 'false': undefined }
}
},
dense: {
control: {
type: 'inline-radio',
Expand Down
27 changes: 26 additions & 1 deletion components/button/stories/button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' };
Expand All @@ -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: '' };

Expand All @@ -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({});
Binary file modified ui-tests/snapshots/vwc-button.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 120 additions & 3 deletions ui-tests/tests/vwc-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down