fix(Form Inputs): hide label containers if no slot passed (#569)

Endava · Oct 11, 2023 · e41a9d1 · e41a9d1
1 parent 6835245
commit e41a9d1
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 40 deletions.
diff --git a/packages/beeq/src/components/checkbox/scss/bq-checkbox.scss b/packages/beeq/src/components/checkbox/scss/bq-checkbox.scss
@@ -21,10 +21,10 @@
 
   // Display background on hover (if enabled)
   &.has-background:not(.is-disabled):hover {
-    @apply bg-ui-secondary-hover;
+    @apply bg-ui-primary-hover;
   }
 
-  // Checked/Inderterminate hover state
+  // Checked/Indeterminate hover state
   &.is-checked,
   &.is-indeterminate {
     &:not(.is-disabled):hover .bq-checkbox__checkbox {

diff --git a/packages/beeq/src/components/dialog/bq-dialog.tsx b/packages/beeq/src/components/dialog/bq-dialog.tsx
@@ -257,7 +257,7 @@ export class BqDialog {
           </header>
           <div
             class={{
-              hidden: !this.hasContent,
+              '!hidden': !this.hasContent,
               'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
               '!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
             }}
@@ -269,7 +269,7 @@ export class BqDialog {
         </main>
         <footer
           class={{
-            hidden: !this.hasFooter,
+            '!hidden': !this.hasFooter,
             'bq-dialog--footer': this.hasFooter,
             'bg-ui-primary-alt !py-s': this.footerApperance === 'highlight',
           }}

diff --git a/packages/beeq/src/components/divider/bq-divider.tsx b/packages/beeq/src/components/divider/bq-divider.tsx
@@ -181,7 +181,7 @@ export class BqDivider {
             <line {...strokeAttributes} part="dash-start-line" />
           </svg>
           <slot onSlotchange={this.handleSlotChange} />
-          <svg class={{ 'bq-divider--stroke end': true, hidden: !this.hasTitle }} part="dash-end">
+          <svg class={{ 'bq-divider--stroke end': true, '!hidden': !this.hasTitle }} part="dash-end">
             <line {...strokeAttributes} part="dash-end-line" />
           </svg>
         </div>

diff --git a/packages/beeq/src/components/input/bq-input.tsx b/packages/beeq/src/components/input/bq-input.tsx
@@ -302,7 +302,7 @@ export class BqInput {
       <div class="bq-input" part="base">
         {/* Label */}
         <label
-          class={{ 'bq-input--label': true, hidden: !this.hasLabel }}
+          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}
           htmlFor={this.name || this.fallbackInputId}
           ref={(labelElem) => (this.labelElem = labelElem)}
           part="label"
@@ -320,7 +320,7 @@ export class BqInput {
         >
           {/* Prefix */}
           <span
-            class={{ 'bq-input--control__prefix': true, hidden: !this.hasPrefix }}
+            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}
             ref={(spanElem) => (this.prefixElem = spanElem)}
             part="prefix"
           >
@@ -378,7 +378,7 @@ export class BqInput {
           )}
           {/* Suffix */}
           <span
-            class={{ 'bq-input--control__suffix': true, hidden: !this.hasSuffix }}
+            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}
             ref={(spanElem) => (this.suffixElem = spanElem)}
             part="suffix"
           >
@@ -387,7 +387,10 @@ export class BqInput {
         </div>
         {/* Helper text */}
         <div
-          class={{ [`bq-input--helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
+          class={{
+            [`bq-input--helper-text validation-${this.validationStatus}`]: true,
+            '!hidden': !this.hasHelperText,
+          }}
           ref={(divElem) => (this.helperTextElem = divElem)}
           part="helper-text"
         >

diff --git a/packages/beeq/src/components/radio/scss/bq-radio.scss b/packages/beeq/src/components/radio/scss/bq-radio.scss
@@ -27,7 +27,7 @@
   }
 
   &.has-background:not(.is-disabled):hover {
-    @apply bg-ui-secondary-hover;
+    @apply bg-ui-primary-hover;
   }
 
   &.is-checked:not(.is-disabled) {

diff --git a/packages/beeq/src/components/select/bq-select.tsx b/packages/beeq/src/components/select/bq-select.tsx
@@ -274,7 +274,7 @@ export class BqSelect {
         {/* Label */}
         <label
           id={labelId}
-          class={{ 'bq-select__label': true, hidden: !this.hasLabel }}
+          class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}
           htmlFor={this.name || this.fallbackInputId}
           ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}
           part="label"
@@ -307,7 +307,7 @@ export class BqSelect {
           >
             {/* Prefix */}
             <span
-              class={{ 'bq-select__control--prefix': true, hidden: !this.hasPrefix }}
+              class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}
               ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}
               part="prefix"
             >
@@ -374,7 +374,10 @@ export class BqSelect {
         </bq-dropdown>
         {/* Helper text */}
         <div
-          class={{ [`bq-select__helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
+          class={{
+            [`bq-select__helper-text validation-${this.validationStatus}`]: true,
+            '!hidden': !this.hasHelperText,
+          }}
           ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}
           part="helper-text"
         >

diff --git a/packages/beeq/src/components/spinner/bq-spinner.tsx b/packages/beeq/src/components/spinner/bq-spinner.tsx
@@ -189,7 +189,7 @@ export class BqSpinner {
           class={{
             'bq-spinner--icon': true,
             flex: this.hasIconSlot,
-            hidden: !this.hasIconSlot,
+            '!hidden': !this.hasIconSlot,
           }}
           ref={(spanElem) => (this.iconSlotElem = spanElem)}
           part="custom-icon"

diff --git a/packages/beeq/src/components/tab-group/bq-tab-group.tsx b/packages/beeq/src/components/tab-group/bq-tab-group.tsx
@@ -118,11 +118,11 @@ export class BqTabGroup {
 
     switch (event.detail.key) {
       case 'ArrowRight': {
-        await this.focusTabSibbling(target, 'forward');
+        await this.focusTabSibling(target, 'forward');
         break;
       }
       case 'ArrowLeft': {
-        await this.focusTabSibbling(target, 'backward');
+        await this.focusTabSibling(target, 'backward');
         break;
       }
       default:
@@ -146,7 +146,7 @@ export class BqTabGroup {
   // These methods cannot be called from the host element.
   // =======================================================
 
-  private focusTabSibbling = async (
+  private focusTabSibling = async (
     currentTarget: HTMLBqTabElement,
     direction: 'forward' | 'backward',
   ): Promise<void> => {

diff --git a/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss b/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss
@@ -10,7 +10,7 @@
   @apply relative;
 
   &::after {
-    @apply absolute bottom-0 flex w-full border-0 border-b border-solid border-stroke-secondary content-empty;
+    @apply absolute bottom-0 flex w-full border-0 border-b border-solid border-bg-tertiary content-empty;
   }
 }
 

diff --git a/packages/beeq/src/components/tab/scss/bq-tab-variables.scss b/packages/beeq/src/components/tab/scss/bq-tab-variables.scss
@@ -8,12 +8,12 @@
    * @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--padding-vertical-small - Vertical padding for small tab
+   * @prop --bq-tab--padding-horizontal-small - Horizontal padding for small tab
+   * @prop --bq-tab--padding-vertical-medium - Vertical padding for medium tab
+   * @prop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab
+   * @prop --bq-tab--padding-vertical-large - Vertical padding for large tab
+   * @prop --bq-tab--padding-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
@@ -24,14 +24,14 @@
 
   --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--padding-vertical-small: theme('spacing.xs2');
+  --bq-tab--padding-horizontal-small: theme('spacing.m');
 
-  --bq-tab--pading-vertical-medium: theme('spacing.xs');
-  --bq-tab--pading-horizontal-medium: theme('spacing.l');
+  --bq-tab--padding-vertical-medium: theme('spacing.xs');
+  --bq-tab--padding-horizontal-medium: theme('spacing.l');
 
-  --bq-tab--pading-vertical-large: theme('spacing.s');
-  --bq-tab--pading-horizontal-large: theme('spacing.l');
+  --bq-tab--padding-vertical-large: theme('spacing.s');
+  --bq-tab--padding-horizontal-large: theme('spacing.l');
 
   --bq-tab--icon-size-small: 20px;
   --bq-tab--icon-size-medium: 24px;

diff --git a/packages/beeq/src/components/tab/scss/bq-tab.scss b/packages/beeq/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-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&: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:bg-ui-primary-hover [&: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-[--bq-tab--pading-horizontal-small] py-[--bq-tab--pading-vertical-small];
+    @apply px-[--bq-tab--padding-horizontal-small] py-[--bq-tab--padding-vertical-small];
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};
@@ -42,7 +42,7 @@
   }
 
   &--medium {
-    @apply px-[--bq-tab--pading-horizontal-medium] py-[--bq-tab--pading-vertical-medium];
+    @apply px-[--bq-tab--padding-horizontal-medium] py-[--bq-tab--padding-vertical-medium];
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};
@@ -51,7 +51,7 @@
   }
 
   &--large {
-    @apply px-[--bq-tab--pading-horizontal-large] py-[--bq-tab--pading-vertical-large] text-l;
+    @apply px-[--bq-tab--padding-horizontal-large] py-[--bq-tab--padding-vertical-large] text-l;
 
     ::slotted(bq-icon) {
       --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};

diff --git a/packages/beeq/src/components/textarea/__tests__/bq-textarea.e2e.ts b/packages/beeq/src/components/textarea/__tests__/bq-textarea.e2e.ts
@@ -61,7 +61,7 @@ describe('bq-textarea', () => {
     });
     const helperContainerElem = await page.find('bq-textarea >>> .bq-textarea__helper--counter');
 
-    expect(helperContainerElem).not.toHaveClass('hidden');
+    expect(helperContainerElem).not.toHaveClass('!hidden');
   });
 
   it('should hide helper content if no helper text and maxlenght counter', async () => {
@@ -70,7 +70,7 @@ describe('bq-textarea', () => {
     });
     const helperContainerElem = await page.find('bq-textarea >>> .bq-textarea__helper');
 
-    expect(helperContainerElem).toHaveClass('hidden');
+    expect(helperContainerElem).toHaveClass('!hidden');
   });
 
   it('should write and emit change event', async () => {
@@ -108,7 +108,7 @@ describe('bq-textarea', () => {
     expect(bqInput).toHaveReceivedEventTimes(value.length);
   });
 
-  it('shold show and count all characters', async () => {
+  it('should show and count all characters', async () => {
     const value = 'Hello World!';
     const maxlenght = 100;
     const page = await newE2EPage({

diff --git a/packages/beeq/src/components/textarea/bq-textarea.tsx b/packages/beeq/src/components/textarea/bq-textarea.tsx
@@ -250,7 +250,7 @@ export class BqTextarea {
     return (
       <div class="bq-textarea flex flex-auto flex-col">
         <label
-          class={{ 'bq-textarea__label': true, hidden: !this.hasLabel }}
+          class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}
           htmlFor={this.name ?? this.fallbackId}
           ref={(label: HTMLLabelElement) => (this.labelElem = label)}
         >
@@ -289,13 +289,13 @@ export class BqTextarea {
           class={{
             'bq-textarea__helper flex items-center justify-between': true,
             [`validation-${this.validationStatus}`]: true,
-            hidden: !this.hasHelperText && !this.maxlength,
+            '!hidden': !this.hasHelperText && !this.maxlength,
           }}
         >
           <span class="bq-textarea__helper--text" ref={(span: HTMLElement) => (this.helperTextElem = span)}>
             <slot name="helper-text" onSlotchange={this.handleHelperTextSlotChange} />
           </span>
-          <span class={{ 'bq-textarea__helper--counter': true, hidden: !this.maxlength }}>
+          <span class={{ 'bq-textarea__helper--counter': true, '!hidden': !this.maxlength }}>
             {this.numberOfCharacters}/{this.maxlength}
           </span>
         </div>