fix(button)!: button attributes refactored

src/components/button/bl-button.css

@@ -76,17 +76,17 @@
   --bl-button-margin-icon: 0;
 }
 
-:host([secondary]) {
+:host([variant='secondary']) {
   --bl-button-main-color: var(--bl-color-secondary);
   --bl-button-main-hover-color: var(--bl-color-secondary-hover);
 }
 
-:host([success]) {
+:host([variant='success']) {
   --bl-button-main-color: var(--bl-color-success);
   --bl-button-main-hover-color: var(--bl-color-success-hover);
 }
 
-:host([danger]) {
+:host([variant='danger']) {
   --bl-button-main-color: var(--bl-color-danger);
   --bl-button-main-hover-color: var(--bl-color-danger-hover);
 }
@@ -105,26 +105,26 @@
   text-decoration: none;
 }
 
-:host([text]) {
+:host([fill='text']) {
   --bl-button-content-color: var(--bl-button-main-color);
   --bl-button-border-color: transparent;
   --bl-button-bg-color: transparent;
 }
 
-:host([text]) .button {
+:host([fill='text']) .button {
   text-decoration: underline;
 }
 
-:host([outline]) {
+:host([fill='outline']) {
   --bl-button-bg-color: transparent;
   --bl-button-content-color: var(--bl-button-main-color);
 }
 
-:host([outline]:hover:not([disabled])) {
+:host([fill='outline']:hover:not([disabled])) {
   --bl-button-content-color: var(--bl-color-primary-background);
   --bl-button-bg-color: var(--bl-button-main-hover-color);
 }
 
-:host([text]:hover:not([disabled])) {
+:host([fill='text']:hover:not([disabled])) {
   --bl-button-content-color: var(--bl-button-main-hover-color);
 }

src/components/button/bl-button.stories.mdx

@@ -13,17 +13,15 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
         type: 'text'
       }
     },
-    primary: {
-      control: 'boolean'
-    },
-    secondary: {
-      control: 'boolean'
-    },
-    success: {
-      control: 'boolean'
+    variant: {
+      options: ['primary', 'secondary', 'success', 'danger'],
+      default: 'primary',
+      control: { type: 'select' }
     },
-    danger: {
-      control: 'boolean'
+    fill: {
+      options: ['contained', 'outline', 'text'],
+      default: 'contained',
+      control: { type: 'select' }
     },
     disabled: {
       control: 'boolean'
@@ -51,31 +49,27 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 />
 
 export const SingleButtonTemplate = (args) => html`<bl-button
-    ?primary=${args.primary}
-    ?secondary=${args.secondary}
-    ?success=${args.success}
-    ?danger=${args.danger}
-    ?outline=${args.outline}
-    ?disabled=${args.disabled}
-    ?text=${args.text}
+    variant=${ifDefined(args.variant)}
+    fill=${ifDefined(args.fill)}
     href=${ifDefined(args.href)}
     target=${ifDefined(args.target)}
     size=${ifDefined(args.size)}
     icon="${ifDefined(args.icon)}"
     label="${ifDefined(args.label)}"
+    ?disabled=${args.disabled}
     style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
       >${unsafeHTML(args.content)}</bl-button>`
 
 export const Template = (args) => html`
-${SingleButtonTemplate({primary: true, content: 'Primary Button', ...args})}
-${SingleButtonTemplate({secondary: true, content: 'Secondary Button', ...args})}
-${SingleButtonTemplate({success: true, content: 'Success Button', ...args})}
-${SingleButtonTemplate({danger: true, content: 'Danger Button', ...args})}`;
+${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})}`;
 
 export const ButtonTypesTemplate = (args) => html`
 ${SingleButtonTemplate({...args})}
-${SingleButtonTemplate({outline: true, ...args})}
-${SingleButtonTemplate({text: true, ...args})}`;
+${SingleButtonTemplate({fill: 'outline', ...args})}
+${SingleButtonTemplate({fill: 'text', ...args})}`;
 
 export const SizesTemplate = (args) => html`
 ${SingleButtonTemplate({size: 'large', ...args})}
@@ -84,63 +78,73 @@ ${SingleButtonTemplate({size: 'small', ...args})}`;
 
 export const VariousStylesTemplate = (args) => html`
 ${SingleButtonTemplate({...args})}
-${SingleButtonTemplate({outline: true, ...args})}
-${SingleButtonTemplate({text: true, ...args})}`;
+${SingleButtonTemplate({fill: 'outline', ...args})}
+${SingleButtonTemplate({fill: 'text', ...args})}`;
 
 # Button
 
 Buttons allow users to take actions, and make choices with a single tap.
 
 ### Usage
+
 * A button should contain at least one text, icon or both (text + icon).
 * The first letter of the word on the buttons is capitalized and the rest is lowercase.
 * The icons on the buttons are left aligned.
 * Button texts are limited to one line.
 
 ## Button Variants
+
 We have 4 variants for each button: **Primary**, **Secondary**, **Success** and **Danger**.
+
 <Canvas>
   <Story name="Variants">
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ## Button Types
+
 We have 3 types of buttons: **Contained** (Default), **Outline** and **Text**.
+
 <Canvas>
   <Story name="Types" args={{ content: 'Primary Button' }}>
     {ButtonTypesTemplate.bind({})}
   </Story>
 </Canvas>
 
 ### 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.
+
 <Canvas>
   <Story name="Contained Buttons">
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ### 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.
+
 <Canvas>
-  <Story name="Outline Buttons" args={{ outline: true }}>
+  <Story name="Outline Buttons" args={{ fill: 'outline' }}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ### Text Buttons
 TBD
 <Canvas>
-  <Story name="Text Buttons" args={{ text: true }}>
+  <Story name="Text Buttons" args={{ fill: 'text' }}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ## Icon Buttons
-To boost `UX`, you might want to add icons to your button. Because human brain recognize `icons` more easily than `text text`.
-Our icons are defined to be `left` of the default slot.
+
+To boost UX, you might want to add icons to your button. Because human brain recognize icons more easily than text.
+Our icons are defined to be left of the default slot.
 
 To be able to use icon with button, you should give the name of icon to `icon` attribute.
 
@@ -151,7 +155,7 @@ To be able to use icon with button, you should give the name of icon to `icon` a
 </Canvas>
 
 <Canvas>
-  <Story name="Text Buttons With Icon" args={{ text: true, href: "https://trendyol.com", content: 'Save', icon: 'info' }}>
+  <Story name="Text Buttons With Icon" args={{ fill: 'text', href: "https://trendyol.com", content: 'Save', icon: 'info' }}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -194,7 +198,9 @@ If button has a limited width and a long text that can not fit in a single line,
 </Canvas>
 
 ## Disabled buttons
+
 We have 2 types of disabled buttons: **Contained** and **Text**. Disable version of Contained and Outline buttons is the same.
+
 <Canvas columns={1}>
   <Story name="Disabled buttons" args={{ disabled: true, content: 'Passive Button' }}>
     {SizesTemplate.bind({})}

src/components/button/bl-button.test.ts

@@ -1,6 +1,5 @@
 import { assert, expect, fixture, elementUpdated, oneEvent, html } from '@open-wc/testing';
 import BlButton from './bl-button';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 import type typeOfBlButton from './bl-button';
 
@@ -34,8 +33,9 @@ describe('bl-button', () => {
   xdescribe('Accessibility tests', () => {
     variants.forEach(variant => {
       it(`should be accessible when attribute is "${variant}"`, async () => {
-        const htmlStr = `<bl-button ${variant}>Button</bl-button>`;
-        const el = await fixture<typeOfBlButton>(html`${unsafeHTML(htmlStr)}`);
+        const el = await fixture<typeOfBlButton>(
+          `<bl-button variant=${variant}>Button</bl-button>`
+        );
         await expect(el).to.be.accessible();
       });
     });

src/components/button/bl-button.ts

@@ -6,26 +6,15 @@ 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 ButtonFill = 'contained' | 'outline' | 'text';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export type TargetType = '_blank' | '_parent' | '_self' | '_top';
 
 /**
  * @tag bl-button
  * @summary Baklava Button component
  *
- * @property {boolean} primary - Sets variant to primary
- * @property {boolean} secondary - Sets variant to secondary
- * @property {boolean} success - Sets variant to success
- * @property {boolean} danger - Sets variant to danger
- * @property {boolean} outline - Sets button version to outline
- * @property {boolean} text - Sets the button version to text
- * @property {boolean} disabled - Disables the button
- * @property {string} size - Sets the button size
- * @property {string} icon - Sets the name of the icon
- * @property {string} href - Sets link of the button
- * @property {string} target - Sets button target (should be defined with href)
- * @property {string} label - Sets the accessibility text for the button. Use it with icon-only buttons.
- *
  * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.
  *
  */
@@ -35,39 +24,51 @@ export default class BlButton extends LitElement {
     return [style];
   }
 
-  @property({ type: Boolean, reflect: true })
-  primary = false;
-
-  @property({ type: Boolean, reflect: true })
-  secondary = false;
-
-  @property({ type: Boolean, reflect: true })
-  success = false;
-
-  @property({ type: Boolean, reflect: true })
-  danger = false;
-
-  @property({ type: Boolean, reflect: true })
-  outline = false;
+  /**
+   * Sets the button variant
+   */
+  @property({ type: String, reflect: true })
+  variant: ButtonVariant = 'primary';
 
-  @property({ type: Boolean, reflect: true })
-  text = false;
+  /**
+   * Sets the button fill
+   */
+  @property({ type: String, reflect: true })
+  fill: ButtonFill = 'contained';
 
+  /**
+   * Sets the button size
+   */
   @property({ type: String, reflect: true })
   size: ButtonSize = 'medium';
 
+  /**
+   * Sets the button label. Used for accessibility.
+   */
   @property({ type: String })
   label: string;
 
+  /**
+   * Sets button as disabled
+   */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Set link url. If set, button will be rendered as anchor tag.
+   */
   @property({ type: String })
   href?: string;
 
+  /**
+   * Sets the icon name. Shows icon with bl-icon component
+   */
   @property({ type: String })
   icon?: string;
 
+  /**
+   * Sets the anchor target. Used when `href` is set.
+   */
   @property({ type: String })
   target?: TargetType = '_self';
 

src/components/tooltip/bl-tooltip.stories.mdx

@@ -26,7 +26,7 @@ export const tooltipOpener = async ({ canvasElement }) => {
 
 export const IconTriggerTemplate = (args) => html`
 <bl-tooltip placement="${ifDefined(args.placement)}" style='--bl-tooltip-position:fixed'>
-  <bl-button slot="tooltip-trigger" icon="settings" text label="Settings" secondary></bl-button>
+  <bl-button slot="tooltip-trigger" icon="settings" fill="text" label="Settings" variant="secondary"></bl-button>
   Settings
 </bl-tooltip>`
 
@@ -39,7 +39,7 @@ export const ButtonTriggerTemplate = (args) => html`
 
 export const PlacementTemplate = (args) => html`
 <bl-tooltip placement="${ifDefined(args.placement)}" style="--bl-tooltip-position:fixed">
-  <bl-button slot="tooltip-trigger" small>${args.placement}</bl-button>
+  <bl-button slot="tooltip-trigger">${args.placement}</bl-button>
   You can use this section to cancel your order.
 </bl-tooltip>`