Skip to content

Commit 37a00b2

Browse files
vladitasevilhan007
vladitasev
authored and
ilhan007
committed
feature(framework): Deprecate the RTL configuration setting (#1733)
1 parent 11682a2 commit 37a00b2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+161
-142
lines changed

‎docs/Configuration.md

+6-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ There are several configuration settings that affect all UI5 Web Components glob
99
------------ | ----------------------------------------------- | ------------- | -------------------------------------------------------------
1010
[theme](#theme) | sap_fiori_3, sap_fiori_3_dark, sap_belize, sap_belize_hcb, sap_belize_hcw | sap_fiori_3 | Visual theme
1111
language | en, de, es, etc... | en | Language to be used for translatable texts
12-
[RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left
12+
[RTL](#rtl) (**deprecated since 1.0.0-rc.8**) | true, false | false | When true, sets global text direction to right-to-left
1313
[animationMode](#animationMode) | full, basic, minimal, none | full | Defines different animation scenarios or levels
1414
calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components
1515
[noConflict](#noConflict) | true, false | false | When set to true, all events will be fired with a "ui5-" prefix only
@@ -30,10 +30,11 @@ The `theme` setting values above are the technical names of our themes.
3030

3131
<a name="rtl"></a>
3232
### RTL
33-
34-
When the `rtl` setting is set to `true`, UI5 Web Components will adjust their styling accordingly.
35-
However, you should also set the HTML attribute `dir` to `rtl` on the `body` or `html`, or any other relevant region of your application
36-
so that the rest of your application is also affected.
33+
**Deprecated as of 1.0.0-rc.8**
34+
35+
In order to have RTL mode, just set the HTML attribute `dir` to `rtl` on the `body`, `html` or any other relevant region of your application.
36+
37+
This configuration setting should not be used by applications. It is only internally used for specific integration scenarios.
3738

3839
<a name="animationMode"></a>
3940
### Animation Mode
@@ -95,7 +96,6 @@ In order to provide configuration settings, include the following ```<script>```
9596
```html
9697
<script data-ui5-config type="application/json">
9798
{
98-
"rtl": true,
9999
"language": "ja",
100100
"calendarType": "Japanese",
101101
"formatSettings": {
@@ -121,7 +121,6 @@ To do so, please import the desired functionality from the respective `"@ui5/web
121121
```js
122122
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
123123
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
124-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
125124
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
126125
import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
127126
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";

‎docs/Public Module Imports.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,6 @@ In order to be able to use Buddhist, Islamic, Japanese, or Persian calendar with
342342
```js
343343
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
344344
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
345-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
346345
import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
347346
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
348347
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
@@ -362,7 +361,7 @@ from OpenUI5 configuration and resources.
362361

363362
When you import the above module:
364363
1. OpenUI5 configuration takes precedence over UI5 Web Components configuration
365-
for all common entities (theme, language, RTL, etc...). In addition, changing the theme
364+
for all common entities (theme, language, etc...). In addition, changing the theme
366365
in OpenUI5 will also change the theme in UI5 Web Components.
367366
2. Fonts will not be loaded twice (just once by OpenUI5, and reused).
368367
3. Locale Data assets will not be fetched twice (just once by OpenUI5, and reused).

‎packages/base/src/SystemCSSVars.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import createStyleInHead from "./util/createStyleInHead.js";
2+
3+
const systemCSSVars = `
4+
:root {
5+
--_ui5_content_density:cozy;
6+
}
7+
8+
[data-ui5-compact-size],
9+
.ui5-content-density-compact,
10+
.sapUiSizeCompact {
11+
--_ui5_content_density:compact;
12+
}
13+
14+
[dir="rtl"] {
15+
--_ui5_dir:rtl;
16+
}
17+
18+
[dir="ltr"] {
19+
--_ui5_dir:ltr;
20+
}
21+
`;
22+
23+
const insertSystemCSSVars = () => {
24+
if (document.querySelector(`head>style[data-ui5-system-css-vars]`)) {
25+
return;
26+
}
27+
28+
createStyleInHead(systemCSSVars, { "data-ui5-system-css-vars": "" });
29+
};
30+
31+
export default insertSystemCSSVars;

‎packages/base/src/UI5Element.js

+33
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import RenderScheduler from "./RenderScheduler.js";
66
import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
77
import DOMObserver from "./compatibility/DOMObserver.js";
88
import { skipOriginalEvent } from "./config/NoConflict.js";
9+
import { getRTL } from "./config/RTL.js";
910
import getConstructableStyle from "./theming/getConstructableStyle.js";
1011
import createComponentStyleTag from "./theming/createComponentStyleTag.js";
1112
import getEffectiveStyle from "./theming/getEffectiveStyle.js";
@@ -26,6 +27,8 @@ let autoId = 0;
2627
const elementTimeouts = new Map();
2728

2829
const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
30+
const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
31+
2932
/**
3033
* Base class for all UI5 Web Components
3134
*
@@ -661,6 +664,36 @@ class UI5Element extends HTMLElement {
661664
return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
662665
}
663666

667+
/**
668+
* Determines whether the component should be rendered in RTL mode or not.
669+
* Returns: "rtl", "ltr" or undefined
670+
*
671+
* @public
672+
* @returns {String|undefined}
673+
*/
674+
get effectiveDir() {
675+
const doc = window.document;
676+
const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
677+
const locallyAppliedDir = getComputedStyle(this).getPropertyValue(GLOBAL_DIR_CSS_VAR);
678+
679+
// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
680+
if (dirValues.includes(locallyAppliedDir)) {
681+
return locallyAppliedDir;
682+
}
683+
if (dirValues.includes(this.dir)) {
684+
return this.dir;
685+
}
686+
if (dirValues.includes(doc.documentElement.dir)) {
687+
return doc.documentElement.dir;
688+
}
689+
if (dirValues.includes(doc.body.dir)) {
690+
return doc.body.dir;
691+
}
692+
693+
// Finally, check the configuration for explicitly set RTL or language-implied RTL
694+
return getRTL() ? "rtl" : undefined;
695+
}
696+
664697
updateStaticAreaItemContentDensity() {
665698
if (this.staticAreaItem) {
666699
this.staticAreaItem._updateContentDensity(this.isCompact);

‎packages/base/src/boot.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import whenDOMReady from "./util/whenDOMReady.js";
22
import insertFontFace from "./FontFace.js";
3+
import insertSystemCSSVars from "./SystemCSSVars.js";
34
import { getTheme } from "./config/Theme.js";
45
import applyTheme from "./theming/applyTheme.js";
56
import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
@@ -22,6 +23,7 @@ const boot = () => {
2223
await applyTheme(getTheme());
2324
OpenUI5Support && OpenUI5Support.attachListeners();
2425
insertFontFace();
26+
insertSystemCSSVars();
2527
await whenPolyfillLoaded();
2628
resolve();
2729
});

‎packages/fiori/src/NotificationListGroupItem.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@keydown="{{_onkeydown}}"
66
role="option"
77
tabindex="{{_tabIndex}}"
8-
dir="{{rtl}}"
8+
dir="{{effectiveDir}}"
99
aria-labelledby="{{ariaLabelledBy}}"
1010
>
1111
<div class="ui5-nli-group-header">
@@ -75,7 +75,7 @@
7575
<slot></slot>
7676
</ui5-list>
7777

78-
{{#if busy}}
78+
{{#if busy}}
7979
<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
8080
{{/if}}
81-
</li>
81+
</li>

‎packages/fiori/src/NotificationListItem.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@click="{{_onclick}}"
88
role="option"
99
tabindex="{{_tabIndex}}"
10-
dir="{{rtl}}"
10+
dir="{{effectiveDir}}"
1111
aria-labelledby="{{ariaLabelledBy}}"
1212
>
1313
<div class="ui5-nli-actions">
@@ -92,7 +92,7 @@
9292
<slot name="avatar"></slot>
9393
</div>
9494

95-
{{#if busy}}
95+
{{#if busy}}
9696
<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
9797
{{/if}}
98-
</li>
98+
</li>

‎packages/fiori/src/NotificationListItemBase.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
2-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
32
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
43

54
import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
@@ -184,10 +183,6 @@ class NotificationListItemBase extends ListItemBase {
184183
});
185184
}
186185

187-
get rtl() {
188-
return getRTL() ? "rtl" : undefined;
189-
}
190-
191186
/**
192187
* Event handlers
193188
*/

‎packages/fiori/src/ShellBar.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div
22
class="{{classes.wrapper}}"
3-
dir="{{rtl}}"
3+
dir="{{effectiveDir}}"
44
role="banner"
55
aria-label="{{_shellbarText}}"
66
>

‎packages/fiori/src/ShellBar.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
44
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
55
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
66
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
7-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
87
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
98
import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
109
import List from "@ui5/webcomponents/dist/List.js";
@@ -570,7 +569,7 @@ class ShellBar extends UI5Element {
570569
_handleActionsOverflow() {
571570
const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
572571
const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
573-
const isRTL = getRTL();
572+
const isRTL = this.effectiveDir === "rtl";
574573

575574
let overflowCount = [].filter.call(icons, icon => {
576575
const iconRect = icon.getBoundingClientRect();
@@ -645,7 +644,7 @@ class ShellBar extends UI5Element {
645644
const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
646645
const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
647646
const overflowButtonRect = overflowButton.getBoundingClientRect();
648-
const isRTL = getRTL();
647+
const isRTL = this.effectiveDir === "rtl";
649648
let right = "";
650649

651650
if (isRTL) {
@@ -880,7 +879,7 @@ class ShellBar extends UI5Element {
880879
get styles() {
881880
return {
882881
searchField: {
883-
[getRTL() ? "left" : "right"]: this._searchField.right,
882+
[this.effectiveDir === "rtl" ? "left" : "right"]: this._searchField.right,
884883
"top": `${parseInt(this._searchField.top)}px`,
885884
},
886885
items: {
@@ -921,11 +920,7 @@ class ShellBar extends UI5Element {
921920
}
922921

923922
get popoverHorizontalAlign() {
924-
return getRTL() ? "Left" : "Right";
925-
}
926-
927-
get rtl() {
928-
return getRTL() ? "rtl" : undefined;
923+
return this.effectiveDir === "rtl" ? "Left" : "Right";
929924
}
930925

931926
get hasSearchField() {

‎packages/main/src/Badge.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui5-badge-root" dir="{{rtl}}">
1+
<div class="ui5-badge-root" dir="{{effectiveDir}}">
22
{{#if hasIcon}}
33
<slot name="icon"></slot>
44
{{/if}}
@@ -8,4 +8,4 @@
88
{{/if}}
99

1010
<span class="ui5-hidden-text">{{badgeDescription}}</span>
11-
</div>
11+
</div>

‎packages/main/src/Badge.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
54

65
// Template
76
import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -129,10 +128,6 @@ class Badge extends UI5Element {
129128
return !!this.icon.length;
130129
}
131130

132-
get rtl() {
133-
return getRTL() ? "rtl" : undefined;
134-
}
135-
136131
get badgeDescription() {
137132
return this.i18nBundle.getText(BADGE_DESCRIPTION);
138133
}

‎packages/main/src/Button.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
?disabled="{{disabled}}"
55
data-sap-focus-ref
66
{{> ariaPressed}}
7-
dir="{{rtl}}"
7+
dir="{{effectiveDir}}"
88
@focusout={{_onfocusout}}
99
@focusin={{_onfocusin}}
1010
@click={{_onclick}}

‎packages/main/src/Button.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
4-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
54
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
65
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
76
import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
@@ -330,10 +329,6 @@ class Button extends UI5Element {
330329
this.focused = true;
331330
}
332331

333-
get rtl() {
334-
return getRTL() ? "rtl" : undefined;
335-
}
336-
337332
get hasButtonType() {
338333
return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
339334
}

‎packages/main/src/CalendarHeader.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div
22
class="ui5-calheader-root"
3-
dir="{{rtl}}"
3+
dir="{{effectiveDir}}"
44
@keydown={{_onkeydown}}
55
>
66
<div

‎packages/main/src/CalendarHeader.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
4-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
54
import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
65
import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
76
import Button from "./Button.js";
@@ -121,10 +120,6 @@ class CalendarHeader extends UI5Element {
121120
}
122121
}
123122

124-
get rtl() {
125-
return getRTL() ? "rtl" : undefined;
126-
}
127-
128123
static async onDefine() {
129124
await Promise.all([
130125
await Button.define(),

‎packages/main/src/Card.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div
22
class="{{classes.main}}"
3-
dir="{{rtl}}"
3+
dir="{{effectiveDir}}"
44
role="region"
55
aria-labelledby="{{_id}}-desc {{_id}}-heading">
66
{{#if hasHeader}}

‎packages/main/src/Card.js

-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
44
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
5-
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
65
import CardTemplate from "./generated/templates/CardTemplate.lit.js";
76
import Icon from "./Icon.js";
87

@@ -197,10 +196,6 @@ class Card extends UI5Element {
197196
return !!(this.heading || this.subheading || this.status || this.avatar);
198197
}
199198

200-
get rtl() {
201-
return getRTL() ? "rtl" : undefined;
202-
}
203-
204199
get ariaCardRoleDescription() {
205200
return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
206201
}

‎packages/main/src/CheckBox.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@keydown="{{_onkeydown}}"
1212
@keyup="{{_onkeyup}}"
1313
@click="{{_onclick}}"
14-
dir="{{rtl}}"
14+
dir="{{effectiveDir}}"
1515
>
1616
<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
1717
{{#if checked}}

0 commit comments

Comments
 (0)