From 0fb0de9b3d3e016c472b113ca419c2b1310a4bfb Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Fri, 30 Sep 2022 14:49:27 +0300 Subject: [PATCH 1/9] refactor(button): replace variants and kinds --- src/components/button/bl-button.css | 30 +++++----- src/components/button/bl-button.stories.mdx | 66 +++++++++++---------- src/components/button/bl-button.ts | 10 ++-- 3 files changed, 54 insertions(+), 52 deletions(-) diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index bdd6eed9..5a9f6aec 100644 --- a/src/components/button/bl-button.css +++ b/src/components/button/bl-button.css @@ -78,16 +78,27 @@ } :host([variant='secondary']) { + --bl-button-bg-color: transparent; + --bl-button-content-color: var(--bl-button-main-color); +} + +:host([variant='tertiary']) { + --bl-button-content-color: var(--bl-button-main-color); + --bl-button-border-color: transparent; + --bl-button-bg-color: transparent; +} + +:host([kind='neutral']) { --bl-button-main-color: var(--bl-color-secondary); --bl-button-main-hover-color: var(--bl-color-secondary-hover); } -:host([variant='success']) { +:host([kind='success']) { --bl-button-main-color: var(--bl-color-success); --bl-button-main-hover-color: var(--bl-color-success-hover); } -:host([variant='danger']) { +:host([kind='danger']) { --bl-button-main-color: var(--bl-color-danger); --bl-button-main-hover-color: var(--bl-color-danger-hover); } @@ -106,23 +117,12 @@ 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])) { +:host([variant='secondary']:hover:not([disabled])) { --bl-button-content-color: var(--bl-color-primary-background); --bl-button-bg-color: var(--bl-button-main-hover-color); } -:host([kind='text']:hover:not([disabled])) { +:host([variant='tertiary']:hover:not([disabled])) { --bl-button-content-color: var(--bl-button-main-hover-color); --bl-button-bg-color: var(--bl-button-text-hover-color); } diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index d561679e..a308c942 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -14,12 +14,12 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo } }, variant: { - options: ['primary', 'secondary', 'success', 'danger'], + options: ['primary', 'secondary', 'tertiary'], default: 'primary', control: { type: 'select' } }, kind: { - options: ['contained', 'outline', 'text'], + options: ['default', 'neutral', 'success','danger'], default: 'contained', control: { type: 'select' } }, @@ -49,7 +49,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo /> 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 ContainedButtons = (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})}` + +export const OutlineButtons = (args) => html` +${SingleButtonTemplate({variant:'secondary',content: 'Default button', ...args})} +${SingleButtonTemplate({kind:'neutral', variant:'secondary',content: 'Neutral button', ...args})} +${SingleButtonTemplate({kind:'success',variant: 'secondary', content: 'Success button', ...args})} +${SingleButtonTemplate({kind: 'danger', variant:'secondary', content: 'Danger button', ...args})}` + +export const TextButtons = (args) => html` +${SingleButtonTemplate({variant:'tertiary',content: 'Default text', ...args})} +${SingleButtonTemplate({kind:'neutral', variant:'tertiary',content: 'Neutral text', ...args})} +${SingleButtonTemplate({kind:'success',variant: 'tertiary', content: 'Success text', ...args})} +${SingleButtonTemplate({kind: 'danger', variant:'tertiary', content: 'Danger text', ...args})}` + # Button @@ -92,7 +105,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 +113,32 @@ We have 4 variants for each button: **Primary**, **Secondary**, **Success** and -## Button Types - -We have 3 types of buttons: **Contained** (Default), **Outline** and **Text**. - - - - {ButtonTypesTemplate.bind({})} - - - ### Contained Buttons + Contained buttons ared used for main actions of the screens. Like a submit button in a form or main button of a dialog. - - {Template.bind({})} + + {ContainedButtons.bind({})} ### Outline 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. +Outlined Buttons represent the important actions in the app. But not the primary ones. They work with all the variants. - - {Template.bind({})} + + {OutlineButtons.bind({})} -### Text Buttons -TBD +### TextButtons + - - {Template.bind({})} + + {TextButtons.bind({})} @@ -212,8 +215,7 @@ 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({variant: 'tertiary', content: 'Tertiary Button', ...args})}` 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 From e5d662c007454fd74fad7156eec1abd269b0ecc9 Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Mon, 3 Oct 2022 02:25:40 +0300 Subject: [PATCH 2/9] docs(button): update stories --- src/components/button/bl-button.stories.mdx | 49 +++++++++------------ 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index a308c942..c6d2b640 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -66,7 +66,7 @@ ${SingleButtonTemplate({content: 'Primary Button', ...args})} ${SingleButtonTemplate({variant: 'secondary', content: 'Secondary Button', ...args})} ${SingleButtonTemplate({variant: 'tertiary', content: 'Tertiary Button', ...args})}` -export const ContainedButtons = (args) => html` +export const ButtonTypes = (args) => html` ${SingleButtonTemplate({...args})} ${SingleButtonTemplate({kind: 'neutral', ...args})} ${SingleButtonTemplate({kind: 'success', ...args})} @@ -77,19 +77,6 @@ ${SingleButtonTemplate({size: 'large', ...args})} ${SingleButtonTemplate({size: 'medium', ...args})} ${SingleButtonTemplate({size: 'small', ...args})}` -export const OutlineButtons = (args) => html` -${SingleButtonTemplate({variant:'secondary',content: 'Default button', ...args})} -${SingleButtonTemplate({kind:'neutral', variant:'secondary',content: 'Neutral button', ...args})} -${SingleButtonTemplate({kind:'success',variant: 'secondary', content: 'Success button', ...args})} -${SingleButtonTemplate({kind: 'danger', variant:'secondary', content: 'Danger button', ...args})}` - -export const TextButtons = (args) => html` -${SingleButtonTemplate({variant:'tertiary',content: 'Default text', ...args})} -${SingleButtonTemplate({kind:'neutral', variant:'tertiary',content: 'Neutral text', ...args})} -${SingleButtonTemplate({kind:'success',variant: 'tertiary', content: 'Success text', ...args})} -${SingleButtonTemplate({kind: 'danger', variant:'tertiary', content: 'Danger text', ...args})}` - - # Button Buttons allow users to take actions, and make choices with a single tap. @@ -120,25 +107,27 @@ Contained buttons ared used for main actions of the screens. Like a submit butto - {ContainedButtons.bind({})} + {ButtonTypes.bind({})} ### Outline Buttons -Outlined Buttons represent the important actions in the app. But not the primary ones. They work with all the variants. +Outline Buttons represent the important actions in the app. But not the primary ones. They work with all the variants. - - {OutlineButtons.bind({})} + + {ButtonTypes.bind({})} ### TextButtons +TBD + - - {TextButtons.bind({})} + + {ButtonTypes.bind({})} @@ -151,13 +140,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({})} @@ -168,7 +157,7 @@ Icon Only Buttons commonly used for toggle actions. (Ex.: add item to your favor - {Template.bind({})} + {ButtonTypes.bind({})} @@ -214,17 +203,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: 'tertiary', content: 'Tertiary 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({})} @@ -232,6 +223,8 @@ ${SingleButtonHoverTemplate({variant: 'tertiary', content: 'Tertiary Button', .. + + ## Reference From 3f0f95c228024276499f5c4fb73e3720ccb7e512 Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Tue, 4 Oct 2022 11:29:45 +0300 Subject: [PATCH 3/9] style(button): relocate style variables under button --- src/components/button/bl-button.css | 28 ++++++++++----------- src/components/button/bl-button.stories.mdx | 6 ++--- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index 5a9f6aec..c584177f 100644 --- a/src/components/button/bl-button.css +++ b/src/components/button/bl-button.css @@ -2,7 +2,9 @@ display: var(--bl-button-display, inline-block); max-width: 100%; position: relative; +} +.button { --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); @@ -15,9 +17,7 @@ --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 { display: flex; gap: var(--bl-button-margin-icon); justify-content: center; @@ -37,7 +37,7 @@ user-select: none; } -:host(:hover) { + .button:hover { --bl-button-bg-color: var(--bl-button-main-hover-color); --bl-button-border-color: var(--bl-button-main-hover-color); } @@ -48,7 +48,7 @@ text-overflow: ellipsis; } -:host([size='small']) { +:host([size='small']) .button { --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); @@ -56,7 +56,7 @@ --bl-button-height: var(--bl-size-xl); } -:host([size='large']) { +:host([size='large']) .button { --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); @@ -77,52 +77,52 @@ --bl-button-margin-icon: 0; } -:host([variant='secondary']) { +:host([variant='secondary']) .button { --bl-button-bg-color: transparent; --bl-button-content-color: var(--bl-button-main-color); } -:host([variant='tertiary']) { +:host([variant='tertiary']) .button{ --bl-button-content-color: var(--bl-button-main-color); --bl-button-border-color: transparent; --bl-button-bg-color: transparent; } -:host([kind='neutral']) { +:host([kind='neutral']) .button { --bl-button-main-color: var(--bl-color-secondary); --bl-button-main-hover-color: var(--bl-color-secondary-hover); } -:host([kind='success']) { +:host([kind='success']) .button { --bl-button-main-color: var(--bl-color-success); --bl-button-main-hover-color: var(--bl-color-success-hover); } -:host([kind='danger']) { +:host([kind='danger']) .button { --bl-button-main-color: var(--bl-color-danger); --bl-button-main-hover-color: var(--bl-color-danger-hover); } :host([disabled]) { cursor: not-allowed; +} +:host([disabled]) .button { --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 { pointer-events: none; text-decoration: none; } -:host([variant='secondary']:hover:not([disabled])) { +:host([variant='secondary']:hover:not([disabled])) .button { --bl-button-content-color: var(--bl-color-primary-background); --bl-button-bg-color: var(--bl-button-main-hover-color); } -:host([variant='tertiary']:hover:not([disabled])) { +:host([variant='tertiary']:hover:not([disabled])) .button { --bl-button-content-color: var(--bl-button-main-hover-color); --bl-button-bg-color: var(--bl-button-text-hover-color); } diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index c6d2b640..c541dd34 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -20,7 +20,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo }, kind: { options: ['default', 'neutral', 'success','danger'], - default: 'contained', + default: 'default', control: { type: 'select' } }, disabled: { @@ -113,7 +113,7 @@ Contained buttons ared used for main actions of the screens. Like a submit butto ### Outline Buttons -Outline Buttons represent the important actions in the app. But not the primary ones. They work with all the variants. +Outline Buttons represent the important actions in the app. But not the primary ones. They work with all the kinds. @@ -123,7 +123,7 @@ Outline Buttons represent the important actions in the app. But not the primary ### TextButtons -TBD +Text buttons are typically used for less important actions which also have all the kinds. From 469b6e3c7c01a116e80e978298ebe2b90ae2027a Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Tue, 4 Oct 2022 16:31:10 +0300 Subject: [PATCH 4/9] style(button): fix hover state on primary variant --- src/components/button/bl-button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index c584177f..9dea03c4 100644 --- a/src/components/button/bl-button.css +++ b/src/components/button/bl-button.css @@ -37,7 +37,7 @@ user-select: none; } - .button:hover { +:host(:hover) .button { --bl-button-bg-color: var(--bl-button-main-hover-color); --bl-button-border-color: var(--bl-button-main-hover-color); } From 1a8238597429c050ac566ee9e26a339b5604d113 Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Wed, 5 Oct 2022 00:47:04 +0300 Subject: [PATCH 5/9] fix(button): convert css variables to private --- src/components/button/bl-button.css | 110 ++++++++++++++-------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index 9dea03c4..e04df563 100644 --- a/src/components/button/bl-button.css +++ b/src/components/button/bl-button.css @@ -5,41 +5,41 @@ } .button { - --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); + --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) .button { - --bl-button-bg-color: var(--bl-button-main-hover-color); - --bl-button-border-color: var(--bl-button-main-hover-color); + --bg-color: var(--main-hover-color); + --border-color: var(--main-hover-color); } .label { @@ -49,19 +49,19 @@ } :host([size='small']) .button { - --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); + --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']) .button { - --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); + --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 { @@ -69,38 +69,38 @@ } :host ::slotted(bl-icon) { - font-size: var(--bl-button-icon-size); + font-size: var(--icon-size); } .has-icon:not(.has-content) { - --bl-button-padding-horizontal: var(--bl-button-padding-vertical); - --bl-button-margin-icon: 0; + --padding-horizontal: var(--padding-vertical); + --margin-icon: 0; } :host([variant='secondary']) .button { - --bl-button-bg-color: transparent; - --bl-button-content-color: var(--bl-button-main-color); + --bg-color: transparent; + --content-color: var(--main-color); } -:host([variant='tertiary']) .button{ - --bl-button-content-color: var(--bl-button-main-color); - --bl-button-border-color: transparent; - --bl-button-bg-color: transparent; +:host([variant='tertiary']) .button { + --content-color: var(--main-color); + --border-color: transparent; + --bg-color: transparent; } :host([kind='neutral']) .button { - --bl-button-main-color: var(--bl-color-secondary); - --bl-button-main-hover-color: var(--bl-color-secondary-hover); + --main-color: var(--bl-color-secondary); + --main-hover-color: var(--bl-color-secondary-hover); } :host([kind='success']) .button { - --bl-button-main-color: var(--bl-color-success); - --bl-button-main-hover-color: var(--bl-color-success-hover); + --main-color: var(--bl-color-success); + --main-hover-color: var(--bl-color-success-hover); } :host([kind='danger']) .button { - --bl-button-main-color: var(--bl-color-danger); - --bl-button-main-hover-color: var(--bl-color-danger-hover); + --main-color: var(--bl-color-danger); + --main-hover-color: var(--bl-color-danger-hover); } :host([disabled]) { @@ -108,21 +108,21 @@ } :host([disabled]) .button { - --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); + --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([variant='secondary']:hover:not([disabled])) .button { - --bl-button-content-color: var(--bl-color-primary-background); - --bl-button-bg-color: var(--bl-button-main-hover-color); + --content-color: var(--bl-color-primary-background); + --bg-color: var(--main-hover-color); } :host([variant='tertiary']:hover:not([disabled])) .button { - --bl-button-content-color: var(--bl-button-main-hover-color); - --bl-button-bg-color: var(--bl-button-text-hover-color); + --content-color: var(--main-hover-color); + --bg-color: var(--text-hover-color); } From f940327ee634815a83adaebf5c9301f3dbd2884d Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Wed, 5 Oct 2022 12:55:15 +0300 Subject: [PATCH 6/9] fix: change all button usages appwise --- src/components/alert/bl-alert.test.ts | 4 ++-- src/components/alert/bl-alert.ts | 7 ++++--- 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 +- 6 files changed, 13 insertions(+), 12 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` { 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 ` From c61f2e421edc4764f46059f713ad97f92bf59dae Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Wed, 5 Oct 2022 13:19:55 +0300 Subject: [PATCH 7/9] docs(button): improve storybook --- src/components/button/bl-button.stories.mdx | 31 ++++++++++----------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index c541dd34..6be71484 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -19,7 +19,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo control: { type: 'select' } }, kind: { - options: ['default', 'neutral', 'success','danger'], + options: ['default', 'neutral', 'success', 'danger'], default: 'default', control: { type: 'select' } }, @@ -100,33 +100,32 @@ We have 3 variants for each button: **Primary**, **Secondary** and **Tertiary**. -### Contained Buttons +### Primary Buttons - -Contained buttons ared used for main actions of the screens. Like a submit button in a form or main button of a dialog. +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`. - + {ButtonTypes.bind({})} -### Outline Buttons +### Secondary Buttons -Outline Buttons represent the important actions in the app. But not the primary ones. They work with all the kinds. +Secondary buttons represent the important actions in the app. But not the primary ones. They work with all the kinds. - + {ButtonTypes.bind({})} -### TextButtons +### Tertiary Buttons -Text buttons are typically used for less important actions which also have all the kinds. +Tertiary buttons are typically used for less important actions which also have all the kinds. - + {ButtonTypes.bind({})} @@ -145,7 +144,7 @@ To be able to use icon with button, you should give the name of icon to `icon` a - + {ButtonTypes.bind({})} @@ -189,7 +188,7 @@ If button has a limited width and a long text that can not fit in a single line, ## 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. @@ -209,13 +208,13 @@ ${SingleButtonHoverTemplate({kind: 'danger', content: 'Danger Button', ...args}) - + {HoverTemplate.bind({})} - + {HoverTemplate.bind({})} - + {HoverTemplate.bind({})} From 4ff2a1616f46e8c3b362c017ab3fb78ed3981dbc Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Wed, 5 Oct 2022 13:28:06 +0300 Subject: [PATCH 8/9] docs(button): fix typos --- src/components/button/bl-button.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index 6be71484..0f649cc4 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -181,7 +181,7 @@ 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({})} @@ -191,7 +191,7 @@ If button has a limited width and a long text that can not fit in a single line, Disable version of all buttons is the same. - + {SizesTemplate.bind({})} From 38c838a8f041f843119383bf45fb3c81ee0e3fce Mon Sep 17 00:00:00 2001 From: olkeoguz Date: Wed, 5 Oct 2022 16:07:58 +0300 Subject: [PATCH 9/9] fix(button): correct icon button selector --- src/components/button/bl-button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index e04df563..608ba00a 100644 --- a/src/components/button/bl-button.css +++ b/src/components/button/bl-button.css @@ -72,7 +72,7 @@ font-size: var(--icon-size); } -.has-icon:not(.has-content) { +:host .has-icon:not(.has-content) { --padding-horizontal: var(--padding-vertical); --margin-icon: 0; }