diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css index eef5d4788..02458086b 100644 --- a/src/components/dropdown/dropdown.css +++ b/src/components/dropdown/dropdown.css @@ -2,6 +2,7 @@ --box-shadow: var(--wa-shadow-m); display: inline-block; + border-radius: var(--wa-form-control-border-radius); } .dropdown::part(popup) { @@ -24,8 +25,14 @@ transform-origin: left; } -.trigger { - display: block; +#trigger { + display: block; /* for boundingClientRect */ + + &, + &::slotted(*) { + /* Otherwise button groups don't work well with dropdown, see #348 */ + border-radius: inherit !important; + } } .panel { diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index a41e4b536..9e50b9baa 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -46,7 +46,7 @@ export default class WaDropdown extends WebAwesomeElement { static shadowStyle = styles; @query('.dropdown') popup: WaPopup; - @query('.trigger') trigger: HTMLSlotElement; + @query('#trigger') trigger: HTMLSlotElement; @query('.panel') panel: HTMLSlotElement; private closeWatcher: CloseWatcher | null; @@ -409,10 +409,20 @@ export default class WaDropdown extends WebAwesomeElement { render() { return html` + - -