From ee224382bc009a69f5215658d725669c3b2d6119 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 6 Jun 2025 12:43:00 -0400 Subject: [PATCH] add size --- .../src/components/dropdown/dropdown.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts index 2cb91e15b..bc8b33736 100644 --- a/packages/webawesome/src/components/dropdown/dropdown.ts +++ b/packages/webawesome/src/components/dropdown/dropdown.ts @@ -60,11 +60,15 @@ export default class WaDropdown extends WebAwesomeElement { private userTypedTimeout: ReturnType; private openSubmenuStack: WaDropdownItem[] = []; + @query('slot:not([name])') defaultSlot: HTMLSlotElement; @query('#menu') private menu: HTMLDivElement; /** Opens or closes the dropdown. */ @property({ type: Boolean, reflect: true }) open = false; + /** The dropdown's size. */ + @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; + /** * The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if * the preferred placement doesn't have enough room. @@ -116,6 +120,10 @@ export default class WaDropdown extends WebAwesomeElement { this.hideMenu(); } } + + if (changedProperties.has('size')) { + this.syncItemSizes(); + } } /** Gets all elements slotted in the menu that aren't disabled. */ @@ -136,6 +144,14 @@ export default class WaDropdown extends WebAwesomeElement { return includeDisabled ? items : items.filter(item => !item.disabled); } + /** Syncs item sizes with the dropdown's size property. */ + private syncItemSizes() { + const items = this.defaultSlot + .assignedElements({ flatten: true }) + .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[]; + items.forEach(item => (item.size = this.size)); + } + /** Handles the submenu navigation stack */ private addToSubmenuStack(item: WaDropdownItem) { // Remove any items that might be after this one in the stack @@ -537,6 +553,8 @@ export default class WaDropdown extends WebAwesomeElement { const items = this.getItems(true); await Promise.all(items.map(item => item.updateComplete)); + this.syncItemSizes(); + // Check for checkboxes const hasCheckbox = items.some(item => item.type === 'checkbox');