Feat/BOOK-293 button adjustments

* feat(BOOK-293): Adjusted padding of the buttons to match Figma design
* feat(BOOK-293): Updated variants for IconButton
* feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color
* feat(BOOK-293): Replaced buttons inside booking widget

Approved-by: Christel Westerberg

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -29,8 +29,7 @@ const meta: Meta<typeof Button> = {
           summary: buttonConfig.defaultVariants.variant,
         },
         type: {
-          summary: 'string',
-          detail: Object.keys(buttonConfig.variants.variant).join(' | '),
+          summary: Object.keys(buttonConfig.variants.variant).join(' | '),
         },
       },
     },
@@ -39,8 +38,7 @@ const meta: Meta<typeof Button> = {
       options: Object.keys(buttonConfig.variants.color),
       table: {
         type: {
-          summary: 'string',
-          detail: Object.keys(buttonConfig.variants.color).join(' | '),
+          summary: Object.keys(buttonConfig.variants.color).join(' | '),
         },
         defaultValue: {
           summary: buttonConfig.defaultVariants.color,
@@ -52,8 +50,7 @@ const meta: Meta<typeof Button> = {
       options: Object.keys(buttonConfig.variants.size),
       table: {
         type: {
-          summary: 'string',
-          detail: Object.keys(buttonConfig.variants.size).join(' | '),
+          summary: Object.keys(buttonConfig.variants.size).join(' | '),
         },
         defaultValue: {
           summary: buttonConfig.defaultVariants.size,

packages/design-system/lib/components/Button/button.module.css

@@ -21,23 +21,28 @@
   &:focus-visible {
     outline: 2px solid var(--Border-Interactive-Focus);
     outline-offset: 2px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border: 2px solid var(--Border-Inverted);
+      border-radius: inherit;
+      pointer-events: none;
+    }
   }
 }
 
-.color-inverted:focus-visible {
-  outline-color: var(--Border-Inverted);
-}
-
 .size-large {
-  padding: var(--Space-x2) var(--Space-x3);
+  padding: calc(var(--Space-x2) - 2px) var(--Space-x3); /* Adjust for 2px border */
 }
 
 .size-medium {
-  padding: var(--Space-x15) var(--Space-x2);
+  padding: calc(var(--Space-x15) - 2px) var(--Space-x2); /* Adjust for 2px border */
 }
 
 .size-small {
-  padding: 10px var(--Space-x2);
+  padding: var(--Space-x1) var(--Space-x2); /* Adjust for 2px border */
 }
 
 .variant-primary {
@@ -60,17 +65,6 @@
     }
   }
 
-  /* This variant is able to be on top of dark background colors, 
-  so we need to create an illusion that it also has an inverted border on focus */
-  &:not(.color-inverted):focus-visible::before {
-    content: '';
-    position: absolute;
-    inset: -4px;
-    border: 2px solid var(--Border-Inverted);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-
   &[data-disabled] {
     background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
     border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
@@ -103,6 +97,14 @@
     border-color: var(--Component-Button-Inverted-Border-Disabled);
     color: var(--Component-Button-Inverted-On-fill-Disabled);
   }
+
+  &:focus-visible {
+    outline-color: var(--Border-Inverted);
+
+    &::before {
+      border-color: var(--Border-Interactive-Focus);
+    }
+  }
 }
 
 .variant-secondary {
@@ -150,6 +152,14 @@
     border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
   }
+
+  &:focus-visible {
+    outline-color: var(--Border-Inverted);
+
+    &::before {
+      border-color: var(--Border-Interactive-Focus);
+    }
+  }
 }
 
 .variant-tertiary {
@@ -229,6 +239,10 @@
 .variant-text.no-wrapping {
   padding: var(--Space-x025) 0;
   border-width: 0;
+
+  &:focus-visible {
+    outline-offset: 4px;
+  }
 }
 
 .variant-text.color-inverted {
@@ -246,6 +260,14 @@
   &[data-disabled] {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
   }
+
+  &:focus-visible {
+    outline-color: var(--Border-Inverted);
+
+    &::before {
+      border-color: var(--Border-Interactive-Focus);
+    }
+  }
 }
 
 .spinnerWrapper {