Skip to content

Commit 4cd5cbd

Browse files
dobromiraboychevadobromiraboycheva
authored
Merge branch 'main' into user-settings-user-account
2 parents 6e258e8 + 43ff5de commit 4cd5cbd

16 files changed

Lines changed: 274 additions & 83 deletions

File tree

‎.github/workflows/release.yaml‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,6 @@ on:
1919
required: false
2020
default: ''
2121
type: string
22-
npm_tag:
23-
description: 'tag (hotfix only)'
24-
required: false
25-
default: ''
26-
type: string
2722

2823
# Scheduled automatic RC releases
2924
schedule:
@@ -184,7 +179,7 @@ jobs:
184179
185180
# ✅ Job 3: Hotfix Release Flow
186181
hotfix-release:
187-
if: ${{ github.event.inputs.release_type == 'hotfix' }}
182+
if: ${{ github.event.inputs.release_type == 'hotfix' && github.event.inputs.new_version != '' }}
188183
permissions:
189184
contents: write
190185
id-token: write
@@ -224,7 +219,9 @@ jobs:
224219
--create-release github
225220
226221
- name: Publish
227-
run: yarn lerna publish from-git --yes --dist-tag ${{ github.event.inputs.npm_tag || 'sf' }}
222+
run: |
223+
major_minor=$(echo "${{ github.event.inputs.new_version }}" | cut -d. -f1,2)
224+
yarn lerna publish from-git --yes --dist-tag "hotfix-${major_minor}"
228225
229226
# ✅ Job 4: Experimental Release Flow
230227
experimental-release:

‎packages/base/lib/generate-styles/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import fs from 'fs/promises';
22
import path from "path";
33
import CleanCSS from "clean-css";
4+
import { processComponentPackageFile } from '@ui5/webcomponents-tools/lib/css-processors/css-processor-themes.mjs';
45
import { pathToFileURL } from "url";
56

67
const generate = async () => {
8+
const packageJSON = JSON.parse(await fs.readFile("./package.json"))
79
await fs.mkdir("src/generated/css/", { recursive: true });
810

911
const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
1012
const filesPromises = files.map(async file => {
11-
let content = await fs.readFile(path.join("src/css/", file));
13+
const filePath = path.join("src/css/", file);
14+
let content = await fs.readFile(filePath);
1215
const res = new CleanCSS().minify(`${content}`);
13-
content = `export default \`${res.styles}\`;`;
16+
17+
// Scope used variables
18+
content = await processComponentPackageFile({ text: res.styles, path: filePath }, packageJSON);
19+
20+
content = `export default \`${content}\`;`;
21+
1422
return fs.writeFile(path.join("src/generated/css/", `${file}.ts`), content);
1523
});
1624

‎packages/base/src/theming/applyTheme.ts‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
2-
import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
2+
import { createOrUpdateStyle } from "../ManagedStyles.js";
33
import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
44
import { fireThemeLoaded } from "./ThemeLoaded.js";
5-
import { getFeature } from "../FeaturesRegistry.js";
65
import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
7-
import type OpenUI5Support from "../features/OpenUI5Support.js";
86
import { DEFAULT_THEME } from "../generated/AssetParameters.js";
97
import { getCurrentRuntimeIndex } from "../Runtimes.js";
108

@@ -31,10 +29,6 @@ const loadThemeBase = async (theme: string) => {
3129
}
3230
};
3331

34-
const deleteThemeBase = () => {
35-
removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
36-
};
37-
3832
const loadComponentPackages = async (theme: string, externalThemeName?: string) => {
3933
const registeredPackages = getRegisteredPackages();
4034

@@ -53,42 +47,34 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
5347
};
5448

5549
const detectExternalTheme = async (theme: string) => {
50+
if (getThemeRoot()) {
51+
await attachCustomThemeStylesToHead(theme);
52+
}
53+
5654
// If theme designer theme is detected, use this
5755
const extTheme = getThemeDesignerTheme();
5856
if (extTheme) {
5957
return extTheme;
6058
}
61-
62-
// If OpenUI5Support is enabled, try to find out if it loaded variables
63-
const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
64-
if (openUI5Support && openUI5Support.isOpenUI5Detected()) {
65-
const varsLoaded = openUI5Support.cssVariablesLoaded();
66-
if (varsLoaded) {
67-
return {
68-
themeName: openUI5Support.getConfigurationSettingsObject()?.theme, // just themeName
69-
baseThemeName: "", // baseThemeName is only relevant for custom themes
70-
};
71-
}
72-
} else if (getThemeRoot()) {
73-
await attachCustomThemeStylesToHead(theme);
74-
75-
return getThemeDesignerTheme();
76-
}
7759
};
7860

7961
const applyTheme = async (theme: string) => {
62+
// Detect external theme if available (e.g., from theme designer or custom theme root)
8063
const extTheme = await detectExternalTheme(theme);
8164

82-
// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
83-
if (!extTheme || theme !== extTheme.themeName) {
84-
await loadThemeBase(theme);
85-
} else {
86-
deleteThemeBase();
87-
}
88-
89-
// Always load component packages properties. For non-registered themes, try with the base theme, if any
65+
// Determine which theme to use for component packages:
66+
// 1. If the requested theme is registered, use it directly
67+
// 2. If external theme exists, use its base theme (e.g., "my_custom_theme" extends "sap_fiori_3")
68+
// 3. Otherwise, fallback to the default theme
9069
const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
91-
await loadComponentPackages(packagesTheme || DEFAULT_THEME, extTheme && extTheme.themeName === theme ? theme : undefined);
70+
const effectiveTheme = packagesTheme || DEFAULT_THEME;
71+
72+
// Load base theme properties
73+
await loadThemeBase(effectiveTheme);
74+
75+
// Load component-specific theme properties
76+
// Pass external theme name only if it matches the requested theme to avoid conflicts
77+
await loadComponentPackages(effectiveTheme, extTheme && extTheme.themeName === theme ? theme : undefined);
9278

9379
fireThemeLoaded(theme);
9480
};

