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 3 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
60 changes: 44 additions & 16 deletions components/button/src/vwc-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
--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;
--gutter: 8px;

@include vvd-formfield.coupling;
@include connotation.connotation;
Expand All @@ -67,32 +67,20 @@

> .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;
}
}
--gutter: 10px;
}

:host([raised]) &,
Expand All @@ -117,6 +105,32 @@
:host([enlarged]) & {
--mdc-button-horizontal-padding: 20px;
}

:host([stacked][enlarged]) & {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can leverage the button-stacked class here
with sass

.button-stacked {
    :host([enlarged]) & {

    }
}

--button-block-size: 80px;
}

:host([stacked][dense]) & {
--button-block-size: 56px;
}

&.button-stacked {
flex-direction: column;

> .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-right: 0;
margin-left: 0;
}
}
}

@include shape-mixins.shape(
Expand All @@ -125,3 +139,17 @@
pill: 24px,
)
);



:host([stacked]) {
.mdc-button {
--button-block-size: 68px;
}
.mdc-button > .leading-icon vwc-icon,
.mdc-button > .trailing-icon vwc-icon {
--gutter: 0;

}
}

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
95 changes: 92 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,111 @@ 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 stacked icons-->
<vwc-button connotation="primary" layout="filled" icon="download" dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" enlarged stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" shape="pill" dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" shape="pill" stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" shape="pill" enlarged stacked>Button</vwc-button>
<hr>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" enlarged stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" shape="pill" dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" shape="pill" stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" shape="pill" enlarged stacked>Button</vwc-button>
<hr>
<vwc-button connotation="primary" layout="" icon="calendar-line" dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="" icon="calendar-line" stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="" icon="calendar-line" enlarged stacked>Button</vwc-button>
<hr>
<!-- sizes with stacked icons - trailing icon-->
<vwc-button connotation="primary" layout="filled" icon="calendar-line" dense trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" icon="calendar-line" trailingIcon enlarged stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line" dense trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="filled" shape="pill" icon="calendar-line" trailingIcon enlarged stacked>Button</vwc-button>
<hr>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" icon="calendar-line" trailingIcon enlarged stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line" trailingIcon dense stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="outlined" shape="pill" icon="calendar-line" trailingIcon enlarged stacked>Button</vwc-button>

<hr>
<vwc-button connotation="primary" layout="" icon="calendar-line" dense trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="" icon="calendar-line" trailingIcon stacked>Button</vwc-button>
<vwc-button connotation="primary" layout="" icon="calendar-line" enlarged trailingIcon stacked>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>
<!--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>
<!-- 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