diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 969e695cc9f1..83e72684964f 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -3,6 +3,7 @@ @focusin="{{_onfocusin}}" class="ui5-segmentedbutton-root" role="group" + dir="{{effectiveDir}}" aria-roledescription="{{ariaDescription}}" > diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index 4991e322025d..eedc72d4c645 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -22,13 +22,36 @@ } ::slotted(ui5-togglebutton:last-child) { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; + border-top-right-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-right: 1px solid var(--sapButton_Selected_BorderColor); } ::slotted(ui5-togglebutton:first-child) { - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; + border-top-left-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); border-left: 1px solid var(--sapButton_Selected_BorderColor); } + +[dir="rtl"] ::slotted(ui5-togglebutton:first-child) { + border-top-right-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-right: 1px solid var(--sapButton_Selected_BorderColor); +} + +[dir="rtl"] ::slotted(ui5-togglebutton:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); + border-left: 1px solid var(--sapButton_Selected_BorderColor); +} + +[dir="rtl"] ::slotted(ui5-togglebutton:only-child) { + border-top-right-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); + border-top-left-radius: var(--_ui5_segmented_btn_border_radius); + border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 527e7c13e50a..8dc788227e82 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -66,6 +66,9 @@ --_ui5-tree-toggle-box-width: 2.75rem; --_ui5-tree-toggle-box-height: 2.25rem; --_ui5-tree-toggle-icon-size: 1.0625rem; + + /* SegmentedButton */ + --_ui5_segmented_btn_border_radius: 0.375rem; } [data-ui5-compact-size], diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index de89fc4754ff..323444afafc7 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -25,6 +25,10 @@

ui5-segmentedbutton

Segmentedbutton example

+ + Button + +