Skip to content

Commit 89ded4d

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
authored
Merge branch 'main' into user-settings
2 parents dc70d2f + 91fb9eb commit 89ded4d

1,176 files changed

Lines changed: 43550 additions & 1771 deletions

File tree

Some content is hidden

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

‎.github/actions/extractChangelog.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { promises as fs } from 'node:fs';
88
*/
99
const extractVersionChangelog = (changelog, version) => {
1010
const escapedVersion = version.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
11-
const regex = new RegExp(`^# \\[${escapedVersion}\\].*?\\n([\\s\\S]*?)(?=^# \\[|$)`, 'm');
11+
const regex = new RegExp(`^#{1,2} \\[${escapedVersion}\\][^\\n]*\\n([\\s\\S]*?)(?=\\n#{1,2} \\[|$(?!\\n))`, 'm');
1212
const match = changelog.match(regex);
1313

1414
if (match) {

‎.github/dependabot.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: "npm"
4+
directory: "/"
5+
schedule:
6+
interval: "weekly"
7+
allow:
8+
- dependency-name: "@sap-theming/theming-base-content"

‎.github/workflows/ci-test-website.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@ jobs:
2121
export NODE_OPTIONS="--max_old_space_size=4096"
2222
yarn install
2323
yarn ci:deploy:nightly
24+
25+
- name: Typecheck Samples
26+
run: yarn workspace @ui5/webcomponents-website typecheck:samples

‎.github/workflows/pr-check-react-samples.yaml‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
name: PR - React Samples Check
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- 'packages/website/docs/_samples/**/sample.html'
7+
- 'packages/website/docs/_samples/**/main.js'
8+
- 'packages/website/docs/_samples/**/main.css'
9+
- 'packages/website/docs/_samples/**/sample.tsx'
10+
11+
jobs:
12+
check:
13+
runs-on: ubuntu-latest
14+
permissions:
15+
pull-requests: write
16+
steps:
17+
- uses: actions/checkout@v4
18+
19+
- name: Check sample sync
20+
uses: actions/github-script@v7
21+
with:
22+
script: |
23+
const { data: files } = await github.rest.pulls.listFiles({
24+
owner: context.repo.owner,
25+
repo: context.repo.repo,
26+
pull_number: context.issue.number,
27+
per_page: 300,
28+
});
29+
30+
const samplesDir = 'packages/website/docs/_samples/';
31+
const htmlSampleDirs = new Set();
32+
const reactSampleDirs = new Set();
33+
34+
for (const file of files) {
35+
if (!file.filename.startsWith(samplesDir)) continue;
36+
37+
const rel = file.filename.slice(samplesDir.length);
38+
const dir = rel.substring(0, rel.lastIndexOf('/'));
39+
40+
if (rel.endsWith('/sample.html') || rel.endsWith('/main.js') || rel.endsWith('/main.css')) {
41+
htmlSampleDirs.add(dir);
42+
}
43+
if (rel.endsWith('/sample.tsx')) {
44+
reactSampleDirs.add(dir);
45+
}
46+
}
47+
48+
const htmlOnly = [...htmlSampleDirs].filter(dir => !reactSampleDirs.has(dir)).sort();
49+
const reactOnly = [...reactSampleDirs].filter(dir => !htmlSampleDirs.has(dir)).sort();
50+
51+
if (htmlOnly.length === 0 && reactOnly.length === 0) {
52+
console.log('All changed samples are in sync.');
53+
return;
54+
}
55+
56+
const sections = ['### Sample sync reminder', ''];
57+
58+
if (htmlOnly.length > 0) {
59+
sections.push(
60+
'HTML sample changed but **React sample** (`sample.tsx`) not updated:',
61+
'',
62+
...htmlOnly.map(dir => `- \`${dir}\``),
63+
'',
64+
);
65+
}
66+
67+
if (reactOnly.length > 0) {
68+
sections.push(
69+
'React sample changed but **HTML sample** (`sample.html`/`main.js`/`main.css`) not updated:',
70+
'',
71+
...reactOnly.map(dir => `- \`${dir}\``),
72+
'',
73+
);
74+
}
75+
76+
sections.push('Please keep both samples in sync, or ignore if the change does not apply to both.');
77+
const body = sections.join('\n');
78+
79+
// Check for existing comment to avoid duplicates
80+
const marker = 'Sample sync reminder';
81+
const { data: comments } = await github.rest.issues.listComments({
82+
owner: context.repo.owner,
83+
repo: context.repo.repo,
84+
issue_number: context.issue.number,
85+
});
86+
const existing = comments.find(c =>
87+
c.user.type === 'Bot' && c.body.includes(marker)
88+
);
89+
90+
if (existing) {
91+
await github.rest.issues.updateComment({
92+
owner: context.repo.owner,
93+
repo: context.repo.repo,
94+
comment_id: existing.id,
95+
body,
96+
});
97+
} else {
98+
await github.rest.issues.createComment({
99+
owner: context.repo.owner,
100+
repo: context.repo.repo,
101+
issue_number: context.issue.number,
102+
body,
103+
});
104+
}

‎.github/workflows/release.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ jobs:
287287
tag_name: `v${version}`,
288288
name: `v${version}`,
289289
body: changelog,
290+
make_latest: 'false',
290291
});
291292
292293
- name: Publish

