refactor(ui5-input): refactor RTL in DatePicker, Menu, (Multi)ComboBo…

…x, RadioButton, Select, SegBtn, TabContainer and Token(izer) components - part 5 (#5162) Reactor RTL styles with CSS Logical props. The change affects: Topic B DatePicker Menu SegmentedButton Topic P Select BarcodeScannerDialog Topic RD TabContainer RadioButton Topic RL MessageStrip (Multi)ComboBox, Token, Tokenizer, TableColumn, TableGroup the BarcodeScannerDialog does not need to set dir anymore as it depends on the Dialog and the DIalog haw been refactored already. the MessageStrip has been refactored previously, but the dir has not been removed from the template.
SAP · May 4, 2022 · 3236d56 · 3236d56
1 parent 9b2c705
commit 3236d56
Show file tree

Hide file tree

Showing 31 changed files with 49 additions and 203 deletions.
diff --git a/packages/fiori/src/BarcodeScannerDialog.hbs b/packages/fiori/src/BarcodeScannerDialog.hbs
@@ -1,6 +1,5 @@
 <ui5-dialog stretch
 	class="ui5-barcode-scanner-dialog-root"
-	dir={{effectiveDir}}
 	@ui5-before-open={{_startReader}}
 	@ui5-after-close={{_resetReader}}>
 	<div class="ui5-barcode-scanner-dialog-video-wrapper">

diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
@@ -39,7 +39,6 @@
 			input-icon
 			?pressed="{{_iconPressed}}"
 			@click="{{_arrowClick}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
@@ -35,7 +35,6 @@
 				@click="{{togglePicker}}"
 				input-icon
 				?pressed="{{_isPickerOpen}}"
-				dir="{{effectiveDir}}"
 			></ui5-icon>
 		{{/unless}}
 	</ui5-input>

diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs
@@ -1,7 +1,6 @@
 <ui5-responsive-popover
 	id="{{_id}}-menu-rp"
 	class="ui5-menu-rp"
-	dir={{effectiveDir}}
 	horizontal-align="Left"
 	placement-type={{placementType}}
 	vertical-align={{verticalAlign}}

diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -1,7 +1,6 @@
 <div class="{{classes.root}}"
 	id="{{_id}}"
 	role="note"
-	dir="{{effectiveDir}}"
 	aria-live="assertive"
 	aria-labelledby="{{_id}}"
 >

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -67,7 +67,6 @@
 			@mousedown="{{_onIconMousedown}}"
 			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
@@ -6,7 +6,6 @@
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"

diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
@@ -5,7 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}

diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}

diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
@@ -8,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -35,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}

diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
@@ -1,7 +1,4 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}

diff --git a/packages/main/src/TableColumn.hbs b/packages/main/src/TableColumn.hbs
@@ -2,7 +2,6 @@
 	scope="col"
 	part="column"
 	role="columnheader"
-	dir="{{effectiveDir}}"
 >
 	<slot></slot>
 </th>
diff --git a/packages/main/src/TableGroupRow.hbs b/packages/main/src/TableGroupRow.hbs
@@ -4,7 +4,6 @@
 	role="row"
 	aria-label={{ariaLabelText}}
 	tabindex="{{_tabIndex}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 >
 	<td colspan={{colSpan}}>

diff --git a/packages/main/src/Toast.hbs b/packages/main/src/Toast.hbs
@@ -2,7 +2,6 @@
 	<div class="ui5-toast-root"
 		role="alert"
 		style="{{styles.root}}"
-		dir="{{effectiveDir}}"
 		@mouseover="{{_onmouseover}}"
 		@mouseleave="{{_onmouseleave}}"
 		@transitionend="{{_ontransitionend}}">

diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs
@@ -5,7 +5,6 @@
 	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
-	dir="{{effectiveDir}}"
 	role="option"
 	aria-selected="{{selected}}"
 >

diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
@@ -1,7 +1,4 @@
-<div
-	dir="{{effectiveDir}}"
-	class="{{classes.wrapper}}"
->
+<div class="{{classes.wrapper}}">
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
 
 	<div
@@ -25,5 +22,4 @@
 			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
-
+</div>
diff --git a/packages/main/src/themes/InputIcon.css b/packages/main/src/themes/InputIcon.css
@@ -10,7 +10,7 @@
 	cursor: pointer;
 	outline: none;
 	padding: var(--_ui5_input_icon_padding);
-	border-left: var(--_ui5_input_icon_border);
+	border-inline-start: var(--_ui5_input_icon_border);
 	min-width: 1rem;
 	min-height: 1rem;
 	border-radius: var(--_ui5_input_icon_border_radius);
@@ -19,44 +19,23 @@
 [input-icon][pressed] {
 	background: var(--_ui5_input_icon_pressed_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
-	border-left: var(--_ui5_select_hover_icon_left_border);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
-[input-icon][dir="rtl"][pressed] {
-	border-left: none;
-	border-right: var(--_ui5_select_hover_icon_left_border);
-}
-
 [input-icon]:active {
 	background-color: var(--sapButton_Active_Background);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
-	border-left: var(--_ui5_select_hover_icon_left_border);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
-[input-icon][dir="rtl"]:active {
-	border-left: none;
-	border-right: var(--_ui5_select_hover_icon_left_border);
-}
-
 [input-icon]:not([pressed]):not(:active):hover {
 	background: var(--_ui5_input_icon_hover_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 }
 
 [input-icon]:hover {
-	border-left: var(--_ui5_select_hover_icon_left_border);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
-}
-
-[input-icon][dir="rtl"]:hover {
-	border-left: none;
-	border-right: var(--_ui5_select_hover_icon_left_border);
-}
-
-[input-icon][dir="rtl"] {
-	border-left: none;
-	margin-right: 0;
-	border-right: var(--_ui5_input_icon_border);
 }
diff --git a/packages/main/src/themes/Menu.css b/packages/main/src/themes/Menu.css
@@ -14,25 +14,25 @@
 .ui5-menu-item-icon-end {
 	display: inline-block;
 	vertical-align: middle;
-	padding-left: 0.5rem;
-	float: right;
+	padding-inline-start: 0.5rem;
+	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning as float and inline-block are incompatible */
 }
 
 .ui5-menu-item-no-icon-end {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
 	display: inline-block;
 	vertical-align: middle;
-	padding-left: 0.5rem;
-	float: right;
+	padding-inline-start: 0.5rem;
+	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning a float and inline-block are incompatible */
 }
 
 .ui5-menu-item-dummy-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
 	display: inline-block;
 	vertical-align: middle;
-	padding-right: 0.5rem;
+	padding-inline-end: 0.5rem;
 }
 
 .ui5-menu-dialog-header {
@@ -84,29 +84,5 @@
 
 .ui5-menu-rp[sub-menu] {
 	margin-top: 0.25rem;
-	margin-inline-start: -0.25rem;
-}
-
-.ui5-menu-rp[dir="rtl"][sub-menu] {
-	margin-top: 0.25rem;
-	margin-inline-start: 0;
-	margin-inline-end: 0.25rem;
-}
-
-[dir="rtl"] .ui5-menu-item-icon-end {
-	padding-left: 0;
-	padding-right: 0.5rem;
-	float: left;
-}
-
-[dir="rtl"] .ui5-menu-item-no-icon-end {
-	padding-left: 0;
-	padding-right: 0.5rem;
-	float: left;
-}
-
-[dir="rtl"] .ui5-menu-item-dummy-icon {
-	padding-right: 0;
-	padding-left: 0.5rem;
-}
-
+	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}
diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
@@ -101,7 +101,7 @@
 
 /* with label */
 :host([text]) .ui5-radio-root:focus:before {
-	right: 0;
+	inset-inline: var(--_ui5_radio_button_focus_dist) 0;
 }
 
 :host([text]) .ui5-radio-inner {
@@ -252,7 +252,7 @@
 [ui5-label].ui5-radio-label {
 	display: flex;
 	align-items: center;
-	padding-right: var(--_ui5_radio_button_label_offset);
+	padding-inline-end: var(--_ui5_radio_button_label_offset);
 	vertical-align: top;
 	max-width: 100%;
 	text-overflow: ellipsis;
@@ -294,21 +294,6 @@
 	flex-shrink: 0;
 }
 
-/* RTL */
-:host([text]) [dir="rtl"].ui5-radio-root:focus:before {
-	left: 0;
-	right: var(--_ui5_radio_button_rtl_focus_right);
-}
-
-[dir="rtl"] .ui5-radio-inner {
-	padding: var(--_ui5_radio_button_outer_ring_padding_rtl);
-}
-
-[dir="rtl"] [ui5-label].ui5-radio-label {
-	padding-left: var(--_ui5_radio_button_label_offset);
-	padding-right: 0;
-}
-
 /* ListItem Context */
 :host(.ui5-li-singlesel-radiobtn) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg-outer {
 	fill: var(--sapList_Background);

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
@@ -40,69 +40,36 @@
 }
 
 ::slotted([ui5-segmented-button-item]:nth-child(odd)) {
-	border-right: var(--_ui5_segmented_btn_inner_border_odd_child);
-	border-left: var(--_ui5_segmented_btn_inner_border_odd_child);
+	border-inline-end: var(--_ui5_segmented_btn_inner_border_odd_child);
+	border-inline-start: var(--_ui5_segmented_btn_inner_border_odd_child);
 }
 
 ::slotted([ui5-segmented-button-item][pressed]:nth-child(odd)),
 ::slotted([ui5-segmented-button-item][active]:nth-child(odd)) {
-	border-right: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
-	border-left: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
+	border-inline-end: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
+	border-inline-start: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
 }
 
 ::slotted([ui5-segmented-button-item]:last-child) {
-	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
-	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
-	border-right: var(--_ui5_segmented_btn_inner_border);
+	border-start-end-radius: var(--_ui5_segmented_btn_border_radius);
+	border-end-end-radius: var(--_ui5_segmented_btn_border_radius);
+	border-inline-end: var(--_ui5_segmented_btn_inner_border);
 }
 
 ::slotted([ui5-segmented-button-item][pressed]:last-child),
 ::slotted([ui5-segmented-button-item][active]:last-child) {
-	border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+	border-inline-end: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
 ::slotted([ui5-segmented-button-item]:first-child) {
-	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
-	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
-	border-left: var(--_ui5_segmented_btn_inner_border);
+	border-start-start-radius: var(--_ui5_segmented_btn_border_radius);
+	border-end-start-radius: var(--_ui5_segmented_btn_border_radius);
+	border-inline-start: var(--_ui5_segmented_btn_inner_border);
 }
 
 ::slotted([ui5-segmented-button-item][pressed]:first-child),
 ::slotted([ui5-segmented-button-item][active]:first-child) {
-	border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-}
-
-[dir="rtl"] ::slotted([ui5-segmented-button-item]: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: var(--_ui5_segmented_btn_inner_border);
-}
-
-[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:first-child),
-[dir="rtl"] ::slotted([ui5-segmented-button-item][active]:first-child) {
-	border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-}
-
-[dir="rtl"] ::slotted([ui5-segmented-button-item]: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: var(--_ui5_segmented_btn_inner_border);
-}
-
-[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:last-child),
-[dir="rtl"] ::slotted([ui5-segmented-button-item][active]:last-child) {
-	border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-}
-
-[dir="rtl"] ::slotted([ui5-segmented-button-item]: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);
+	border-inline-start: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
 ::slotted([ui5-segmented-button-item][active]:not([active]):hover) {