perf: move help text functionality into dropdown slot

AlaskaAirlines · Oct 4, 2024 · 0d6aff5 · 0d6aff5
1 parent 99420fd
commit 0d6aff5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 22 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -621,7 +621,6 @@ The component may be restyled using the following code sample and changing the v
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-select-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
 }
 ```

diff --git a/src/auro-select.js b/src/auro-select.js
@@ -550,18 +550,20 @@ export class AuroSelect extends LitElement {
             <slot></slot>
           </div>
           <slot name="label" slot="label"></slot>
+          <span slot="helpText">
+            ${!this.validity || this.validity === undefined || this.validity === 'valid'
+              ? html`
+                <p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
+                  <slot name="helpText"></slot>
+                </p>`
+              : html`
+                <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+                  ${this.setCustomValidity}
+                </p>`
+            }
+          </span>
         </${this.dropdownTag}>
         <!-- Help text and error message template -->
-        ${!this.validity || this.validity === undefined || this.validity === 'valid'
-          ? html`
-            <p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
-              <slot name="helpText"></slot>
-            </p>`
-          : html`
-            <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-              ${this.setCustomValidity}
-            </p>`
-        }
       </div>
     `;
   }

diff --git a/src/color.scss b/src/color.scss
@@ -23,10 +23,6 @@
       }
     }
   }
-
-  .selectElement-helpText {
-    color: var(--ds-auro-select-help-text-color);
-  }
 }
 
 :host([disabled]) {
@@ -35,12 +31,6 @@
   }
 }
 
-:host([validity]:not([validity='valid'])) {
-  .selectElement-helpText {
-    --ds-auro-select-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
-  }
-}
-
 .placeholder {
   color: var(--ds-auro-select-placeholder-text-color);
 }
diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,6 +1,5 @@
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-select-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
     :host {
-      --ds-auro-select-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
       --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
     }
     ```
@@ Expand Down @@