‎CHANGELOG.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,92 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [2.21.0-rc.0](https://github.com/UI5/webcomponents/compare/v2.20.0...v2.21.0-rc.0) (2026-03-12)
7+
8+
9+
### Bug Fixes
10+
11+
* **release:** correct changelog extraction regex ([#13214](https://github.com/UI5/webcomponents/issues/13214)) ([1500ada](https://github.com/UI5/webcomponents/commit/1500ada0086b5e049f3e719245e05fffbf3704ba))
12+
* **release:** prevent hotfix releases from being marked as latest ([#13247](https://github.com/UI5/webcomponents/issues/13247)) ([cb6cf7b](https://github.com/UI5/webcomponents/commit/cb6cf7bfad5cfdee6fc141ca2df880bf35f65e74))
13+
* **ui5-base:** scope all registered tags by default ([#13198](https://github.com/UI5/webcomponents/issues/13198)) ([ed08bf3](https://github.com/UI5/webcomponents/commit/ed08bf350b660c9d0a86468da03194a2c84a5622))
14+
* **ui5-breadcrumbs:** use correct color token for separator and current location ([#13199](https://github.com/UI5/webcomponents/issues/13199)) ([979f966](https://github.com/UI5/webcomponents/commit/979f966533eb3ef1004722d54bd8ae7a20724b89))
15+
* **ui5-busy-indicator:** add correct color for HCB and HCW theme ([#13180](https://github.com/UI5/webcomponents/issues/13180)) ([87f4fe9](https://github.com/UI5/webcomponents/commit/87f4fe9d35bb9b6a1935a10c2b568732b78cc3f5)), closes [#13147](https://github.com/UI5/webcomponents/issues/13147)
16+
* **ui5-button:** update aria-label when accessibleNameRef target changes ([#13104](https://github.com/UI5/webcomponents/issues/13104)) ([2e5a81c](https://github.com/UI5/webcomponents/commit/2e5a81cbcdfc7173a3d4f368f77a5085dc78df08)), closes [#13101](https://github.com/UI5/webcomponents/issues/13101)
17+
* **ui5-calendar:** correct focus indicator color in calendar header and day picker ([#13094](https://github.com/UI5/webcomponents/issues/13094)) ([c26ee88](https://github.com/UI5/webcomponents/commit/c26ee8820f9dc01dec9705e0f5cdc7c69b88ad1d))
18+
* **ui5-calendar:** make header text accessible ([#13254](https://github.com/UI5/webcomponents/issues/13254)) ([07414b1](https://github.com/UI5/webcomponents/commit/07414b1da5b68d8c76c12044e4d9c191754b8633))
19+
* **ui5-carousel:** fix navigateTo method ([#13189](https://github.com/UI5/webcomponents/issues/13189)) ([73fe253](https://github.com/UI5/webcomponents/commit/73fe253f314680cb56549fbdc28babd8e4d34ffe))
20+
* **ui5-color-palette:** add outline to selected items on mobile ([#13095](https://github.com/UI5/webcomponents/issues/13095)) ([f4bb986](https://github.com/UI5/webcomponents/commit/f4bb986cb1ccf7008b2bb0fa2f4da7f0667bca72))
21+
* **ui5-color-palette:** correct tooltip for recent colors ([#13096](https://github.com/UI5/webcomponents/issues/13096)) ([7a2e0e6](https://github.com/UI5/webcomponents/commit/7a2e0e62a1413b973703b1bc7f499d52d3b6645b))
22+
* **ui5-date-picker:** correct mobile dialog header styling and text ([#13100](https://github.com/UI5/webcomponents/issues/13100)) ([6c752a0](https://github.com/UI5/webcomponents/commit/6c752a024d87f4bd1496734470a26f4dd669f8d5))
23+
* **ui5-dialog:** prevent native drag behavior only for header ([#13177](https://github.com/UI5/webcomponents/issues/13177)) ([828b4c6](https://github.com/UI5/webcomponents/commit/828b4c6148380461e29ab0215f27ef79efb65bf6))
24+
* **ui5-dialog:** remove ui5-bar's padding when slotted as header or footer ([#13201](https://github.com/UI5/webcomponents/issues/13201)) ([5ac39e7](https://github.com/UI5/webcomponents/commit/5ac39e7cb501287f5cad171aca1e359ad9c03d6f))
25+
* **ui5-dynamic-page:** guard against null scrollContainer in _toggleHeader ([#13255](https://github.com/UI5/webcomponents/issues/13255)) ([14873e8](https://github.com/UI5/webcomponents/commit/14873e8037670c1588c19cf1a5676079eea1b74a)), closes [#13236](https://github.com/UI5/webcomponents/issues/13236)
26+
* **ui5-icon:** enable activation via screen reader virtual cursor ([#13156](https://github.com/UI5/webcomponents/issues/13156)) ([b2e6658](https://github.com/UI5/webcomponents/commit/b2e66581ae74a89388f3a2eedbe5d040ae1d03a7)), closes [#11454](https://github.com/UI5/webcomponents/issues/11454)
27+
* **ui5-illustrated-message:** add v5 loader in tnt illustrations ([#13160](https://github.com/UI5/webcomponents/issues/13160)) ([3dc4694](https://github.com/UI5/webcomponents/commit/3dc4694ecbb9ca3c2e8061fccaf917bfa211861a)), closes [#8145](https://github.com/UI5/webcomponents/issues/8145) [#8145](https://github.com/UI5/webcomponents/issues/8145)
28+
* **ui5-input:** correct value when leaving suggestions ([#13218](https://github.com/UI5/webcomponents/issues/13218)) ([5027745](https://github.com/UI5/webcomponents/commit/5027745180e611987ca539e16d54f4c478f4cdaa))
29+
* **ui5-input:** preserve case when input is used with suggestions ([#13137](https://github.com/UI5/webcomponents/issues/13137)) ([323f40d](https://github.com/UI5/webcomponents/commit/323f40dd7ec8ee0fc33071c7b20951586fd39c05))
30+
* **ui5-menu:** improve accessibility for end content and loading state ([#13099](https://github.com/UI5/webcomponents/issues/13099)) ([bece95c](https://github.com/UI5/webcomponents/commit/bece95cc8c6edac8294e4e5003ba0d14a5a19f25))
31+
* **ui5-multi-input:** expand tokenizer on focus in ([#13191](https://github.com/UI5/webcomponents/issues/13191)) ([cd993af](https://github.com/UI5/webcomponents/commit/cd993af5c5d636f8a74adecb71c17f7c28701e03)), closes [#13179](https://github.com/UI5/webcomponents/issues/13179)
32+
* **ui5-multiinput:** correct backspace behavior in case of value ([#13219](https://github.com/UI5/webcomponents/issues/13219)) ([08a53cb](https://github.com/UI5/webcomponents/commit/08a53cb388054d5373f6cdbf426001bb8d5ea163))
33+
* **ui5-search:** fix suggestion item selected state border-bottom ([#13209](https://github.com/UI5/webcomponents/issues/13209)) ([48a7cb2](https://github.com/UI5/webcomponents/commit/48a7cb29071db6723d5fd06a943940c68f42f508))
34+
* **ui5-step-input:** value with group separator is parsed correctly ([46a15b3](https://github.com/UI5/webcomponents/commit/46a15b39f69050a5c33b8977ef782a006c757019))
35+
* **ui5-switch:** prevent duplicate accessibility announcements ([#13098](https://github.com/UI5/webcomponents/issues/13098)) ([9487f22](https://github.com/UI5/webcomponents/commit/9487f220f6d7c7f10c208a59af092e4097ca6f5e))
36+
* **ui5-time-picker:** apply AM/PM selection on Enter key ([#13097](https://github.com/UI5/webcomponents/issues/13097)) ([a4710b3](https://github.com/UI5/webcomponents/commit/a4710b3271ccf793e8e4d93bba73674dfd6b4d56))
37+
* **ui5-tokenizer:** correct focus behavior on backspace ([#13221](https://github.com/UI5/webcomponents/issues/13221)) ([48692b5](https://github.com/UI5/webcomponents/commit/48692b5f8fb35cd2a6acc051cd08ee01be540be5))
38+
* **ui5-user-menu:** prevent title flickering in header on open ([#13239](https://github.com/UI5/webcomponents/issues/13239)) ([9304032](https://github.com/UI5/webcomponents/commit/93040320b0958577d04018357f408e02751c59e7)), closes [#12874](https://github.com/UI5/webcomponents/issues/12874)
39+
* **website:** correct TypeScript type mismatches in React samples ([cac2899](https://github.com/UI5/webcomponents/commit/cac28993ced360885961f4fb5c1193d57f07081b))
40+
* **website:** fix image paths in React preview for subpath deployments ([f22525f](https://github.com/UI5/webcomponents/commit/f22525f1102701ebfcb6f0bfce409c19d4e9c9cc))
41+
42+
43+
### Features
44+
45+
* **ui5-base:** store import.meta.url in runtime registration data ([#13235](https://github.com/UI5/webcomponents/issues/13235)) ([13b71d5](https://github.com/UI5/webcomponents/commit/13b71d5608f3e310684bae171f6255a0325ace62))
46+
* **ui5-search:** update autocomplete behavior when focusing list items ([#13197](https://github.com/UI5/webcomponents/issues/13197)) ([ad3ab3c](https://github.com/UI5/webcomponents/commit/ad3ab3cf90a6dce24647914847325604e5c0df35))
47+
* **ui5-time-picker:** display-value and value-format properties are introduced ([f82f678](https://github.com/UI5/webcomponents/commit/f82f678cc7ed441af686671adb6870aa9c5acd86))
48+
49+
50+
51+
52+
53+
# [2.20.0](https://github.com/UI5/webcomponents/compare/v2.20.0-rc.3...v2.20.0) (2026-03-05)
54+
55+
56+
### Bug Fixes
57+
58+
* **ui5-date*:** remove seconds from timezone tests ([#13192](https://github.com/UI5/webcomponents/issues/13192)) ([b6fa4db](https://github.com/UI5/webcomponents/commit/b6fa4db6bc9449818f3908387bcc5b2b6ee2d813))
59+
60+
61+
### Features
62+
63+
* **ui5-shellbar:** add application-level overflow sample ([#13115](https://github.com/UI5/webcomponents/issues/13115)) ([570513f](https://github.com/UI5/webcomponents/commit/570513f27ac258a8d592c8d0b908501d24143b01))
64+
65+
66+
67+
68+
69+
# [2.20.0-rc.3](https://github.com/UI5/webcomponents/compare/v2.20.0-rc.2...v2.20.0-rc.3) (2026-03-05)
70+
71+
72+
### Bug Fixes
73+
74+
* **ui5-combobox:** enable case insensitive selection ([#13172](https://github.com/UI5/webcomponents/issues/13172)) ([b0a425e](https://github.com/UI5/webcomponents/commit/b0a425ea36434d6ed480d44be4595fdc20001236))
75+
* **ui5-link:** open new page in correct tab ([#13120](https://github.com/UI5/webcomponents/issues/13120)) ([8eeef94](https://github.com/UI5/webcomponents/commit/8eeef9441a8ff46bc875bf729da0c8d02199b9b4)), closes [#13116](https://github.com/UI5/webcomponents/issues/13116)
76+
* **ui5-rating-indicator:** update custom icon properties names and default values ([#13151](https://github.com/UI5/webcomponents/issues/13151)) ([4180a6a](https://github.com/UI5/webcomponents/commit/4180a6ab23cd0a94c24b544bbba2285da6dd0931))
77+
* **ui5-shellbar:** resolve visual issues after refactor ([#13148](https://github.com/UI5/webcomponents/issues/13148)) ([8661177](https://github.com/UI5/webcomponents/commit/86611774c04657d6cfb461c2b240512fbcf0b361)), closes [#13141](https://github.com/UI5/webcomponents/issues/13141)
78+
* **ui5-toolbar:** correct flex behavior for ToolbarSpacer ([#13164](https://github.com/UI5/webcomponents/issues/13164)) ([c4d409b](https://github.com/UI5/webcomponents/commit/c4d409bd05515855f2a18b4aa058b80b5efab06a))
79+
80+
81+
### Features
82+
83+
* **ui5-date-picker, ui5-daterange-picket, ui5-datetime-picker:** introduce show-clear-icon property ([89ccfb8](https://github.com/UI5/webcomponents/commit/89ccfb8b227a92ebb7c831b13f8e26e0b47177d7))
84+
* **ui5-list:** added default ARIA role description ([#13135](https://github.com/UI5/webcomponents/issues/13135)) ([d2de428](https://github.com/UI5/webcomponents/commit/d2de428c821c4f5b91deeb905ec0ad2be57f0c74))
85+
* **ui5-multi-combobox:** introduce selectedValues property ([#12987](https://github.com/UI5/webcomponents/issues/12987)) ([bbe792b](https://github.com/UI5/webcomponents/commit/bbe792bc3dad9b21fdca9cb7a588a473e2ebdfff))
86+
* **ui5-toolbar-item:** introduce overflowed CSS custom state ([#13157](https://github.com/UI5/webcomponents/issues/13157)) ([33dda9e](https://github.com/UI5/webcomponents/commit/33dda9eb594e6979e69bc367b0ae1477202d16df))
87+
88+
89+
90+
91+
692
# [2.20.0-rc.2](https://github.com/UI5/webcomponents/compare/v2.20.0-rc.1...v2.20.0-rc.2) (2026-02-26)
793

894

‎docs/04-CLI.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
sidebar_label: CLI
3+
title: CLI
4+
---
5+
6+
# CLI
7+
8+
UI5 Web Components provides command-line tools for scaffolding projects and generating components.
9+
10+
## Create a New Project
11+
12+
Scaffold a fully configured UI5 Web Components package with a single command:
13+
14+
```bash
15+
npm create @ui5/webcomponents-package
16+
```
17+
18+
This launches an interactive wizard that sets up a ready-to-run TypeScript project with a sample component, theming, i18n, and a dev server.
19+
20+
### Options
21+
22+
| Option | Description | Default |
23+
|--------|-------------|---------|
24+
| `--name` | Package name (npm-compatible, supports scopes) | `my-package` |
25+
| `--tag` | Component tag name (e.g., `my-button`) | Derived from class name |
26+
| `--testSetup` | Test setup: `cypress` or `manual` | `manual` |
27+
| `--skip` | Skip interactive prompts and use defaults | `false` |
28+
| `--skipSubfolder` | Create files in current directory instead of a subfolder | `false` |
29+
30+
### Examples
31+
32+
**Non-interactive with a custom name**
33+
34+
```bash
35+
npm create @ui5/webcomponents-package -- \
36+
--name "my-components" \
37+
--skip
38+
```
39+
40+
**Scoped package with Cypress testing**
41+
42+
```bash
43+
npm create @ui5/webcomponents-package -- \
44+
--name "@scope/my-lib" \
45+
--testSetup "cypress" \
46+
--skip
47+
```
48+
49+
### What Gets Generated
50+
51+
The scaffolded project includes:
52+
53+
- A sample **web component** (`MyFirstComponent`) with a template, styles, and i18n
54+
- **Dev server** with hot reload (`npm start`)
55+
- **Build pipeline** for production (`npm run build`)
56+
- **TypeScript** configuration
57+
- **Cypress** test setup (if selected)
58+
- **ESLint** configuration
59+
- **Theming** infrastructure (SAP Horizon)
60+
61+
After the project is created:
62+
63+
```bash
64+
cd my-package
65+
npm install
66+
npm start
67+
```
68+
69+
## Generate a Component
70+
71+
Inside a scaffolded project, generate a new web component:
72+
73+
```bash
74+
npm run create-ui5-element
75+
```
76+
77+
This prompts for a PascalCase component name (e.g., `MyButton`) and generates three files:
78+
79+
| File | Purpose |
80+
|------|---------|
81+
| `src/<Name>.ts` | Component class with `@customElement` decorator |
82+
| `src/<Name>Template.tsx` | JSX template |
83+
| `src/themes/<Name>.css` | Component styles |
84+
85+
The tag name is derived automatically — `MyButton` becomes `my-my-button` (using the prefix from `.env`).
86+
87+
You can also pass the name directly:
88+
89+
```bash
90+
npm run create-ui5-element "MyButton"
91+
```
92+
93+
After generating, import the component in `src/bundle.esm.ts`:
94+
95+
```typescript
96+
import "./MyButton.js";
97+
```
98+
99+
## Project Commands
100+
101+
Every scaffolded project comes with these commands:
102+
103+
| Command | Description |
104+
|---------|-------------|
105+
| `npm start` | Start the dev server with hot reload |
106+
| `npm run build` | Production build |
107+
| `npm run create-ui5-element` | Generate a new web component |
108+
| `npm run lint` | Lint the project |
109+
| `npm run clean` | Clean generated and build artifacts |
110+
| `npm test` | Run tests (if Cypress was selected) |
111+
112+
[View on npm](https://www.npmjs.com/package/@ui5/create-webcomponents-package) · [GitHub](https://github.com/UI5/webcomponents/tree/main/packages/create-package)

0 commit comments

Comments
 (0)