feat(storybook): use outline instead of border (#1137)

* feat(storybook): use outline instead of border * feat(ui): add offset * fix(storybook): adjust outline * fix(storybook): adjust outline * fix(storybook): wip * fix(storybook): wip * fix(storybook): wip * fix(storybook): wip
deven-org · Aug 1, 2024 · a20c43c · a20c43c
1 parent 60e24e3
commit a20c43c
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 87 deletions.
diff --git a/packages/ui-library/src/components/counter/index.css.ts b/packages/ui-library/src/components/counter/index.css.ts
@@ -24,6 +24,7 @@ export const staticStyles = css`
           font-weight: ${counter.text.typography.sm.fontWeight};
           font-size: ${counter.text.typography.sm.fontSize};
           line-height: ${counter.text.typography.sm.lineHeight};
+          outline-offset: calc(${counter.container.borderwidth.sm} * -1);
         }
 
         &.md {
@@ -35,6 +36,7 @@ export const staticStyles = css`
           font-weight: ${counter.text.typography.md.fontWeight};
           font-size: ${counter.text.typography.md.fontSize};
           line-height: ${counter.text.typography.md.lineHeight};
+          outline-offset: calc(${counter.container.borderwidth.md} * -1);
         }
 
         &.lg {
@@ -46,6 +48,7 @@ export const staticStyles = css`
           font-weight: ${counter.text.typography.lg.fontWeight};
           font-size: ${counter.text.typography.lg.fontSize};
           line-height: ${counter.text.typography.lg.lineHeight};
+          outline-offset: calc(${counter.container.borderwidth.lg} * -1);
         }
 
         &.error {

diff --git a/packages/ui-library/src/components/input-field-number/index.css.ts b/packages/ui-library/src/components/input-field-number/index.css.ts
@@ -113,11 +113,13 @@ export const staticSemanticStyles = css`
         box-sizing: border-box;
         width: 100%;
         outline-width: ${inputfield.container.border.default.rest.width};
+        outline-offset: calc(${inputfield.container.border.default.rest.width} * -1);
         outline-style: ${inputfield.container.border.default.rest.style};
         outline-color: ${inputfield.container.border.default.rest.color};
         border-radius: ${inputfield.container.borderradius};
 
         &:focus-within {
+          outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           outline-width: ${inputfield.container.border.default.focus.width};
           outline-style: ${inputfield.container.border.default.focus.style};
           outline-color: ${inputfield.container.border.default.focus.color};
@@ -273,13 +275,13 @@ export const staticComponentStyles = css`
             width: ${StepperButton.Container.Width.SM};
           }
         }
-  
+
         &.md {
           & > .custom-stepper-button {
             width: ${StepperButton.Container.Width.MD};
           }
         }
-  
+
         &.lg {
           & > .custom-stepper-button {
             width: ${StepperButton.Container.Width.LG};
@@ -360,12 +362,12 @@ export const staticComponentStyles = css`
 
         &:hover:not(:disabled) {
           background-color: ${StepperButton.Container.BackgroundColor.Hover};
-          color: ${StepperButton.Icon.IconColor.Hover}
+          color: ${StepperButton.Icon.IconColor.Hover};
         }
 
         &:active:not(:disabled) {
           background-color: ${StepperButton.Container.BackgroundColor.Pressed};
-          color: ${StepperButton.Icon.IconColor.Pressed}
+          color: ${StepperButton.Icon.IconColor.Pressed};
         }
 
         &:disabled {

diff --git a/packages/ui-library/src/components/input-field-text/index.css.ts b/packages/ui-library/src/components/input-field-text/index.css.ts
@@ -171,6 +171,7 @@ export const styleCustom = css`
       }
 
       .blr-input-wrapper.${theme} {
+        outline-offset: calc(${inputfield.container.border.default.rest.width} * -1);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -203,12 +204,13 @@ export const styleCustom = css`
         }
 
         &.focus {
+          outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           outline: ${inputfield.container.border.default.focus.width} ${inputfield.container.border.default.focus.style}
             ${inputfield.container.border.default.focus.color};
           background-color: ${inputfield.container.bgcolor.default.focus};
         }
 
-        &.disabled { 
+        &.disabled {
           outline: ${inputfield.container.border.default.disabled.width} ${inputfield.container.border.default.disabled.style}
             ${inputfield.container.border.default.disabled.color};
           color: ${inputfield.userinput.textcolor.default.disabled};

diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts
@@ -322,22 +322,21 @@ export const Direction = () => {
  *The Radio Group component can display a label or no label.
  */
 
-export const HasGroupLabel = () =>
-  html`
-    <div class="wrapper">
-      ${BlrRadioGroup({
-        ...defaultParams,
-        hasLegend: true,
-        legend: 'With Group Label',
-      })}
-    </div>
-    <div class="wrapper">
-      ${BlrRadioGroup({
-        ...defaultParams,
-        hasLegend: false,
-      })}
-    </div>
-  `;
+export const HasGroupLabel = () => html`
+  <div class="wrapper">
+    ${BlrRadioGroup({
+      ...defaultParams,
+      hasLegend: true,
+      legend: 'With Group Label',
+    })}
+  </div>
+  <div class="wrapper">
+    ${BlrRadioGroup({
+      ...defaultParams,
+      hasLegend: false,
+    })}
+  </div>
+`;
 
 HasGroupLabel.story = { name: ' ' };
 

diff --git a/packages/ui-library/src/components/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts
@@ -51,7 +51,7 @@ describe('blr-radio-group', () => {
 
   it('has a size sm when "size" is set to "sm" ', async () => {
     const element = await fixture(
-      BlrRadioGroupRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, radioButtonsAsChildren)
+      BlrRadioGroupRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, radioButtonsAsChildren),
     );
 
     const radioGroup = querySelectorDeep('.blr-radio-group', element.getRootNode() as HTMLElement);
@@ -67,8 +67,8 @@ describe('blr-radio-group', () => {
           ...sampleParams,
           hasError: true,
         },
-        radioButtonsAsChildren
-      )
+        radioButtonsAsChildren,
+      ),
     );
 
     const radioGroup = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement);
@@ -84,8 +84,8 @@ describe('blr-radio-group', () => {
           ...sampleParams,
           hasError: false,
         },
-        radioButtonsAsChildren
-      )
+        radioButtonsAsChildren,
+      ),
     );
 
     const radioGroup = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement);
@@ -101,7 +101,7 @@ describe('blr-radio-group', () => {
         hasHint: false,
         hasError: true,
         errorIcon: undefined,
-      })
+      }),
     );
 
     const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement);

diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts
@@ -60,8 +60,8 @@ export class BlrRadioGroup extends LitElementCustom {
     const selectedRadio: BlrRadio | undefined = value
       ? target
       : target === this._selectedRadio && !value
-      ? undefined
-      : this._selectedRadio;
+        ? undefined
+        : this._selectedRadio;
 
     batch(() => {
       this._radioElements?.forEach((radio) => {
@@ -101,7 +101,7 @@ export class BlrRadioGroup extends LitElementCustom {
       item.sizeVariant = this.sizeVariant;
 
       this._radioCheckedSignalSubscriptionDisposers.push(
-        item.signals.checked.subscribe((value) => this.handleRadioCheckedSignal(item, value))
+        item.signals.checked.subscribe((value) => this.handleRadioCheckedSignal(item, value)),
       );
     });
   };

diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts
@@ -289,23 +289,22 @@ SizeVariant.story = { name: ' ' };
  * ### Checked
  * The Radio component can be checked or unchecked. The checked state indicates that the Radio component is selected or enabled. The unchecked state indicates that the Radio component is not selected. */
 
-export const Checked = () =>
-  html`
-    <div class="wrapper">
-      ${BlrRadio({
-        ...args,
-        checked: true,
-        label: 'Checked',
-      })}
-    </div>
-    <div class="wrapper">
-      ${BlrRadio({
-        ...args,
-        checked: false,
-        label: 'Unchecked',
-      })}
-    </div>
-  `;
+export const Checked = () => html`
+  <div class="wrapper">
+    ${BlrRadio({
+      ...args,
+      checked: true,
+      label: 'Checked',
+    })}
+  </div>
+  <div class="wrapper">
+    ${BlrRadio({
+      ...args,
+      checked: false,
+      label: 'Unchecked',
+    })}
+  </div>
+`;
 
 Checked.story = { name: ' ' };
 /**

diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts
@@ -68,6 +68,7 @@ export const staticStyles = css`
 
       .blr-form-select.${theme} {
         border-radius: ${inputfield.container.borderradius};
+        outline-offset: calc(${inputfield.container.border.default.rest.width} * -1);
         color: ${inputfield.userinput.textcolor.default.rest};
         background-color: ${inputfield.container.bgcolor.default.rest};
         outline: ${inputfield.container.border.default.rest.width} ${inputfield.container.border.default.rest.style}
@@ -109,6 +110,7 @@ export const staticStyles = css`
         &.focus {
           color: ${inputfield.userinput.textcolor.default.focus};
           background-color: ${inputfield.container.bgcolor.default.focus};
+          outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           border-color: ${inputfield.container.border.default.focus.color};
           outline: ${inputfield.container.border.default.focus.width} ${inputfield.container.border.default.focus.style}
             ${inputfield.container.border.default.focus.color};

diff --git a/packages/ui-library/src/components/tab-bar-item/index.ts b/packages/ui-library/src/components/tab-bar-item/index.ts
@@ -111,7 +111,7 @@ export class BlrTabBarItem extends LitElementCustom implements PublicReactivePro
                   },
                   {
                     'aria-hidden': true,
-                  }
+                  },
                 )
               : nothing}
             ${this.tabContent !== 'iconOnly'

diff --git a/packages/ui-library/src/components/tab-bar/index.ts b/packages/ui-library/src/components/tab-bar/index.ts
@@ -74,8 +74,8 @@ export class BlrTabBar extends LitElementCustom {
     const selectedTab: BlrTabBarItem | undefined = value
       ? target
       : target === this._selectedTab && !value
-      ? undefined
-      : this._selectedTab;
+        ? undefined
+        : this._selectedTab;
 
     batch(() => {
       this._tabBarElements?.forEach((tab) => {
@@ -87,7 +87,7 @@ export class BlrTabBar extends LitElementCustom {
 
     if (this._selectedTab !== selectedTab) {
       this.dispatchEvent(
-        createBlrSelectedValueChangeEvent({ selectedValue: (<BlrTabBarItem>selectedTab)?.label ?? '' })
+        createBlrSelectedValueChangeEvent({ selectedValue: (<BlrTabBarItem>selectedTab)?.label ?? '' }),
       );
       this._selectedTab = selectedTab;
     }
@@ -112,7 +112,7 @@ export class BlrTabBar extends LitElementCustom {
       item.iconPosition = this.iconPosition;
 
       this._tabBarSelectedSignalSubscriptionDisposers.push(
-        item.signals.selected.subscribe((value) => this.handleTabBarSelectedSignal(item, value))
+        item.signals.selected.subscribe((value) => this.handleTabBarSelectedSignal(item, value)),
       );
     });
   }
@@ -165,7 +165,7 @@ export class BlrTabBar extends LitElementCustom {
                     },
                     {
                       'aria-hidden': true,
-                    }
+                    },
                   )}
                 </button>
               `
@@ -186,7 +186,7 @@ export class BlrTabBar extends LitElementCustom {
                     },
                     {
                       'aria-hidden': true,
-                    }
+                    },
                   )}
                 </button>
               `

diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
@@ -143,6 +143,7 @@ export const staticStyles = css`
         color: ${inputfield.userinput.textcolor.default.rest};
         font-weight: ${inputfield.userinput.typography.md.fontWeight};
         font-size: ${inputfield.userinput.typography.md.fontSize};
+        outline-offset: calc(${inputfield.container.border.default.rest.width} * -1);
         font-family: ${inputfield.userinput.typography.md.fontFamily}, sans-serif;
         background-color: ${inputfield.container.bgcolor.default.rest};
         border-radius: ${inputfield.container.borderradius};
@@ -201,6 +202,7 @@ export const staticStyles = css`
           outline: ${inputfield.container.border.default.focus.width} ${inputfield.container.border.default.focus.style}
             ${inputfield.container.border.default.focus.color};
           color: ${inputfield.userinput.textcolor.default.focus};
+          outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
           background-color: ${inputfield.container.bgcolor.default.focus};
 
           &::placeholder {

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -240,7 +240,7 @@ export class BlrTextarea extends LitElementCustom {
             ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
               ? BlrFormCaptionGroupRenderFunction(
                   { sizeVariant: this.sizeVariant, theme: this.theme },
-                  getCaptionContent()
+                  getCaptionContent(),
                 )
               : nothing}
             ${this.hasCounter
-Original file line number
+Diff line change
@@ Expand Up @@
                       },
                       {
                         'aria-hidden': true,
-                      }
+                      },
                     )
                   : nothing}
                 ${this.tabContent !== 'iconOnly'
@@ Expand Down @@