Skip to content

Commit df9b265

Browse files
nnaydenownnaydenow
authored
Merge branch 'main' into cem-private-classes
2 parents 9db9e1d + 4f7f141 commit df9b265

36 files changed

+533
-165
lines changed

‎packages/ai/README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
Provides web components implementing AI-related visual and interaction.
66

77

8-
**Note:** The package is available since 2.0 and experimental
9-
8+
**Note:** The package is available since 2.0. It's under active development and considered experimental. Component APIs are subject to change. Furthermore, the package supports **Horizon** themes only.
109

1110
## Provided components
1211

@@ -23,7 +22,7 @@ Provides web components implementing AI-related visual and interaction.
2322

2423
| Assets | Module | Notes
2524
|------------|-----------|-----------
26-
| `i18n`, `themes` | `@ui5/webcomponents-ai/dist/Assets.js` | Theming parameters and translations for the components
25+
| `i18n`, `themes` | `@ui5/webcomponents-ai/dist/Assets.js` | Theming parameters (Horizon themes only) and translations for the components
2726

2827

2928
## Resources

‎packages/ai/src/Button.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ type AIButtonAccessibilityAttributes = { root?: AIButtonRootAccessibilityAttribu
5757
* @extends UI5Element
5858
* @since 2.0.0
5959
* @public
60-
* @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
60+
* @experimental The **@ui5/webcomponents-ai** package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change.
61+
* Furthermore, the package supports **Horizon** themes only.
6162
*/
6263

6364
@customElement({

‎packages/ai/src/ButtonState.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
2222
* @abstract
2323
* @since 2.0.0
2424
* @public
25-
* @experimental The Button and ButtonState web components are available since 2.0 under an experimental flag and their API and behaviour are subject to change.
25+
* @experimental The **@ui5/webcomponents-ai** package (including ButtonState) is under active development and considered experimental. Component APIs are subject to change.
26+
* Furthermore, the package supports **Horizon** themes only.
2627
*/
2728
@customElement("ui5-ai-button-state")
2829
class ButtonState extends UI5Element {

‎packages/ai/src/Input.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ type InputVersionChangeEventDetail = {
6262
* @extends BaseInput
6363
* @since 2.16.0
6464
* @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.
65+
* Furthermore, the package supports **Horizon** themes only.
6566
* @public
6667
*/
6768
@customElement({

‎packages/ai/src/PromptInput.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
3939
* @public
4040
* @extends UI5Element
4141
* @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
42+
* Furthermore, the package supports **Horizon** themes only.
4243
*/
4344
@customElement({
4445
tag: "ui5-ai-prompt-input",

‎packages/ai/src/TextArea.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ type TextAreaVersionChangeEventDetail = {
4444
* @constructor
4545
* @extends BaseTextArea
4646
* @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
47+
* Furthermore, the package supports **Horizon** themes only.
4748
* @since 2.16.0
4849
* @public
4950
* @slot {HTMLElement} menu Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ WRITING_ASSISTANT_BUTTON_TOOLTIP=[[[Ŵŗįţįŋğ Āşşįşţąŋţ (Ŝĥįƒ
2727

2828
WRITING_ASSISTANT_STOP_TOOLTIP=[[[Ŝţŏρ Ģēŋēŗąţįŋğ (Ĕşċ)∙∙∙∙∙]]]
2929

30-
VERSIONING_PREVIOUS_BUTTON_TOOLTIP=[[[Ƥŗēʋįŏűş Ʋēŗşįŏŋ∙∙∙∙∙∙∙∙]]]
30+
VERSIONING_PREVIOUS_BUTTON_TOOLTIP=[[[Ƥŗēʋįŏűş Ʋēŗşįŏŋ (Ĉţŗĺ + Ŝĥįƒţ + Ż)∙∙∙∙∙∙∙∙∙∙∙∙]]]
3131

32-
VERSIONING_NEXT_BUTTON_TOOLTIP=[[[Ńēχţ Ʋēŗşįŏŋ∙∙∙∙∙∙∙]]]
32+
VERSIONING_NEXT_BUTTON_TOOLTIP=[[[Ńēχţ Ʋēŗşįŏŋ (Ĉţŗĺ + Ŝĥįƒţ + Ŷ)∙∙∙∙∙∙∙∙∙∙]]]

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ WRITING_ASSISTANT_BUTTON_TOOLTIP=K3kdks5Mg9jjskgsyqWZIg_Writing Assistant (Shift
2727

2828
WRITING_ASSISTANT_STOP_TOOLTIP=cGRg8Pnue2LwkGE6pYfdBQ_Stop Generating (Esc)
2929

30-
VERSIONING_PREVIOUS_BUTTON_TOOLTIP=A9ublUn6poOWfTgBxVJwEA_Previous Version
30+
VERSIONING_PREVIOUS_BUTTON_TOOLTIP=0lSLC0AaYDsoykF32CKvQQ_Previous Version (Ctrl + Shift + Z)
3131

32-
VERSIONING_NEXT_BUTTON_TOOLTIP=fVHAsHeyAgpwVXfCi393Kw_Next Version
32+
VERSIONING_NEXT_BUTTON_TOOLTIP=zXhkk7cqieD7dCGfmUZkSg_Next Version (Ctrl + Shift + Y)

‎packages/fiori/cypress/specs/NavigationLayout.cy.tsx‎

Lines changed: 100 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,67 @@ function Sample() {
1818

1919
<SideNavigationGroup text="Group 1" expanded={true}>
2020
<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
21-
<SideNavigationItem text="Item 2" href="#item2"icon={home}></SideNavigationItem>
21+
<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
22+
<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
23+
</SideNavigationGroup>
24+
25+
<SideNavigationItem
26+
slot="fixedItems"
27+
text="Legal"
28+
href="https://www.sap.com/about/legal/impressum.html"
29+
target="_blank"
30+
icon={home}>
31+
</SideNavigationItem>
32+
</SideNavigation>
33+
34+
<div>
35+
Content
36+
</div>
37+
</NavigationLayout>;
38+
}
39+
40+
function SampleWithCollapsedMode() {
41+
return <NavigationLayout id="nl1" mode="Collapsed">
42+
<ShellBar slot="header" primaryTitle="UI5 Web Components">
43+
<Button icon={menu} slot="startButton" id="startButton"></Button>
44+
</ShellBar>
45+
46+
<SideNavigation id="sn1" slot="sideContent">
47+
<SideNavigationItem text="Home" href="#home" icon={home}></SideNavigationItem>
48+
49+
<SideNavigationGroup text="Group 1" expanded={true}>
50+
<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
51+
<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
52+
<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
53+
</SideNavigationGroup>
54+
55+
<SideNavigationItem
56+
slot="fixedItems"
57+
text="Legal"
58+
href="https://www.sap.com/about/legal/impressum.html"
59+
target="_blank"
60+
icon={home}>
61+
</SideNavigationItem>
62+
</SideNavigation>
63+
64+
<div>
65+
Content
66+
</div>
67+
</NavigationLayout>;
68+
}
69+
70+
function SampleWithExpandedMode() {
71+
return <NavigationLayout id="nl1" mode="Expanded">
72+
<ShellBar slot="header" primaryTitle="UI5 Web Components">
73+
<Button icon={menu} slot="startButton" id="startButton"></Button>
74+
</ShellBar>
75+
76+
<SideNavigation id="sn1" slot="sideContent">
77+
<SideNavigationItem text="Home" href="#home" icon={home}></SideNavigationItem>
78+
79+
<SideNavigationGroup text="Group 1" expanded={true}>
80+
<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
81+
<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
2282
<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
2383
</SideNavigationGroup>
2484

@@ -38,11 +98,10 @@ function Sample() {
3898
}
3999

40100
describe("Rendering and interaction", () => {
41-
beforeEach(() => {
42-
cy.mount(<Sample />);
43-
});
44101

45102
it("tests initial rendering", () => {
103+
cy.mount(<Sample />);
104+
46105
cy.get("[ui5-navigation-layout]")
47106
.shadow()
48107
.find(".ui5-nl-root")
@@ -69,36 +128,46 @@ describe("Rendering and interaction", () => {
69128
.should("exist");
70129
});
71130

72-
// it("tests collapsing", () => {
73-
// cy.get("[ui5-side-navigation]")
74-
// .should("have.prop", "collapsed", false);
131+
it("tests collapsing", () => {
132+
cy.mount(<Sample />);
133+
134+
cy.get("[ui5-side-navigation]")
135+
.should("have.prop", "collapsed", false);
136+
137+
cy.get("[ui5-navigation-layout]")
138+
.invoke("prop", "mode", "Collapsed");
139+
140+
cy.get("[ui5-side-navigation]")
141+
.should("have.prop", "collapsed", true);
75142

76-
// cy.get("[ui5-navigation-layout]")
77-
// .invoke("prop", "mode", "Collapsed");
143+
cy.get("[ui5-navigation-layout]")
144+
.invoke("prop", "mode", "Expanded");
78145

79-
// cy.get("[ui5-side-navigation]")
80-
// .should("have.prop", "collapsed", true);
146+
cy.get("[ui5-side-navigation]")
147+
.should("have.prop", "collapsed", false);
148+
});
81149

82-
// cy.get("[ui5-navigation-layout]")
83-
// .invoke("prop", "mode", "Expanded");
150+
it("tests that initial mode=Collapsed overrides default expand/collapse behavior", () => {
151+
cy.mount(<SampleWithCollapsedMode />);
84152

85-
// cy.get("[ui5-side-navigation]")
86-
// .should("have.prop", "collapsed", false);
87-
// });
153+
cy.get("[ui5-side-navigation]")
154+
.should("have.prop", "collapsed", true);
155+
});
88156
});
89157

90-
describe("Navigation Layout on Phone", () => {
158+
describe("Navigation Layout on Small screens (599px or less)", () => {
91159
beforeEach(() => {
92-
cy.ui5SimulateDevice("phone");
93-
cy.mount(<Sample />);
160+
cy.viewport(500, 1080);
94161
});
95162

96163
it("tests initial rendering", () => {
164+
cy.mount(<Sample />);
165+
97166
cy.get("[ui5-navigation-layout]")
98167
.should("have.prop", "sideCollapsed", true);
99168

100169
cy.get("[ui5-side-navigation]")
101-
.should("have.prop", "collapsed", false);
170+
.should("have.prop", "collapsed", true);
102171

103172
cy.get("[ui5-navigation-layout]")
104173
.shadow()
@@ -107,6 +176,8 @@ describe("Navigation Layout on Phone", () => {
107176
});
108177

109178
it("tests collapsing", () => {
179+
cy.mount(<Sample />);
180+
110181
cy.get("[ui5-navigation-layout]")
111182
.invoke("prop", "mode", "Expanded");
112183

@@ -123,4 +194,13 @@ describe("Navigation Layout on Phone", () => {
123194
.find(".ui5-nl-aside")
124195
.should("not.be.visible");
125196
});
197+
198+
it("tests that initial mode=Expanded overrides default expand/collapse behavior", () => {
199+
cy.mount(<SampleWithExpandedMode />);
200+
201+
cy.get("[ui5-navigation-layout]")
202+
.shadow()
203+
.find(".ui5-nl-aside")
204+
.should("be.visible");
205+
});
126206
});

‎packages/fiori/src/NavigationLayout.ts‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
33
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
44
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
55
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
6-
import {
7-
isPhone,
8-
isTablet,
9-
isCombi,
10-
} from "@ui5/webcomponents-base/dist/Device.js";
116
import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
127
import type SideNavigation from "./SideNavigation.js";
138

@@ -31,10 +26,10 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
3126
*
3227
* ### Responsive Behavior
3328
*
34-
* On desktop and tablet devices, the side navigation is visible
29+
* On larger screens (screen width of 600px or more), the side navigation is visible
3530
* by default and can be expanded or collapsed using the `mode` property.
36-
* On phone devices, the side navigation is hidden by default and can
37-
* be displayed using the `mode` property.
31+
* On small screens (screen width of 599px or less), the side navigation is hidden by
32+
* default and can be displayed using the `mode` property.
3833
*
3934
* ### ES6 Module Import
4035
*
@@ -54,7 +49,7 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
5449
template: NavigationLayoutTemplate,
5550
})
5651
class NavigationLayout extends UI5Element {
57-
_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
52+
_defaultSideCollapsed = window.innerWidth < 600; // Small screens (599px or less)
5853

5954
/**
6055
* Specifies the navigation layout mode.
@@ -76,18 +71,6 @@ class NavigationLayout extends UI5Element {
7671
@property({ type: Boolean })
7772
hasSideNavigation = false;
7873

79-
/**
80-
* @private
81-
*/
82-
@property({ type: Boolean })
83-
isPhone = isPhone();
84-
85-
/**
86-
* @private
87-
*/
88-
@property({ type: Boolean })
89-
isTablet = isTablet() && !isCombi();
90-
9174
/**
9275
* Gets whether the side navigation is collapsed.
9376
* @public
@@ -121,10 +104,6 @@ class NavigationLayout extends UI5Element {
121104
onBeforeRendering() {
122105
this.calcSideCollapsed();
123106

124-
if (isPhone()) {
125-
return;
126-
}
127-
128107
const sideNavigation = this.sideContent[0];
129108
this.hasSideNavigation = !!sideNavigation;
130109

0 commit comments

Comments
 (0)