fix(ui-library): add missing events from icon/text buttons (#486)

deven-org · Nov 22, 2023 · d3819d8 · d3819d8
1 parent 3c8143d
commit d3819d8
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 164 deletions.
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts
@@ -7,70 +7,47 @@ const { IconButton } = componentTokens.Actions;
 const { Global } = semanticTokens;
 
 export const styleCustom = typeSafeNestedCss`
-  .focus-layer {
-    position: absolute;
-    inset: 0;
-    outline-color: ${Global.FocusBorder.color};
-    outline-style: ${Global.FocusBorder.style};
-    outline-width: ${Global.FocusBorder.width};
-  }
-
   .blr-icon-button {
-    all: inital;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    display: inline-flex;
     cursor: pointer;
     position: relative;
 
+    &:focus {
+      outline-color: ${Global.FocusBorder.color};
+      outline-style: ${Global.FocusBorder.style};
+      outline-width: ${Global.FocusBorder.width};
+    }
+
     &.xs {
       padding: ${IconButton.Container.Padding.XS};
       border-radius: ${IconButton.Container.BorderRadius.XS};
-
-      & > .focus-layer {
-        border-radius: ${IconButton.Container.BorderRadius.XS};
-      }
     }
 
     &.sm {
       padding: ${IconButton.Container.Padding.SM};
       border-radius: ${IconButton.Container.BorderRadius.SM};
-
-      & > .focus-layer {
-        border-radius: ${IconButton.Container.BorderRadius.SM};
-      }
     }
 
     &.md {
       padding: ${IconButton.Container.Padding.MD};
       border-radius: ${IconButton.Container.BorderRadius.MD};
-
-      & > .focus-layer {
-        border-radius: ${IconButton.Container.BorderRadius.MD};
-      }
     }
 
     &.lg {
       padding: ${IconButton.Container.Padding.LG};
       border-radius: ${IconButton.Container.BorderRadius.LG};
-
-      & > .focus-layer {
-        border-radius: ${IconButton.Container.BorderRadius.LG};
-      }
     }
 
     &.xl {
       padding: ${IconButton.Container.Padding.XL};
       border-radius: ${IconButton.Container.BorderRadius.XL};
-
-      & > .focus-layer {
-        border-radius: ${IconButton.Container.BorderRadius.XL};
-      }
     }
   }
-  
+
   .loading {
-    & > .icon {
+    & > blr-icon {
       visibility: hidden;
     }
   }

diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
@@ -40,11 +40,13 @@ const args: BlrIconButtonType = {
   arialabel: 'Button',
   onClick: () => console.log('onClick'),
   onBlur: () => console.log('onBlur'),
+  onFocus: () => console.log('onFocus'),
   icon: 'blr360',
   loading: false,
   disabled: false,
   buttonId: 'button-id',
   loadingStatus: 'Loading',
+  innerTabIndex: 1,
 };
 
 BlrIconButton.args = args;
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -1,7 +1,6 @@
-/* eslint-disable no-console */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
 import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
@@ -23,45 +22,28 @@ export class BlrIconButton extends LitElement {
   @property() arialabel?: string;
   @property() icon?: SizelessIconType;
   @property() onClick?: HTMLButtonElement['onclick'];
+  @property() onFocus?: HTMLButtonElement['onfocus'];
   @property() onBlur?: HTMLButtonElement['onblur'];
   @property() loading?: boolean;
   @property() disabled!: boolean;
   @property() buttonId?: string;
   @property() variant: ActionVariantType = 'primary';
   @property() size?: FormSizesType = 'md';
   @property() loadingStatus!: string;
-
+  @property() innerTabIndex?: number = 0;
   @property() theme: ThemeType = 'Light';
 
-  @state() protected focused = false;
-
-  protected handleFocus = () => {
-    console.log('focused');
-    this.focused = true;
-  };
-
-  protected handleBlur = () => {
-    console.log('blurred');
-    this.focused = false;
-  };
-
   protected render() {
     if (this.size) {
       const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
 
       const classes = classMap({
-        [`${this.variant}`]: this.variant,
-        [`${this.size}`]: this.size,
+        [this.variant]: this.variant,
+        [this.size]: this.size,
         disabled: this.disabled,
-        loading: this.loading || false,
-      });
-
-      const iconClasses = classMap({
-        icon: true,
+        loading: this.loading ?? false,
       });
 
-      const loaderVariant = determineLoaderVariant(this.variant);
-
       const loaderSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Action',
@@ -77,26 +59,25 @@ export class BlrIconButton extends LitElement {
         'Icon',
       ]).toLowerCase() as SizesType;
 
-      return html`<style>
-          ${dynamicStyles.map((style) => style)}
+      return html`
+        <style>
+          ${dynamicStyles}
         </style>
-
         <span
           aria-label=${this.arialabel || nothing}
           class="blr-semantic-action blr-icon-button ${classes}"
-          @click=${this.onClick}
           id=${this.buttonId || nothing}
-          tabindex=${this.disabled ? nothing : '0'}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          role=${this.disabled ? nothing : 'button'}
+          tabindex=${this.disabled ? nothing : this.innerTabIndex}
+          @click=${this.onClick}
           @keydown=${this.onClick}
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+          role=${this.disabled ? nothing : 'button'}
         >
-          ${this.focused ? html`<span class="focus-layer"></span>` : nothing}
           ${this.loading
             ? BlrLoaderRenderFunction({
                 size: loaderSizeVariant,
-                variant: loaderVariant,
+                variant: determineLoaderVariant(this.variant),
                 loadingStatus: this.loadingStatus,
                 theme: this.theme,
               })
@@ -105,9 +86,9 @@ export class BlrIconButton extends LitElement {
             icon: calculateIconName(this.icon, iconSizeVariant),
             size: iconSizeVariant,
             hideAria: true,
-            classMap: iconClasses,
           })}
-        </span>`;
+        </span>
+      `;
     }
   }
 }

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
@@ -1,83 +1,59 @@
 import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
-
 import { componentTokens } from "../../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
 import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
 
 const { TextButton } = componentTokens.Actions;
 const { Global } = semanticTokens;
 
 export const styleCustom = typeSafeNestedCss`
-  .focus-layer {
-    position: absolute;
-    inset: 0;
-    outline-color: ${Global.FocusBorder.color};
-    outline-style: ${Global.FocusBorder.style};
-    outline-width: ${Global.FocusBorder.width};
-  }
-
   .blr-text-button {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    display: inline-flex;
     cursor: pointer;
     position: relative;
-    
+
+    &:focus {
+      outline-color: ${Global.FocusBorder.color};
+      outline-style: ${Global.FocusBorder.style};
+      outline-width: ${Global.FocusBorder.width};
+    }
+
     &.xs {
       gap: ${TextButton.Container.ItemSpacing.XS};
       padding: ${TextButton.Container.Padding.XS};
       border-radius: ${TextButton.Container.BorderRadius.XS};
-
-      & > .focus-layer {
-        border-radius: ${TextButton.Container.BorderRadius.XS};
-      }
     }
 
     &.sm {
       gap: ${TextButton.Container.ItemSpacing.SM};
       padding: ${TextButton.Container.Padding.SM};
       border-radius: ${TextButton.Container.BorderRadius.SM};
-
-      & > .focus-layer {
-        border-radius: ${TextButton.Container.BorderRadius.SM};
-      }
     }
 
     &.md {
       gap: ${TextButton.Container.ItemSpacing.MD};
       padding: ${TextButton.Container.Padding.MD};
       border-radius: ${TextButton.Container.BorderRadius.MD};
-
-      & > .focus-layer {
-        border-radius: ${TextButton.Container.BorderRadius.MD};
-      }
     }
 
     &.lg {
       gap: ${TextButton.Container.ItemSpacing.LG};
       padding: ${TextButton.Container.Padding.LG};
       border-radius: ${TextButton.Container.BorderRadius.LG};
-
-      & > .focus-layer {
-        border-radius: ${TextButton.Container.BorderRadius.LG};
-      }
     }
 
     &.xl {
       gap: ${TextButton.Container.ItemSpacing.XL};
       padding: ${TextButton.Container.Padding.XL};
       border-radius: ${TextButton.Container.BorderRadius.XL};
-
-      & > .focus-layer {
-        border-radius: ${TextButton.Container.BorderRadius.XL};
-      }
     }
   }
 
   .loading {
-    & > .icon,
+    & > blr-icon,
     & > .label {
       visibility: hidden;
     }
   }
-
 `;
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
@@ -46,13 +46,15 @@ const args: BlrTextButtonType = {
   label: 'Button',
   onClick: () => console.log('onClick'),
   onBlur: () => console.log('onBlur'),
+  onFocus: () => console.log('onFocus'),
   hasIcon: true,
   iconPosition: 'leading',
   icon: 'blr360',
   loading: false,
   disabled: false,
   buttonId: 'button-id',
   loadingStatus: 'Loading',
+  innerTabIndex: 1,
 };
 
 BlrTextButton.args = args;