‎packages/main/src/ColorPicker.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import type Input from "./Input.js";
2424
import type Slider from "./Slider.js";
2525

2626
import {
27+
COLORPICKER_LABEL,
28+
COLORPICKER_SLIDER_GROUP,
2729
COLORPICKER_ALPHA_SLIDER,
2830
COLORPICKER_HUE_SLIDER,
2931
COLORPICKER_HEX,
@@ -531,6 +533,14 @@ class ColorPicker extends UI5Element implements IFormInputElement {
531533
&& this._colorValue.B === value.b;
532534
}
533535

536+
get colorPickerLabel() {
537+
return ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
538+
}
539+
540+
get sliderGroupLabel() {
541+
return ColorPicker.i18nBundle.getText(COLORPICKER_SLIDER_GROUP);
542+
}
543+
534544
get hueSliderLabel() {
535545
return ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
536546
}

‎packages/main/src/ColorPickerTemplate.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import Button from "./Button.js";
66

77
export default function ColorPickerTemplate(this: ColorPicker) {
88
return (
9-
<section class="ui5-color-picker-root">
9+
<section
10+
class="ui5-color-picker-root"
11+
role="group"
12+
aria-label={this.colorPickerLabel}
13+
>
1014
<div
1115
class="ui5-color-picker-main-color"
1216
style={{ "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})` }}
@@ -24,7 +28,11 @@ export default function ColorPickerTemplate(this: ColorPicker) {
2428
></div>
2529
</div>
2630

27-
<div class="ui5-color-picker-sliders-wrapper">
31+
<div
32+
class="ui5-color-picker-sliders-wrapper"
33+
role="group"
34+
aria-label={this.sliderGroupLabel}
35+
>
2836
<Slider
2937
disabled={this.inputsDisabled}
3038
class="ui5-color-picker-hue-slider"

‎packages/main/src/i18n/messagebundle.properties‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,17 @@ COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
142142
#XTIT: Color Palette dialog button text to set the default color
143143
COLOR_PALETTE_DEFAULT_COLOR_TEXT=Default Color
144144

145+
#XACT: ARIA information for the ColorPicker slider group
146+
COLORPICKER_LABEL= Color Picker
147+
148+
#XACT: ARIA information for the ColorPicker slider group
149+
COLORPICKER_SLIDER_GROUP=Color Sliders
150+
145151
#XACT: ARIA information for the ColorPicker Alpha slider
146-
COLORPICKER_ALPHA_SLIDER=Alpha control
152+
COLORPICKER_ALPHA_SLIDER=Alpha slider
147153

148154
#XACT: ARIA information for the ColorPicker Hue slider
149-
COLORPICKER_HUE_SLIDER=Hue control
155+
COLORPICKER_HUE_SLIDER=Hue slider
150156

151157
#XTOL: Six symbol hexadecimal group representing CSS color hex string
152158
COLORPICKER_HEX=Hexadecimal

‎packages/main/src/themes/base/Input-parameters.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@
6969
--_ui5_input_icon_wrapper_state_height: 100%;
7070
--_ui5_input_icon_wrapper_success_state_height: 100%;
7171
--_ui5-input-icons-count: 0;
72-
--_ui5_input_margin_top_bottom: 0.1875rem;
7372
--_ui5_input_tokenizer_min_width: 3.25rem;
7473
}
7574

@@ -87,4 +86,5 @@
8786
--_ui5_input_error_warning_custom_focused_icon_padding: .1875rem .5rem;
8887
--_ui5_input_information_custom_icon_padding: .1875rem .5rem;
8988
--_ui5_input_information_custom_focused_icon_padding: .1875rem .5rem;
89+
--_ui5_input_margin_top_bottom: 0.1875rem;
9090
}

‎packages/main/test/pages/theming/Themes.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Theming</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta charset="utf-8">
9+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
10+
</head>
11+
12+
<body>
13+
<p><strong>Test Page 1:</strong> Default theming - Tests the component with default theme settings without any
14+
external styles or theme changes.</p>
15+
<p>Expected theme <strong>sap_horizon</strong></p>
16+
17+
<ui5-button>Some button</ui5-button>
18+
</body>
19+
20+
</html>

‎packages/main/test/pages/theming/Themes2.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Theming</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta charset="utf-8">
9+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
10+
</head>
11+
12+
<body>
13+
<p><strong>Test Page 6:</strong> Theme change without external styles - Tests programmatic theme switching
14+
behavior without any external CSS interference to verify pure theme transition functionality.</p>
15+
<p>Expected theme <strong>sap_horizon_hcb</strong></p>
16+
<ui5-button>Some button</ui5-button>
17+
18+
<script type="module">
19+
setTimeout(() => {
20+
window["sap-ui-webcomponents-bundle"].configuration.setTheme("sap_horizon_hcb");
21+
}, 1000);
22+
</script>
23+
</body>
24+
25+
</html>

‎packages/main/test/pages/theming/Themes3.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Theming</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta charset="utf-8">
9+
<link rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content/content/Base/baseLib/sap_belize/css_variables.css">
11+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
12+
</head>
13+
14+
<body>
15+
<p><strong>Test Page 2:</strong> Default theming with preloaded external styles - Tests how components behave when
16+
external CSS is loaded before component initialization.</p>
17+
<p>Expected theme <strong>sap_belize</strong></p>
18+
19+
<ui5-button>Some button</ui5-button>
20+
</body>
21+
22+
</html>

0 commit comments

Comments
 (0)