fix(tab): wrong gap space between icon and label (#366)

Endava · Jul 18, 2023 · 87b52e3 · 87b52e3
1 parent ea5bfcc
commit 87b52e3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 37 deletions.
diff --git a/packages/bee-q/src/components/tab/__tests__/bq-tab.e2e.ts b/packages/bee-q/src/components/tab/__tests__/bq-tab.e2e.ts
@@ -123,7 +123,7 @@ describe('bq-tab', () => {
     const largeStyle = await computedStyle(page, 'bq-tab[size="large"] >>> [part="base"]', ['padding']);
 
     expect(smallStyle).toEqual({ padding: '4px 16px' });
-    expect(mediumStyle).toEqual({ padding: '8px 20px' });
+    expect(mediumStyle).toEqual({ padding: '8px 24px' });
     expect(largeStyle).toEqual({ padding: '12px 24px' });
   });
 });
diff --git a/packages/bee-q/src/components/tab/bq-tab.tsx b/packages/bee-q/src/components/tab/bq-tab.tsx
@@ -1,4 +1,4 @@
-import { h, Component, Prop, Watch, Element, Event, EventEmitter, Method, Host, State } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';
 
 import { TAB_SIZE, TTabSize } from './bq-tab.types';
 import { validatePropValue } from '../../shared/utils';
@@ -160,37 +160,35 @@ export class BqTab {
 
   render() {
     return (
-      <Host>
-        <button
-          ref={(el) => (this.buttonElement = el)}
-          class={{
-            [`bq-tab bq-tab--${this.size} group`]: true,
-            'text-text-brand disabled:text-text-brand-disabled': this.active,
-            'text-text-primary disabled:text-text-primary-disabled': !this.active,
-          }}
-          id={this.tabId}
-          onBlur={this.handleOnBlur}
-          onClick={this.handleClick}
-          onFocus={this.handleOnFocus}
-          onKeyDown={this.handleOnKeyDown}
-          disabled={this.disabled}
-          role="tab"
-          aria-controls={this.controls}
-          aria-disabled={this.disabled ? 'true' : 'false'}
-          aria-selected={this.active ? 'true' : 'false'}
-          tabindex={this.tabindex}
-          part="base"
-        >
-          <div class="flex items-center justify-center" part="content">
-            <div class="flex" part="icon">
-              <slot name="icon" />
-            </div>
-            <div class="line-clamp-1" part="text">
-              <slot />
-            </div>
+      <button
+        ref={(el) => (this.buttonElement = el)}
+        class={{
+          [`bq-tab bq-tab--${this.size}`]: true,
+          'text-text-brand disabled:text-text-brand-disabled': this.active,
+          'text-text-primary disabled:text-text-primary-disabled': !this.active,
+        }}
+        id={this.tabId}
+        onBlur={this.handleOnBlur}
+        onClick={this.handleClick}
+        onFocus={this.handleOnFocus}
+        onKeyDown={this.handleOnKeyDown}
+        disabled={this.disabled}
+        role="tab"
+        aria-controls={this.controls}
+        aria-disabled={this.disabled ? 'true' : 'false'}
+        aria-selected={this.active ? 'true' : 'false'}
+        tabindex={this.tabindex}
+        part="base"
+      >
+        <div class="flex items-center justify-center gap-[--bq-tab--label-icon-gap]" part="content">
+          <div class="flex" part="icon">
+            <slot name="icon" />
           </div>
-        </button>
-      </Host>
+          <div class="line-clamp-1" part="text">
+            <slot />
+          </div>
+        </div>
+      </button>
     );
   }
 }
diff --git a/packages/bee-q/src/components/tab/scss/bq-tab-variables.scss b/packages/bee-q/src/components/tab/scss/bq-tab-variables.scss
@@ -3,12 +3,36 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  /**
+   * @prop --bq-tab--font-size - Font size
+   * @prop --bq-tab--font-weight - Font weight
+   * @prop --bq-tab--line-height - Line height
+   * @prop --bq-tab--label-icon-gap - Gap between label and icon
+   * @prop --bq-tab--pading-vertical-small - Vertical padding for small tab
+   * @prop --bq-tab--pading-horizontal-small - Horizontal padding for small tab
+   * @prop --bq-tab--pading-vertical-medium - Vertical padding for medium tab
+   * @prop --bq-tab--pading-horizontal-medium - Horizontal padding for medium tab
+   * @prop --bq-tab--pading-vertical-large - Vertical padding for large tab
+   * @prop --bq-tab--pading-horizontal-large - Horizontal padding for large tab
+   * @prop --bq-tab--icon-size-small - Icon size for small tab
+   * @prop --bq-tab--icon-size-medium - Icon size for medium tab
+   * @prop --bq-tab--icon-size-large - Icon size for large tab
+   */
+  --bq-tab--font-size: theme('fontSize.m');
+  --bq-tab--font-weight: theme('fontWeight.medium');
+  --bq-tab--line-height: theme('lineHeight.large');
+
+  --bq-tab--label-icon-gap: theme('spacing.xs');
+
   --bq-tab--pading-vertical-small: theme('spacing.xs2');
   --bq-tab--pading-horizontal-small: theme('spacing.m');
+
   --bq-tab--pading-vertical-medium: theme('spacing.xs');
-  --bq-tab--pading-horizontal-medium: 20px;
+  --bq-tab--pading-horizontal-medium: theme('spacing.l');
+
   --bq-tab--pading-vertical-large: theme('spacing.s');
   --bq-tab--pading-horizontal-large: theme('spacing.l');
+
   --bq-tab--icon-size-small: 20px;
   --bq-tab--icon-size-medium: 24px;
   --bq-tab--icon-size-large: 24px;

diff --git a/packages/bee-q/src/components/tab/scss/bq-tab.scss b/packages/bee-q/src/components/tab/scss/bq-tab.scss
@@ -10,7 +10,7 @@
 
 .bq-tab {
   @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed;
-  @apply text-m font-medium leading-large [&:not([disabled])]:hover:text-text-brand-hover;
+  @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:text-text-brand-hover;
   @apply border-0 bg-transparent focus-visible:focus;
   @apply transition-[color,background-color,border-color,box-shadow] duration-300;
 
@@ -33,7 +33,7 @@
   }
 
   &--small {
-    @apply px-[var(--bq-tab--pading-horizontal-small)] py-[var(--bq-tab--pading-vertical-small)];
+    @apply px-[--bq-tab--pading-horizontal-small] py-[--bq-tab--pading-vertical-small];
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};
@@ -42,7 +42,7 @@
   }
 
   &--medium {
-    @apply px-[var(--bq-tab--pading-horizontal-medium)] py-[var(--bq-tab--pading-vertical-medium)];
+    @apply px-[--bq-tab--pading-horizontal-medium] py-[--bq-tab--pading-vertical-medium];
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};
@@ -51,7 +51,7 @@
   }
 
   &--large {
-    @apply px-[var(--bq-tab--pading-horizontal-large)] py-[var(--bq-tab--pading-vertical-large)] text-l;
+    @apply px-[--bq-tab--pading-horizontal-large] py-[--bq-tab--pading-vertical-large] text-l;
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};