diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css index 02458086b..0181feed4 100644 --- a/src/components/dropdown/dropdown.css +++ b/src/components/dropdown/dropdown.css @@ -2,7 +2,6 @@ --box-shadow: var(--wa-shadow-m); display: inline-block; - border-radius: var(--wa-form-control-border-radius); } .dropdown::part(popup) { @@ -27,12 +26,6 @@ #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/styles/native/button.css b/src/styles/native/button.css index 6c7604636..01e93e9cb 100644 --- a/src/styles/native/button.css +++ b/src/styles/native/button.css @@ -14,7 +14,24 @@ --text-color-hover: var(--text-color); --text-color-active: var(--text-color); - border-radius: var(--wa-form-control-border-radius); + /* These allow button groups to zero out border-radius on the first and last buttons */ + border-start-start-radius: var( + /* top left */ --wa-border-block-start-radius, + var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius)) + ); + border-start-end-radius: var( + /* top right */ --wa-border-block-start-radius, + var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius)) + ); + border-end-start-radius: var( + /* bottom left */ --wa-border-block-end-radius, + var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius)) + ); + border-end-end-radius: var( + /* bottom right */ --wa-border-block-end-radius, + var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius)) + ); + border-style: var(--wa-border-style); border-width: var(--border-width); align-items: center; @@ -96,5 +113,5 @@ input:is([type='button'], [type='reset'], [type='submit']), .wa-pill, :host([pill]) { - border-radius: var(--wa-border-radius-pill) !important; + border-radius: var(--wa-border-radius-pill); } diff --git a/src/styles/utilities/button-group.css b/src/styles/utilities/button-group.css index 9ec5f56bd..5c9e2bc93 100644 --- a/src/styles/utilities/button-group.css +++ b/src/styles/utilities/button-group.css @@ -1,6 +1,5 @@ .wa-button-group { display: inline-flex; - align-items: center; position: relative; isolation: isolate; @@ -26,6 +25,8 @@ &::slotted(:not(:first-child)) { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; + --wa-border-inline-start-radius: 0; + border-inline-start-color: var(--border-color, rgb(0 0 0 / 0.3)); margin-inline-start: calc(-1 * var(--border-width, 1px)); } @@ -34,6 +35,7 @@ &::slotted(:not(:last-child)) { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; + --wa-border-inline-end-radius: 0; } } @@ -45,6 +47,8 @@ &::slotted(:not(:first-child)) { border-start-start-radius: 0 !important; border-start-end-radius: 0 !important; + --wa-border-block-start-radius: 0; + border-block-start-color: var(--border-color, rgb(0 0 0 / 0.3)); margin-block-start: calc(-1 * var(--border-width, 1px)); } @@ -53,5 +57,6 @@ &::slotted(:not(:last-child)) { border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; + --wa-border-block-end-radius: 0; } }