From b3e2a1eb0ac01e509f8512a961ed9d1d88163dbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?O=C4=9Fuz=20=C3=96LKE?= <70342517+olkeoguz@users.noreply.github.com> Date: Thu, 6 Oct 2022 15:15:22 +0300 Subject: [PATCH] feat: refactor button variants (#271) 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 --- src/components/alert/bl-alert.test.ts | 4 +- src/components/alert/bl-alert.ts | 7 +- src/components/button/bl-button.css | 142 +++++++++--------- src/components/button/bl-button.stories.mdx | 84 +++++------ src/components/button/bl-button.ts | 10 +- src/components/select/bl-select.test.ts | 4 +- src/components/select/bl-select.ts | 4 +- src/components/tab-group/tab/bl-tab.ts | 4 +- src/components/tooltip/bl-tooltip.stories.mdx | 2 +- 9 files changed, 128 insertions(+), 133 deletions(-) diff --git a/src/components/alert/bl-alert.test.ts b/src/components/alert/bl-alert.test.ts index 6422ef30..a8455066 100644 --- a/src/components/alert/bl-alert.test.ts +++ b/src/components/alert/bl-alert.test.ts @@ -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 () => { diff --git a/src/components/alert/bl-alert.ts b/src/components/alert/bl-alert.ts index 684922a0..482f50e2 100644 --- a/src/components/alert/bl-alert.ts +++ b/src/components/alert/bl-alert.ts @@ -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'); }); @@ -136,7 +136,8 @@ export default class BlAlert extends LitElement { ? html` export const SingleButtonTemplate = (args) => html` html` html` ${SingleButtonTemplate({content: 'Primary Button', ...args})} ${SingleButtonTemplate({variant: 'secondary', content: 'Secondary Button', ...args})} -${SingleButtonTemplate({variant: 'success', content: 'Success Button', ...args})} -${SingleButtonTemplate({variant: 'danger', content: 'Danger Button', ...args})}`; +${SingleButtonTemplate({variant: 'tertiary', content: 'Tertiary Button', ...args})}` -export const ButtonTypesTemplate = (args) => html` +export const ButtonTypes = (args) => html` ${SingleButtonTemplate({...args})} -${SingleButtonTemplate({kind: 'outline', ...args})} -${SingleButtonTemplate({kind: 'text', ...args})}`; +${SingleButtonTemplate({kind: 'neutral', ...args})} +${SingleButtonTemplate({kind: 'success', ...args})} +${SingleButtonTemplate({kind: 'danger', ...args})}` export const SizesTemplate = (args) => html` ${SingleButtonTemplate({size: 'large', ...args})} ${SingleButtonTemplate({size: 'medium', ...args})} -${SingleButtonTemplate({size: 'small', ...args})}`; +${SingleButtonTemplate({size: 'small', ...args})}` # Button @@ -92,7 +92,7 @@ Buttons allow users to take actions, and make choices with a single tap. ## Button Variants -We have 4 variants for each button: **Primary**, **Secondary**, **Success** and **Danger**. +We have 3 variants for each button: **Primary**, **Secondary** and **Tertiary**. @@ -100,42 +100,33 @@ We have 4 variants for each button: **Primary**, **Secondary**, **Success** and -## Button Types +### Primary Buttons -We have 3 types of buttons: **Contained** (Default), **Outline** and **Text**. +Primary buttons ared used for main actions of the screens. Like a submit button in a form or main button of a dialog.It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`. - - {ButtonTypesTemplate.bind({})} + + {ButtonTypes.bind({})} -### Contained Buttons +### Secondary Buttons -Contained buttons ared used for main actions of the screens. Like a submit button in a form or main button of a dialog. +Secondary buttons represent the important actions in the app. But not the primary ones. They work with all the kinds. - - {Template.bind({})} + + {ButtonTypes.bind({})} -### Outline Buttons +### Tertiary Buttons -Outlined Buttons represent the important actions in the app. But not the primary ones. -They work with all the variants. You simply add `outline` attribute. +Tertiary buttons are typically used for less important actions which also have all the kinds. - - {Template.bind({})} - - - -### Text Buttons -TBD - - - {Template.bind({})} + + {ButtonTypes.bind({})} @@ -148,13 +139,13 @@ To be able to use icon with button, you should give the name of icon to `icon` a - {Template.bind({})} + {ButtonTypes.bind({})} - - {Template.bind({})} + + {ButtonTypes.bind({})} @@ -165,7 +156,7 @@ Icon Only Buttons commonly used for toggle actions. (Ex.: add item to your favor - {Template.bind({})} + {ButtonTypes.bind({})} @@ -190,17 +181,17 @@ By default our buttons are `inline-block`. If you want to make it a block level If button has a limited width and a long text that can not fit in a single line, text will be automatically cropped with three dot at the end. - + {SingleButtonTemplate.bind({})} ## Disabled Buttons -We have 2 types of disabled buttons: **Contained** and **Text**. Disable version of Contained and Outline buttons is the same. +Disable version of all buttons is the same. - + {SizesTemplate.bind({})} @@ -211,18 +202,19 @@ export const SingleButtonHoverTemplate = (args) => html`${SingleButtonTemplate({ export const HoverTemplate = (args) => html` ${SingleButtonHoverTemplate({content: 'Primary Button', ...args})} -${SingleButtonHoverTemplate({variant: 'secondary', content: 'Secondary Button', ...args})} -${SingleButtonHoverTemplate({variant: 'success', content: 'Success Button', ...args})} -${SingleButtonHoverTemplate({variant: 'danger', content: 'Danger Button', ...args})}`; +${SingleButtonHoverTemplate({kind: 'neutral', content: 'Secondary Button', ...args})} +${SingleButtonHoverTemplate({kind: 'success', content: 'Success Button', ...args})} +${SingleButtonHoverTemplate({kind: 'danger', content: 'Danger Button', ...args})}`; + - + {HoverTemplate.bind({})} - + {HoverTemplate.bind({})} - + {HoverTemplate.bind({})} @@ -230,6 +222,8 @@ ${SingleButtonHoverTemplate({variant: 'danger', content: 'Danger Button', ...arg + + ## Reference diff --git a/src/components/button/bl-button.ts b/src/components/button/bl-button.ts index 8a43fdb9..f15fde44 100644 --- a/src/components/button/bl-button.ts +++ b/src/components/button/bl-button.ts @@ -6,8 +6,8 @@ import { event, EventDispatcher } from '../../utilities/event'; import style from './bl-button.css'; import '../icon/bl-icon'; -export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger'; -export type ButtonKind = 'contained' | 'outline' | 'text'; +export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; +export type ButtonKind = 'default' | 'neutral' | 'success' | 'danger'; export type ButtonSize = 'small' | 'medium' | 'large'; export type TargetType = '_blank' | '_parent' | '_self' | '_top'; @@ -34,7 +34,7 @@ export default class BlButton extends LitElement { * Sets the button kind */ @property({ type: String, reflect: true }) - kind: ButtonKind = 'contained'; + kind: ButtonKind = 'default'; /** * Sets the button size @@ -75,8 +75,8 @@ export default class BlButton extends LitElement { /** * Sets the type of the button. Set `submit` to use button as the submitter of parent form. */ - @property({ type: String }) - type: 'submit' | null; + @property({ type: String }) + type: 'submit' | null; /** * Fires when button clicked diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts index f588b524..eddc9d81 100644 --- a/src/components/select/bl-select.test.ts +++ b/src/components/select/bl-select.test.ts @@ -22,9 +22,9 @@ describe('bl-select', () => { diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts index ebda1569..b319800a 100644 --- a/src/components/select/bl-select.ts +++ b/src/components/select/bl-select.ts @@ -192,9 +192,9 @@ export default class BlSelect extends LitElement { : null; const removeButton = html``; const placeholder = this._showPlaceHolder diff --git a/src/components/tab-group/tab/bl-tab.ts b/src/components/tab-group/tab/bl-tab.ts index 0184aaf3..5b58e243 100644 --- a/src/components/tab-group/tab/bl-tab.ts +++ b/src/components/tab-group/tab/bl-tab.ts @@ -101,8 +101,8 @@ export default class BlTab extends LitElement { ${this.helpText} diff --git a/src/components/tooltip/bl-tooltip.stories.mdx b/src/components/tooltip/bl-tooltip.stories.mdx index 414e01d5..9aa405a3 100644 --- a/src/components/tooltip/bl-tooltip.stories.mdx +++ b/src/components/tooltip/bl-tooltip.stories.mdx @@ -26,7 +26,7 @@ export const tooltipOpener = async ({ canvasElement }) => { export const IconTriggerTemplate = (args) => html` - + Settings `