Dropdown: Size attribute applied to gds-form-control-header (#1955)

* Added css class to gds-form-control-header based on size attribute. Similar to datepicker. Added tests * changeset --------- Co-authored-by: Östlund, Joakim <[email protected]>
seb-oss · Jan 30, 2025 · 7213bfb · 7213bfb
1 parent dc53983
commit 7213bfb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/.changeset/flat-cooks-look.md b/.changeset/flat-cooks-look.md
@@ -0,0 +1,5 @@
+---
+'@sebgroup/green-core': patch
+---
+
+Dropdown: Added support for size small to header
diff --git a/libs/core/src/components/dropdown/dropdown.test.ts b/libs/core/src/components/dropdown/dropdown.test.ts
@@ -332,6 +332,46 @@ describe('<gds-dropdown>', () => {
     await el.updateComplete
     await expect(el.displayValue).to.equal('Option 3 (updated)')
   })
+
+  it('should set gds-form-control-header class based on size', async () => {
+    const el = await fixture<GdsDropdown>(html`
+      <gds-dropdown label="My dropdown" size="small">
+      </gds-dropdown>
+    `)
+    const gdsFormControlHeader = el.shadowRoot!.querySelector<HTMLElement>('[gds-element=gds-form-control-header]')!
+
+    await expect(gdsFormControlHeader.classList.contains('size-small')).to.be.true
+  })
+
+  it('should set gds-form-control-header class based on default size', async () => {
+    const el = await fixture<GdsDropdown>(html`
+      <gds-dropdown label="My dropdown">
+      </gds-dropdown>
+    `)
+    const gdsFormControlHeader = el.shadowRoot!.querySelector<HTMLElement>('[gds-element=gds-form-control-header]')!
+
+    await expect(gdsFormControlHeader.classList.contains('size-medium')).to.be.true
+  })
+
+  it('should set gds-form-control-footer class based on size', async () => {
+    const el = await fixture<GdsDropdown>(html`
+      <gds-dropdown label="My dropdown" size="small">
+      </gds-dropdown>
+    `)
+    const gdsFormControlFooter = el.shadowRoot!.querySelector<HTMLElement>('[gds-element=gds-form-control-footer]')!
+
+    await expect(gdsFormControlFooter.classList.contains('size-small')).to.be.true
+  })
+
+  it('should set gds-form-control-footer class based on default size', async () => {
+    const el = await fixture<GdsDropdown>(html`
+      <gds-dropdown label="My dropdown">
+      </gds-dropdown>
+    `)
+    const gdsFormControlFooter = el.shadowRoot!.querySelector<HTMLElement>('[gds-element=gds-form-control-footer]')!
+
+    await expect(gdsFormControlFooter.classList.contains('size-medium')).to.be.true
+  })
 })
 
 describe('<gds-dropdown> interactions', () => {

diff --git a/libs/core/src/components/dropdown/dropdown.ts b/libs/core/src/components/dropdown/dropdown.ts
@@ -236,7 +236,7 @@ export class GdsDropdown<ValueT = any>
       ${when(
         !this.hideLabel,
         () => html`
-          <gds-form-control-header>
+          <gds-form-control-header class="size-${this.size}">
             <label id="label" for="trigger" slot="label">${this.label}</label>
             ${when(
               this.supportingText.length > 0,