feat: enhance dropdown rendering with value, label, and help text slots

#250
AlaskaAirlines · Jan 29, 2025 · ab7d1b3 · ab7d1b3
1 parent 18b195d
commit ab7d1b3
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 24 deletions.
diff --git a/components/counter/apiExamples/dropdown-help-text.html b/components/counter/apiExamples/dropdown-help-text.html
@@ -0,0 +1,17 @@
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="helpText">This is help text</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
diff --git a/components/counter/apiExamples/dropdown-value-text.html b/components/counter/apiExamples/dropdown-value-text.html
@@ -0,0 +1,18 @@
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="valueText">Custom value text</div>
+    <div slot="label"></div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
diff --git a/components/counter/apiExamples/dropdown.html b/components/counter/apiExamples/dropdown.html
@@ -1,17 +1,17 @@
-<div style="width: 300px;">
-    <auro-counter-group isDropdown>
-      <div slot="placeholder">Passengers</div>
-      <auro-counter>
-        Short label
-        <span slot="description">This is an example of a long sub label wrapping behavior</span>
-      </auro-counter>
-      <auro-counter>
-        This is an example of the wrapping behavior for a long label
-        <span slot="description">with short sub label text</span>
-      </auro-counter>
-      <auro-counter>
-        This is an example of the wrapping behavior for a long label
-        <span slot="description">Combined with an example of a long sub label wrapping behavior</span>
-      </auro-counter>
-    </auro-counter-group>
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <div slot="label">Passengers</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
 </div>
diff --git a/components/counter/docs/partials/index.md b/components/counter/docs/partials/index.md
@@ -52,6 +52,32 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with custom value text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with help text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-help-text.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-help-text.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 

diff --git a/components/counter/src/auro-counter-group.js b/components/counter/src/auro-counter-group.js
@@ -246,7 +246,11 @@ export class AuroCounterGroup extends LitElement {
     return html`
     ${this.isDropdown
       ? html`<${this.dropdownTag} common chevron>
-        <div slot="trigger">${this.total}<slot name="placeholder"></slot></div>
+        <div slot="trigger"><slot name="valueText">
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.shadowRoot.querySelector('.label slot').assignedNodes()[0].textContent}${index !== this.counters.length - 1 ? ', ' : ''}`)}
+        </slot></div>
+        <div slot="label"><slot name="label"></slot></div>
+        <div slot="helpText"><slot name="helpText"></slot></div>
         <auro-counter-wrapper isInDropdown>
         </auro-counter-wrapper>
       </${this.dropdownTag}>

diff --git a/components/counter/src/styles/counter-group.scss b/components/counter/src/styles/counter-group.scss
@@ -17,12 +17,10 @@
   display: block;
 }
 
-[slot="trigger"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ds-size-100, $ds-size-100);
-
+[slot="trigger"], ::slotted([slot="valueText"]) {
+  display: block;
+  overflow: auto;
+  text-overflow: ellipsis;
 }
 
 [auro-dropdown] {

diff --git a/components/counter/test/auro-counter-group.test.js b/components/counter/test/auro-counter-group.test.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef, no-magic-numbers */
 
-import { fixture, html, expect } from '@open-wc/testing';
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 import '../src/index.js';
 
 describe('auro-counter-group: configureCounters', () => {
@@ -149,3 +149,53 @@ describe('auro-counter-group: configureDropdownCounters', () => {
     expect(el.counters.length).to.equal(1);
   });
 });
+
+describe('auro-counter-group: rendering logic', () => {
+  it('renders the correct value text in the dropdown trigger slot', async () => {
+    const el = await fixture(html`
+            <auro-counter-group isDropdown>
+                <div slot="valueText">Value</div>
+                <auro-counter value="2">counter1</auro-counter>
+                <auro-counter value="3">counter2</auro-counter>
+            </auro-counter-group>
+        `);
+
+    await elementUpdated(el);
+
+    const triggerSlot = el.shadowRoot.querySelector('div[slot="trigger"] slot[name="valueText"]');
+
+    expect(triggerSlot.assignedNodes()[0].textContent.trim()).to.equal('Value');
+  });
+
+  it('renders the correct label in the dropdown label slot', async () => {
+    const el = await fixture(html`
+            <auro-counter-group isDropdown>
+                <span slot="label">Counter Group Label</span>
+                <auro-counter value="2">counter1</auro-counter>
+                <auro-counter value="3">counter2</auro-counter>
+            </auro-counter-group>
+        `);
+
+    await elementUpdated(el);
+
+    const labelSlot = el.shadowRoot.querySelector('div[slot="label"] slot[name="label"]');
+    expect(labelSlot.assignedNodes()[0].textContent.trim()).to.equal('Counter Group Label');
+  });
+
+  it('renders the correct help text in the dropdown helpText slot', async () => {
+    const el = await fixture(html`
+            <auro-counter-group isDropdown>
+                <span slot="helpText">Help Text</span>
+                <auro-counter value="2">counter1</auro-counter>
+                <auro-counter value="3">counter2</auro-counter>
+            </auro-counter-group>
+        `);
+
+    await elementUpdated(el);
+
+    const helpTextSlot = el.shadowRoot.querySelector('div[slot="helpText"] slot[name="helpText"]');
+    expect(helpTextSlot.assignedNodes()[0].textContent.trim()).to.equal('Help Text');
+  });
+
+});
+