Fix: lots of small fixes + use focus-visible instead of FocusFixer pattern

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react-vite';
 import '../src/styles/reset.scss';
-import '../src/styles/colors.scss';
+import '../src/styles/defaults.scss';
 
 const preview: Preview = {
   parameters: {

README.md

@@ -174,18 +174,18 @@ Define custom variants in your theme.scss:
 .KibaButton {
   // Default button styles are inherited from ui-react
 
-  &.primary > .KibaButtonFocusFixer {
+  &.primary {
     background-color: var(--kiba-color-brand-primary);
     color: var(--kiba-color-text-on-brand);
   }
 
-  &.secondary > .KibaButtonFocusFixer {
+  &.secondary {
     background-color: transparent;
     border: 1px solid var(--kiba-color-brand-primary);
     color: var(--kiba-color-brand-primary);
   }
 
-  &.destructive > .KibaButtonFocusFixer {
+  &.destructive {
     background-color: var(--kiba-color-error);
     color: white;
   }

src/atoms/button/component.tsx

@@ -86,40 +86,35 @@ export function Button({
       tabIndex={props.tabIndex || 0}
       target={props.target ? (innerTargetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       type={buttonType || 'button'}
-      style={props.style}
+      style={{
+        ...props.style,
+        // @ts-ignore
+        alignItems: childAlignment,
+        // @ts-ignore
+        justifyContent: contentAlignment,
+      }}
     >
-      <span
-        className='KibaButtonFocusFixer'
-        tabIndex={-1}
-        style={{
-          // @ts-ignore
-          alignItems: childAlignment,
-          // @ts-ignore
-          justifyContent: contentAlignment,
-        }}
-      >
-        {!props.isLoading && props.iconLeft && (
-          <React.Fragment>
-            {props.iconLeft}
-            <Spacing variant={iconGutter} />
-          </React.Fragment>
-        )}
-        {!props.isLoading && (
-          <span className={getClassName('KibaButton-text', isTextFullWidth && 'fullWidth')}>{props.text}</span>
-        )}
-        {!props.isLoading && props.iconRight && (
-          <React.Fragment>
-            <Spacing variant={iconGutter} />
-            {props.iconRight}
-          </React.Fragment>
-        )}
-        {props.isLoading && (
-          <LoadingSpinner
-            id={props.id && `${props.id}-loading-spinner`}
-            variant='light-small'
-          />
-        )}
-      </span>
+      {!props.isLoading && props.iconLeft && (
+        <React.Fragment>
+          {props.iconLeft}
+          <Spacing variant={iconGutter} />
+        </React.Fragment>
+      )}
+      {!props.isLoading && (
+        <span className={getClassName('KibaButton-text', isTextFullWidth && 'fullWidth')}>{props.text}</span>
+      )}
+      {!props.isLoading && props.iconRight && (
+        <React.Fragment>
+          <Spacing variant={iconGutter} />
+          {props.iconRight}
+        </React.Fragment>
+      )}
+      {props.isLoading && (
+        <LoadingSpinner
+          id={props.id && `${props.id}-loading-spinner`}
+          variant='light-small'
+        />
+      )}
     </Component>
   );
 }

src/atoms/button/documentation.mdx

@@ -65,25 +65,23 @@ Combine variants: `variant="primary-large"` or `variant="card-primary"`
 ```css
 @layer kiba-theme {
   .KibaButton {
-    > .KibaButtonFocusFixer {
-      background-color: transparent;
-      border-radius: var(--kiba-border-radius);
-      border-width: 2px;
-      color: var(--kiba-color-brand-primary);
-      font-weight: 600;
-      padding: var(--kiba-padding) var(--kiba-padding-wide);
-    }
-
-    &:hover > .KibaButtonFocusFixer {
+    background-color: transparent;
+    border-radius: var(--kiba-border-radius);
+    border-width: 2px;
+    color: var(--kiba-color-brand-primary);
+    font-weight: 600;
+    padding: var(--kiba-padding) var(--kiba-padding-wide);
+
+    &:hover {
       background-color: var(--kiba-color-brand-primary-clear90);
     }
 
-    &.primary > .KibaButtonFocusFixer {
+    &.primary {
       background-color: var(--kiba-color-brand-primary);
       color: var(--kiba-color-text-on-brand);
     }
 
-    &.disabled > .KibaButtonFocusFixer {
+    &.disabled {
       background-color: var(--kiba-color-disabled-light50);
       color: var(--kiba-color-disabled-text);
       cursor: not-allowed;

src/atoms/button/styles.scss

@@ -6,6 +6,7 @@
   .KibaButton {
     display: inline-flex;
     flex-direction: row;
+    align-items: center;
     outline: none;
     background-clip: border-box;
     position: relative;
@@ -21,17 +22,6 @@
     &.disabled { cursor: not-allowed; }
     &.isLoading { cursor: default; }
 
-    > .KibaButtonFocusFixer {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      background-clip: border-box;
-      position: relative;
-      box-sizing: border-box;
-    }
-
     .KibaButton-text {
       width: auto;
       &.fullWidth { width: 100%; }
@@ -41,82 +31,79 @@
 
 @layer kiba-theme {
   .KibaButton {
+    @include text.default;
+    @include box.default;
+    @include box.focusable;
     @include transition;
+    padding: $padding $padding-wide;
+    border-width: 2px;
+    color: $color-brand-primary;
+    font-weight: 600;
+    text-align: center;
 
-    > .KibaButtonFocusFixer {
-      @include text.default;
-      @include box.default;
-      @include box.focusable;
-      padding: $padding $padding-wide;
-      border-width: 2px;
-      color: $color-brand-primary;
-      font-weight: 600;
-      text-align: center;
-    }
-
-    &:hover > .KibaButtonFocusFixer {
+    &:hover {
       background-color: $color-brand-primary-clear90;
     }
 
-    &:active > .KibaButtonFocusFixer {
+    &:active {
       background-color: $color-brand-primary-clear80;
     }
 
-    &:focus > .KibaButtonFocusFixer {
+    &:focus-visible {
       border-color: $color-background-dark50;
     }
 
-    &:visited > .KibaButtonFocusFixer {
+    &:visited {
       color: $color-brand-primary;
     }
 
     // Disabled state
-    &.disabled > .KibaButtonFocusFixer {
+    &.disabled {
       background-color: $color-disabled-light50;
       color: $color-disabled-text;
     }
 
-    &.disabled:hover > .KibaButtonFocusFixer,
-    &.disabled:active > .KibaButtonFocusFixer,
-    &.disabled:focus > .KibaButtonFocusFixer {
+    &.disabled:hover,
+    &.disabled:active,
+    &.disabled:focus-visible {
       background-color: $color-disabled-light50;
       color: $color-disabled-text;
     }
 
     // Primary variant
-    &.primary > .KibaButtonFocusFixer {
+    &.primary {
       background-color: $color-brand-primary;
       border-color: $color-brand-primary;
       color: $color-text-on-brand;
     }
 
-    &.primary:hover > .KibaButtonFocusFixer {
+    &.primary:hover {
       background-color: $color-brand-secondary;
     }
 
-    &.primary:active > .KibaButtonFocusFixer {
+    &.primary:active {
       background-color: var(--kiba-color-brand-secondary-dark10, #158040);
     }
 
     // Secondary variant
-    &.secondary > .KibaButtonFocusFixer {
+    &.secondary {
       border-color: $color-brand-primary;
     }
 
     // Large variant
-    &.large > .KibaButtonFocusFixer {
+    &.large {
       padding: $padding-wide $padding-wide2;
       font-size: 1.2em;
     }
 
     // Small variant
-    &.small > .KibaButtonFocusFixer {
+    &.small {
       padding: $padding-narrow $padding;
       font-size: 0.8em;
     }
 
     // Card variant
-    &.card > .KibaButtonFocusFixer {
+    &.card {
       box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15);
       margin: 0px 4px 12px 4px;
     }

src/atoms/iconButton/component.tsx

@@ -48,6 +48,7 @@ export function IconButton({
     <ButtonComponent
       id={props.id}
       className={getClassName(IconButton.displayName, props.isFullWidth && 'fullWidth', props.isFullHeight && 'fullHeight', !isEnabled && 'disabled', className, ...(variant?.split('-') || []))}
+      style={props.style}
       onClick={onClicked}
       disabled={!isEnabled}
       aria-label={label}
@@ -58,9 +59,7 @@ export function IconButton({
       target={props.target ? (targetShouldOpenSameTab ? '_self' : '_blank') : undefined}
       type={props.target ? undefined : (props.buttonType || 'button')}
     >
-      <span className='KibaIconButtonFocusFixer' tabIndex={-1}>
-        {props.icon}
-      </span>
+      {props.icon}
     </ButtonComponent>
   );
 }

src/atoms/iconButton/documentation.mdx

@@ -54,18 +54,16 @@ import * as Stories from './documentation.stories';
 ```css
 @layer kiba-theme {
   .KibaIconButton {
-    > .KibaIconButtonFocusFixer {
-      border-radius: var(--kiba-border-radius);
-      color: var(--kiba-color-brand-primary);
-      padding: var(--kiba-padding);
-    }
+    border-radius: var(--kiba-border-radius);
+    color: var(--kiba-color-brand-primary);
+    padding: var(--kiba-padding);
 
-    &.primary > .KibaIconButtonFocusFixer {
+    &.primary {
       background-color: var(--kiba-color-brand-primary);
       color: var(--kiba-color-text-on-brand);
     }
 
-    &:hover > .KibaIconButtonFocusFixer {
+    &:hover {
       background-color: var(--kiba-color-brand-primary-clear90);
     }
   }