Skip to content

Commit 97b3c44

Browse files
author
GerganaKremenska
committed
Merge remote-tracking branch 'upstream/master' into dialog_accessibleName
2 parents 632e7af + f5e92e0 commit 97b3c44

File tree

175 files changed

+1393
-295
lines changed

Some content is hidden

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

175 files changed

+1393
-295
lines changed

‎docs/Angular-tutorial.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,13 @@ In order to use it, you have to use a library called [Origami](https://github.co
6767

6868
Example:
6969

70-
1. Install Origami:
70+
#### 1. Install Origami:
7171

7272
```bash
7373
npm install @codebakery/origami
7474
```
7575

76-
2. Import the OrigamiFormsModule from Origami
76+
#### 2. Import the OrigamiFormsModule from Origami
7777

7878
```js
7979
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -90,13 +90,13 @@ import { AppComponent } from './app.component';
9090
export class AppModule {}
9191
```
9292

93-
3. Use Origami in your template:
93+
#### 3. Use Origami in your template:
9494

9595
```html
9696
<ui5-input [(ngModel)]="value" origami></ui5-input>
9797
```
9898

99-
4. Make Angular boot after UI5 Web Components are defined:
99+
#### 4. Make Angular boot after UI5 Web Components are defined:
100100

101101
In the module, where you are using UI5 Web Components, you should add the ```APP_INITIALIZER``` provider. In order to do so, import ```APP_INITIALIZER``` and add it to the providers array like this (In this example we will add it in the ```app.module.ts```):
102102
```js
@@ -135,7 +135,7 @@ If you need your application to run on Internet Explorer 11, there are some addi
135135

136136
*Note* These steps have been tested with Angular 7. For other versions of Angular, there might be some differences.
137137

138-
1. Install all needed dependencies:
138+
#### 1. Install all needed dependencies:
139139

140140
```bash
141141
npm install @ui5/webcomponents-ie11 --save
@@ -145,7 +145,7 @@ npm install @ui5/webcomponents-ie11 --save
145145
npm install --save @angular-builders/[email protected] @angular-builders/[email protected] @babel/core @babel/preset-env babel-loader
146146
```
147147

148-
2. After that we need to make Angular use custom webpack configuration. In angular.json add the following configuration lines:
148+
#### 2. After that we need to make Angular use custom webpack configuration. In angular.json add the following configuration lines:
149149

150150
In architect object, about the build command:
151151

@@ -163,7 +163,7 @@ And about the serve command:
163163
"builder": "@angular-builders/dev-server:generic",
164164
```
165165

166-
3. On root level create custom-webpack.config.js file with the following content(this is the config that Angular will use):
166+
#### 3. On root level create custom-webpack.config.js file with the following content(this is the config that Angular will use):
167167
```js
168168
const path = require('path');
169169
const env = process.env.WEBPACK_ENV;
@@ -208,7 +208,7 @@ module.exports = {
208208
};
209209
```
210210

211-
4. Add the following import ```to app.module.ts``` file:
211+
#### 4. Add the following import ```to app.module.ts``` file:
212212
```js
213213
import "@ui5/webcomponents-ie11/dist/features/IE11WithWebComponentsPolyfill.js";
214214
```

‎packages/fiori/src/Bar.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,16 @@ const metadata = {
1515
properties: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
1616
/**
1717
* Defines the <code>ui5-bar</code> design.
18+
*
1819
* <br><br>
19-
* <b>Note:</b> Available options are "Header", "Subheader", "Footer", "FloatingFooter".
20+
* <b>Note:</b>
21+
* Available options are:
22+
* <ul>
23+
* <li><code>Header</code></li>
24+
* <li><code>Subheader</code></li>
25+
* <li><code>Footer</code></li>
26+
* <li><code>FloatingFooter</code></li>
27+
* </ul>
2028
*
2129
* @type {BarDesign}
2230
* @defaultvalue "Header"
@@ -65,17 +73,23 @@ const metadata = {
6573
* @class
6674
*
6775
* <h3 class="comment-api-title">Overview</h3>
68-
* The Bar component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components on the left and right side.
76+
* The Bar is a container which is primarily used to hold titles, buttons and input elements
77+
* and its design and functionality is the basis for page headers and footers.
78+
* The component consists of three areas to hold its content - startContent, middleContent and endContent.
79+
* It has the capability to center content, such as a title, while having other components on the left and right side.
6980
*
7081
* <h3>Usage</h3>
7182
* With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
83+
* <br>
84+
* <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
7285
*
73-
* Note: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.
86+
* <h3>Responsive Behavior</h3>
87+
* The middleContent will be centered in the available space between the startContent and the endContent areas,
88+
* therefore it might not always be centered in the entire bar.
7489
*
75-
* For the <code>ui5-bar</code>
7690
* <h3>ES6 Module Import</h3>
7791
*
78-
* <code>import @ui5/webcomponents-fiori/dist/Bar.js";</code>
92+
* <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
7993
*
8094
* @constructor
8195
* @author SAP SE

‎packages/fiori/src/FlexibleColumnLayout.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -188,13 +188,13 @@ const metadata = {
188188
* Fired when the layout changes via user interaction by clicking the arrows
189189
* or by changing the component size due to resizing.
190190
*
191-
* @param {FCLLayout} layout the current layout
192-
* @param {Array} columnLayout the effective column layout, f.e [67%, 33%, 0]
193-
* @param {boolean} startColumnVisible indicates if the start column is currently visible
194-
* @param {boolean} midColumnVisible indicates if the middle column is currently visible
195-
* @param {boolean} endColumnVisible indicates if the end column is currently visible
196-
* @param {boolean} arrowsUsed indicates if the layout is changed via the arrows
197-
* @param {boolean} resize indicates if the layout is changed via resizing
191+
* @param {FCLLayout} layout The current layout
192+
* @param {Array} columnLayout The effective column layout, f.e [67%, 33%, 0]
193+
* @param {boolean} startColumnVisible Indicates if the start column is currently visible
194+
* @param {boolean} midColumnVisible Indicates if the middle column is currently visible
195+
* @param {boolean} endColumnVisible Indicates if the end column is currently visible
196+
* @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows
197+
* @param {boolean} resize Indicates if the layout is changed via resizing
198198
* @event sap.ui.webcomponents.fiori.FlexibleColumnLayout#layout-change
199199
* @public
200200
*/
@@ -233,7 +233,7 @@ const metadata = {
233233
*
234234
* <h3>ES6 Module Import</h3>
235235
*
236-
* <code>import @ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
236+
* <code>import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
237237
*
238238
* @constructor
239239
* @author SAP SE

‎packages/fiori/src/NotificationAction.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,16 @@ const metadata = {
3333

3434
/**
3535
* Defines the action design.
36+
*
3637
* <br><br>
37-
* <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
38-
* "Negative", and "Transparent".
38+
* <b>Note:</b>
39+
* <ul>
40+
* <li><code>Default</code></li>
41+
* <li><code>Emphasized</code></li>
42+
* <li><code>Positive</code></li>
43+
* <li><code>Negative</code></li>
44+
* <li><code>Transparent</code></li>
45+
* </ul>
3946
*
4047
* @type {ButtonDesign}
4148
* @defaultvalue "Transparent"

‎packages/fiori/src/NotificationListGroupItem.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,9 @@ const metadata = {
115115
*
116116
* <h3>ES6 Module Import</h3>
117117
*
118-
* <code>import @ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
118+
* <code>import "@ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
119119
* <br>
120-
* <code>import @ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
120+
* <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
121121
* @constructor
122122
* @author SAP SE
123123
* @alias sap.ui.webcomponents.fiori.NotificationListGroupItem

‎packages/fiori/src/NotificationListItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const metadata = {
8484
* <br>
8585
* <b>Note:</b>In order to be complaint with the UX guidlines and for best experience,
8686
* we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code>
87-
* you can set its <code>size</code><code> property to <code>XS</code> to get the required size - <code><ui5-avatar size="XS"></code>.
87+
* you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size="XS">&lt;/ui5-avatar></code>.
8888
*
8989
* @type {sap.ui.webcomponents.main.IAvatar}
9090
* @slot
@@ -160,9 +160,9 @@ const metadata = {
160160
*
161161
* <h3>ES6 Module Import</h3>
162162
*
163-
* <code>import @ui5/webcomponents/dist/NotificationListItem.js";</code>
163+
* <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
164164
* <br>
165-
* <code>import @ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
165+
* <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
166166
* @constructor
167167
* @author SAP SE
168168
* @alias sap.ui.webcomponents.fiori.NotificationListItem

‎packages/fiori/src/NotificationListItemBase.js

+7
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ const metadata = {
3636

3737
/**
3838
* Defines the <code>priority</code> of the item.
39+
* Available options are:
40+
* <ul>
41+
* <li><code>None</code></li>
42+
* <li><code>Low</code></li>
43+
* <li><code>Medium</code></li>
44+
* <li><code>High</code></li>
45+
* </ul>
3946
* @type {Priority}
4047
* @defaultvalue "None"
4148
* @public

‎packages/fiori/src/Page.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -130,10 +130,9 @@ const metadata = {
130130
* The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
131131
* This is enabled with the <code>floatingFooter</code> property.
132132
*
133-
*
134133
* <h3>ES6 Module Import</h3>
135134
*
136-
* <code>import @ui5/webcomponents-fiori/dist/Page.js";</code>
135+
* <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
137136
*
138137
* @constructor
139138
* @author SAP SE
@@ -168,11 +167,16 @@ class Page extends UI5Element {
168167
return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
169168
}
170169

170+
get _contentTop() {
171+
return this.header.length ? "2.75rem" : "0rem";
172+
}
173+
171174
get styles() {
172175
return {
173176
content: {
174177
"padding-bottom": this.footer.length && this._contentPaddingBottom,
175178
"bottom": this.footer.length && this._contentBottom,
179+
"top": this._contentTop,
176180
},
177181
};
178182
}

‎packages/fiori/src/ShellBar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ const metadata = {
328328
* <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
329329
*
330330
* @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
331-
* @param {HTMLElement} item dom ref of the activated list item
331+
* @param {HTMLElement} item DOM ref of the activated list item
332332
* @since 0.10
333333
* @public
334334
*/

‎packages/fiori/src/ShellBarItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const metadata = {
5858
*
5959
* @event sap.ui.webcomponents.fiori.ShellBarItem#item-click
6060
* @allowPreventDefault
61-
* @param {HTMLElement} targetRef dom ref of the clicked element
61+
* @param {HTMLElement} targetRef DOM ref of the clicked element
6262
* @public
6363
*/
6464
"item-click": {

‎packages/fiori/src/SideNavigation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const metadata = {
121121
*
122122
* <h3>ES6 Module Import</h3>
123123
*
124-
* <code>import @ui5/webcomponents-fiori/dist/SideNavigation.js";</code>
124+
* <code>import "@ui5/webcomponents-fiori/dist/SideNavigation.js";</code>
125125
* <br>
126126
* <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code> (for <code>ui5-side-navigation-item</code>)
127127
* <br>

‎packages/fiori/src/SideNavigationItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const metadata = {
9999
*
100100
* <h3>ES6 Module Import</h3>
101101
*
102-
* <code>import @ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
102+
* <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
103103
*
104104
* @constructor
105105
* @author SAP SE

‎packages/fiori/src/SideNavigationSubItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const metadata = {
5757
*
5858
* <h3>ES6 Module Import</h3>
5959
*
60-
* <code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
60+
* <code>import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
6161
*
6262
* @constructor
6363
* @author SAP SE

‎packages/fiori/src/UploadCollection.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,15 @@ const metadata = {
3737
properties: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
3838
/**
3939
* Defines the mode of the <code>ui5-upload-collection</code>.
40+
*
4041
* <br><br>
41-
* <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>,
42-
* <code>MultiSelect</code>, and <code>Delete</code>.
42+
* <b>Note:</b>
43+
* <ul>
44+
* <li><code>None</code></li>
45+
* <li><code>SingleSelect</code></li>
46+
* <li><code>MultiSelect</code></li>
47+
* <li><code>Delete</code></li>
48+
* </ul>
4349
*
4450
* @type {ListMode}
4551
* @defaultvalue "None"
@@ -178,7 +184,7 @@ const metadata = {
178184
* It also allows you to show already uploaded files.
179185
*
180186
* <h3>ES6 Module Import</h3>
181-
* <code>import @ui5/webcomponents-fiori/dist/UploadCollection.js";</code>
187+
* <code>import "@ui5/webcomponents-fiori/dist/UploadCollection.js";</code>
182188
* <br>
183189
* <code>import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code> (for <code>ui5-upload-collection-item</code>)
184190
*

‎packages/fiori/src/UploadCollectionItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ const metadata = {
227227
*
228228
* <h3>ES6 Module Import</h3>
229229
*
230-
* <code>import @ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code>
230+
* <code>import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code>
231231
*
232232
* @constructor
233233
* @author SAP SE

‎packages/fiori/src/Wizard.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {
1818
WIZARD_NAV_ARIA_LABEL,
1919
WIZARD_LIST_ARIA_LABEL,
2020
WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL,
21+
WIZARD_OPTIONAL_STEP_ARIA_LABEL,
2122
WIZARD_STEP_ARIA_LABEL,
22-
WIZARD_CURRENT_STEP_ARIA_LABEL,
2323
} from "./generated/i18n/i18n-defaults.js";
2424

2525
// Step in header and content
@@ -199,6 +199,7 @@ const metadata = {
199199
* <h3>Usage</h3>
200200
* <h4>When to use:</h4>
201201
* When the user has to accomplish a long set of tasks.
202+
*
202203
* <h4>When not to use:</h4>
203204
* When the task has less than 3 steps.
204205
*
@@ -207,7 +208,7 @@ const metadata = {
207208
* will start truncate and shrink and from particular point they will hide to free as much space as possible.
208209
*
209210
* <h3>ES6 Module Import</h3>
210-
* <code>import @ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes <ui5-wizard-step>)
211+
* <code>import "@ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes <ui5-wizard-step>)
211212
*
212213
* @constructor
213214
* @author SAP SE
@@ -683,10 +684,6 @@ class Wizard extends UI5Element {
683684
}
684685

685686
getStepAriaLabelText(step, ariaLabel) {
686-
if (step.selected) {
687-
return this.i18nBundle.getText(WIZARD_CURRENT_STEP_ARIA_LABEL, ariaLabel);
688-
}
689-
690687
return this.i18nBundle.getText(WIZARD_STEP_ARIA_LABEL, ariaLabel);
691688
}
692689

@@ -783,6 +780,10 @@ class Wizard extends UI5Element {
783780
return this.i18nBundle.getText(WIZARD_NAV_STEP_DEFAULT_HEADING);
784781
}
785782

783+
get optionalStepText() {
784+
return this.i18nBundle.getText(WIZARD_OPTIONAL_STEP_ARIA_LABEL);
785+
}
786+
786787
get ariaLabelText() {
787788
return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
788789
}
@@ -812,7 +813,7 @@ class Wizard extends UI5Element {
812813
// Hide separator if it's the last step and it's not a branching one
813814
const hideSeparator = (idx === stepsCount - 1) && !step.branching;
814815

815-
const isOptional = step.subheading ? "Optional" : "";
816+
const isOptional = step.subheading ? this.optionalStepText : "";
816817
const ariaLabel = (step.heading ? `${pos} ${step.heading} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${isOptional}`).trim();
817818
const isAfterCurrent = (idx > selectedStepIndex);
818819

‎packages/fiori/src/WizardTab.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,9 @@ const metadata = {
138138
*
139139
* <h3>Usage</h3>
140140
*
141-
* For the <code>ui5-wizard-tap</code>
142141
* <h3>ES6 Module Import</h3>
143142
*
144-
* <code>import @ui5/webcomponents/dist/WizardTab.js";</code> (imported with <ui5-wizard>)
143+
* <code>import "@ui5/webcomponents/dist/WizardTab.js";</code> (imported with <ui5-wizard>)
145144
*
146145
* @constructor
147146
* @author SAP SE

0 commit comments

Comments
 (0)