Skip to content

Commit

Permalink
feat: refactor button variants (#271)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE

This work changes the attributes of button component.

* refactor(button): replace variants and kinds

* docs(button): update stories

* style(button): relocate style variables under button

* style(button): fix hover state on primary variant

* fix(button): convert css variables to private

* fix: change all button usages appwise

* docs(button): improve storybook

* docs(button): fix typos

* fix(button): correct icon button selector
  • Loading branch information
@olkeoguz
olkeoguz authored Oct 6, 2022
1 parent b29d2f8 commit b3e2a1e
Show file tree
Hide file tree
Showing 9 changed files with 128 additions and 133 deletions.
4 changes: 2 additions & 2 deletions src/components/alert/bl-alert.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ describe('Attributes', () => {
const icon = closeButton?.getAttribute('icon');
const variant = closeButton?.getAttribute('variant');
const label = closeButton?.getAttribute('label');
expect(kind).to.eq('text');
expect(kind).to.eq('neutral');
expect(icon).to.eq('close');
expect(variant).to.eq('secondary');
expect(variant).to.eq('tertiary');
expect(label).to.eq('close');
});
it('is bound to `icon` attribute', async () => {
Expand Down
7 changes: 4 additions & 3 deletions src/components/alert/bl-alert.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ export default class BlAlert extends LitElement {
element.parentNode?.removeChild(element);
return;
}
element.setAttribute('variant', 'secondary' as ButtonVariant);
element.setAttribute('kind', 'text' as ButtonKind);
element.setAttribute('variant','tertiary' as ButtonVariant);
element.setAttribute('kind', 'neutral' as ButtonKind);
element.setAttribute('size', 'medium' as ButtonSize);
element.removeAttribute('icon');
});
Expand All @@ -136,7 +136,8 @@ export default class BlAlert extends LitElement {
? html`<bl-button
class=${closeClasses}
label="close"
kind="text"
variant="tertiary"
kind="neutral"
icon="close"
variant="secondary"
@click=${this._closeHandler}
Expand Down
142 changes: 71 additions & 71 deletions src/components/button/bl-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@
display: var(--bl-button-display, inline-block);
max-width: 100%;
position: relative;

--bl-button-main-color: var(--bl-color-primary);
--bl-button-main-hover-color: var(--bl-color-primary-hover);
--bl-button-text-hover-color: var(--bl-color-secondary-background);
--bl-button-content-color: var(--bl-color-primary-background);
--bl-button-bg-color: var(--bl-button-main-color);
--bl-button-border-color: var(--bl-button-main-color);
--bl-button-padding-vertical: var(--bl-size-2xs);
--bl-button-padding-horizontal: var(--bl-size-m);
--bl-button-margin-icon: var(--bl-button-padding-vertical);
--bl-button-icon-size: var(--bl-size-m);
--bl-button-font: var(--bl-font-title-3-medium);
--bl-button-height: var(--bl-size-2xl);
}

.button {
--main-color: var(--bl-color-primary);
--main-hover-color: var(--bl-color-primary-hover);
--text-hover-color: var(--bl-color-secondary-background);
--content-color: var(--bl-color-primary-background);
--bg-color: var(--main-color);
--border-color: var(--main-color);
--padding-vertical: var(--bl-size-2xs);
--padding-horizontal: var(--bl-size-m);
--margin-icon: var(--padding-vertical);
--icon-size: var(--bl-size-m);
--font: var(--bl-font-title-3-medium);
--height: var(--bl-size-2xl);

display: flex;
gap: var(--bl-button-margin-icon);
gap: var(--margin-icon);
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100%;
height: var(--bl-button-height);
border: solid 1px var(--bl-button-border-color);
width:100%;
height: var(--height);
border: solid 1px var(--border-color);
border-radius: 6px;
text-decoration: none;
padding: var(--bl-button-padding-vertical) var(--bl-button-padding-horizontal);
padding: var(--padding-vertical) var(--padding-horizontal);
cursor: pointer;
background-color: var(--bl-button-bg-color);
color: var(--bl-button-content-color);
font: var(--bl-button-font);
background-color: var(--bg-color);
color: var(--content-color);
font: var(--font);
font-kerning: none;
user-select: none;
}

:host(:hover) {
--bl-button-bg-color: var(--bl-button-main-hover-color);
--bl-button-border-color: var(--bl-button-main-hover-color);
:host(:hover) .button {
--bg-color: var(--main-hover-color);
--border-color: var(--main-hover-color);
}

.label {
Expand All @@ -48,81 +48,81 @@
text-overflow: ellipsis;
}

:host([size='small']) {
--bl-button-font: var(--bl-font-title-4-medium);
--bl-button-padding-vertical: var(--bl-size-3xs);
--bl-button-padding-horizontal: var(--bl-size-2xs);
--bl-button-icon-size: var(--bl-size-s);
--bl-button-height: var(--bl-size-xl);
:host([size='small']) .button {
--font: var(--bl-font-title-4-medium);
--padding-vertical: var(--bl-size-3xs);
--padding-horizontal: var(--bl-size-2xs);
--icon-size: var(--bl-size-s);
--height: var(--bl-size-xl);
}

:host([size='large']) {
--bl-button-font: var(--bl-font-title-3-medium);
--bl-button-padding-vertical: var(--bl-size-xs);
--bl-button-padding-horizontal: var(--bl-size-xl);
--bl-button-margin-icon: var(--bl-size-2xs);
--bl-button-height: var(--bl-size-3xl);
:host([size='large']) .button {
--font: var(--bl-font-title-3-medium);
--padding-vertical: var(--bl-size-xs);
--padding-horizontal: var(--bl-size-xl);
--margin-icon: var(--bl-size-2xs);
--height: var(--bl-size-3xl);
}

.button:focus {
outline: none;
}

:host ::slotted(bl-icon) {
font-size: var(--bl-button-icon-size);
font-size: var(--icon-size);
}

:host .has-icon:not(.has-content) {
--padding-horizontal: var(--padding-vertical);
--margin-icon: 0;
}

:host([variant='secondary']) .button {
--bg-color: transparent;
--content-color: var(--main-color);
}

.has-icon:not(.has-content) {
--bl-button-padding-horizontal: var(--bl-button-padding-vertical);
--bl-button-margin-icon: 0;
:host([variant='tertiary']) .button {
--content-color: var(--main-color);
--border-color: transparent;
--bg-color: transparent;
}

:host([variant='secondary']) {
--bl-button-main-color: var(--bl-color-secondary);
--bl-button-main-hover-color: var(--bl-color-secondary-hover);
:host([kind='neutral']) .button {
--main-color: var(--bl-color-secondary);
--main-hover-color: var(--bl-color-secondary-hover);
}

:host([variant='success']) {
--bl-button-main-color: var(--bl-color-success);
--bl-button-main-hover-color: var(--bl-color-success-hover);
:host([kind='success']) .button {
--main-color: var(--bl-color-success);
--main-hover-color: var(--bl-color-success-hover);
}

:host([variant='danger']) {
--bl-button-main-color: var(--bl-color-danger);
--bl-button-main-hover-color: var(--bl-color-danger-hover);
:host([kind='danger']) .button {
--main-color: var(--bl-color-danger);
--main-hover-color: var(--bl-color-danger-hover);
}

:host([disabled]) {
cursor: not-allowed;

--bl-button-main-color: var(--bl-color-tertiary);
--bl-button-main-hover-color: var(--bl-color-tertiary);
--bl-button-content-color: var(--bl-color-content-passive);
--bl-button-bg-color: var(--bl-button-main-color);
}

:host([disabled]) .button {
--main-color: var(--bl-color-tertiary);
--main-hover-color: var(--bl-color-tertiary);
--content-color: var(--bl-color-content-passive);
--bg-color: var(--main-color);

pointer-events: none;
text-decoration: none;
}

:host([kind='text']) {
--bl-button-content-color: var(--bl-button-main-color);
--bl-button-border-color: transparent;
--bl-button-bg-color: transparent;
}

:host([kind='outline']) {
--bl-button-bg-color: transparent;
--bl-button-content-color: var(--bl-button-main-color);
}

:host([kind='outline']:hover:not([disabled])) {
--bl-button-content-color: var(--bl-color-primary-background);
--bl-button-bg-color: var(--bl-button-main-hover-color);
:host([variant='secondary']:hover:not([disabled])) .button {
--content-color: var(--bl-color-primary-background);
--bg-color: var(--main-hover-color);
}

:host([kind='text']:hover:not([disabled])) {
--bl-button-content-color: var(--bl-button-main-hover-color);
--bl-button-bg-color: var(--bl-button-text-hover-color);
:host([variant='tertiary']:hover:not([disabled])) .button {
--content-color: var(--main-hover-color);
--bg-color: var(--text-hover-color);
}
Loading

0 comments on commit b3e2a1e

Please sign in to comment.