Skip to content

Commit ce1dc89

Browse files
dimovpetardimovpetar
committed
Merge branch 'main' of github.com:SAP/ui5-webcomponents into drag_drop_shadow_dom
2 parents 1a01e79 + b19d29f commit ce1dc89

File tree

16 files changed

+1000
-499
lines changed

16 files changed

+1000
-499
lines changed

‎docs/2-advanced/01-configuration.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,8 @@ Example:
270270
### themeRoot
271271
<a name="themeRoot"></a>
272272

273+
**Deprecated:** Please use the `theme` setting to pass both the theme and theme root, in the `theme@themeRoot` format instead
274+
273275
Allows you to set a URL, from which the framework will fetch the theme styles (CSS variables).
274276

275277
*Note:* This configuration setting is only applicable to custom themes, created with SAP Theme Designer.
@@ -283,6 +285,25 @@ Example:
283285
</script>
284286
```
285287

288+
or, the preferred new format:
289+
290+
```html
291+
<script data-ui5-config type="application/json">
292+
{
293+
"theme": "sap_horizon@https://my-example-host.com/"
294+
}
295+
</script>
296+
```
297+
298+
*Important:* You must explicitly allow specific origins for this configuration setting to work:
299+
300+
```html
301+
<head>
302+
<meta name="sap-allowed-theme-origins" content="https://my-example-host.com/,https://my-example-host2.com/">
303+
```
304+
305+
Failing to do so will result in a warning in the console and the theme root will not be set.
306+
286307
## Configuration Script
287308
<a name="script"></a>
288309

‎docs/2-advanced/12-theming.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,13 +102,13 @@ index.html?sap-ui-theme=mytheme@https://my-example-host.com/
102102

103103
In this example, "mytheme" theme will be applied and its resources (CSS variables specific to the theme) will be loaded from https://my-example-host.com/UI5/Base/baseLib/mytheme/css_variables.css.
104104

105-
**Note:** Certain security restrictions will apply before loading the custom theme. Absolute URLs to a different origin than the current page will return the current page as an origin. To allow certain origins, you have to use `<meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/">` tag inside the head of the page.
105+
**Note:** Certain security restrictions will apply before loading the custom theme. Absolute URLs to a different origin than the current page will return the current page as an origin. To allow certain origins, you have to use `<meta name="sap-allowed-theme-origins" content="https://my-example-host.com/">` tag inside the head of the page.
106106

107107
### Using JS API
108108

109109
To load a custom theme via URL, you can also use the available `setThemeRoot` method. The specified theme root will be applied to the currently set theme.
110110

111-
**Note:** Certain security restrictions will apply before loading the custom theme. Absolute URLs to a different origin than the current page will return the current page as an origin. To allow certain origins, you have to use `<meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/">` tag inside the head of the page.
111+
**Note:** Certain security restrictions will apply before loading the custom theme. Absolute URLs to a different origin than the current page will return the current page as an origin. To allow certain origins, you have to use `<meta name="sap-allowed-theme-origins" content="https://my-example-host.com/">` tag inside the head of the page.
112112

113113
```js
114114
import { setThemeRoot } from "@ui5/webcomponents-base/dist/config/ThemeRoot.js";

‎packages/ai/src/i18n/messagebundle_en_US_sappsd.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@
22
PROMPT_INPUT_CHARACTERS_LEFT=[[[{0} ċĥąŗąċţēŗş ŗēɱąįŋįŋğ]]]
33

44
PROMPT_INPUT_CHARACTERS_EXCEEDED=[[[{0} ċĥąŗąċţēŗş ŏʋēŗ ĺįɱįţ]]]
5+
6+
BUTTON_TOOLTIP_TEXT=[[[{0} ŵįţĥ Āŗţįƒįċįąĺ Ĭŋţēĺĺįğēŋċē]]]
7+

‎packages/base/cypress/specs/ConfigurationURL.cy.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe("Different themeRoot configurations", () => {
6060
cy.window()
6161
.then($el => {
6262
const metaTag = document.createElement("meta");
63-
metaTag.name = "sap-allowedThemeOrigins";
63+
metaTag.name = "sap-allowed-theme-origins";
6464
metaTag.content = "https://example.com";
6565

6666
$el.document.head.append(metaTag);
@@ -86,7 +86,7 @@ describe("Different themeRoot configurations", () => {
8686
// All allowed theme roots need to be described inside the meta tag.
8787
cy.window()
8888
.then($el => {
89-
const metaTag = $el.document.head.querySelector("[name='sap-allowedThemeOrigins']");
89+
const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
9090

9191
metaTag?.remove();
9292
})

‎packages/base/src/InitialConfiguration.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@ const getTheme = () => {
5656

5757
const getThemeRoot = () => {
5858
initConfiguration();
59+
60+
if (initialConfig.themeRoot === undefined) {
61+
return;
62+
}
63+
64+
if (!validateThemeRoot(initialConfig.themeRoot)) {
65+
console.warn(`The ${initialConfig.themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
66+
return;
67+
}
68+
5969
return initialConfig.themeRoot;
6070
};
6171

‎packages/base/src/config/ThemeRoot.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ const getThemeRoot = (): string | undefined => {
3434
*
3535
* **Note:** Certain security restrictions will apply before fetching the theme assets.
3636
* Absolute URLs to a different origin than the current page will result in using the current page as an origin.
37-
* To allow specific origins, use &lt;meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
37+
*
38+
* **Important:** To use this feature you must explicitly allow specific origins by using &lt;meta name="sap-allowed-theme-origins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
39+
* Failing to do so will result in a warning in the console and the theme root will not be set.
3840
*
3941
* @public
4042
* @since 1.14.0

‎packages/base/src/i18n/messagebundle_en_US_sappsd.properties

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
DRAG_DROP_MULTIPLE_TEXT=[[[{0} įţēɱş]]]

‎packages/base/src/validateThemeRoot.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@ const getMetaTagValue = (metaTagName: string) => {
88
};
99

1010
const validateThemeOrigin = (origin: string) => {
11-
const allowedOrigins = getMetaTagValue("sap-allowedThemeOrigins");
11+
const allowedOrigins = getMetaTagValue("sap-allowed-theme-origins") ?? getMetaTagValue("sap-allowedThemeOrigins"); // Prioritize the new meta tag name
1212

13-
return allowedOrigins && allowedOrigins.split(",").some(allowedOrigin => {
13+
// If no allowed origins are specified, block.
14+
if (!allowedOrigins) {
15+
return false;
16+
}
17+
18+
return allowedOrigins.split(",").some(allowedOrigin => {
1419
return allowedOrigin === "*" || origin === allowedOrigin.trim();
1520
});
1621
};

‎packages/base/test/pages/Configuration.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta name="sap-allowedThemeOrigins" content="https://example.com">
5+
<meta name="sap-allowed-theme-origins" content="https://example.com">
66

77
<title>Base package default test page</title>
88

0 commit comments

Comments
 (0)