fix: focus ring over background transparent

Animate underline text for link buttons.
Endava · Mar 17, 2023 · bd8920c · bd8920c
1 parent 585cab1
commit bd8920c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/packages/bee-q/src/components/button/bq-button.tsx b/packages/bee-q/src/components/button/bq-button.tsx
@@ -177,7 +177,7 @@ export class BqButton {
     return (
       <TagElem
         class={{
-          'bq-button': true,
+          'bq-button group': true,
           [`bq-button--${this.appearance}`]: true,
           [`${this.variant}`]: true,
           [`${this.size}`]: true,
@@ -202,7 +202,11 @@ export class BqButton {
         <span class="bq-button__prefix" ref={(spanElem) => (this.prefixElem = spanElem)} part="prefix">
           <slot name="prefix" onSlotchange={this.handleSlotChange} />
         </span>
-        <span class="bq-button__label" part="label">
+        <span
+          // The group-hover will only have effect when `this.type="link"` to animate the underline below the link text
+          class="bq-button__label group-hover:before:scale-x-100 group-hover:before:bg-stroke-brand-hover group-active:before:bg-stroke-brand-active"
+          part="label"
+        >
           <slot />
         </span>
         <span class="bq-button__suffix" ref={(spanElem) => (this.suffixElem = spanElem)} part="suffix">

diff --git a/packages/bee-q/src/components/button/scss/bq-button.scss b/packages/bee-q/src/components/button/scss/bq-button.scss
@@ -5,29 +5,11 @@
 @import './bq-button.variables';
 
 @layer components {
-  /* SVG spinner icon animation */
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes loading--spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
   // Common button base style
-
   .bq-button {
     @apply box-border flex cursor-[inherit] items-center justify-center rounded-m border-2 border-solid border-transparent text-m font-medium leading-large;
-    @apply transition-[background-color,border-color,box-shadow] duration-200;
-    @apply active:outline-none disabled:cursor-not-allowed;
+    @apply transition-[background-color,border-color,box-shadow] duration-300;
+    @apply disabled:cursor-not-allowed;
     @apply focus-visible:focus;
   }
 }
@@ -81,13 +63,17 @@
 .bq-button--link {
   @apply bg-transparent text-text-brand no-underline;
   // Link `HOVER` state
-  @apply hover:text-text-brand-hover hover:underline hover:decoration-ui-brand-hover hover:underline-offset-4;
+  @apply hover:text-text-brand-hover;
   // Link `ACTIVE` state
-  @apply active:text-text-brand-active active:hover:decoration-ui-brand-active;
+  @apply active:text-text-brand-active;
 
   &.disabled {
     @apply cursor-not-allowed text-text-brand-disabled no-underline;
   }
+
+  .bq-button__label {
+    @apply relative before:absolute before:bottom-0 before:block before:h-[2px] before:w-full before:scale-x-0 before:transition-transform before:duration-300 before:content-empty;
+  }
 }
 
 .bq-button--text {
@@ -156,5 +142,5 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-button__loader {
-  @apply absolute animate-[loading--spin_1s_infinite_linear];
+  @apply absolute animate-spin;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -418,15 +418,11 @@ module.exports = {
          *  }
          */
         '.focus': {
+          '--tw-ring-width': '2px',
           '--tw-ring-offset-width': '1px',
           '--tw-ring-color': theme('colors.focus'),
-          outline: `var(--tw-ring-offset-width) solid ${theme('colors.transparent')}`,
+          outline: `var(--tw-ring-width) solid ${theme('colors.focus')}`,
           outlineOffset: 'var(--tw-ring-offset-width)',
-          boxShadow: `
-            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
-            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color),
-            var(--tw-shadow,0 0 #0000)
-          `,
         },
       });
     }),