Skip to content

Commit bdec517

Browse files
ilhan007ilhan007
authored
feat(ui5-wizard): introduce new component (#2400)
Introduce ui5-wizard and ui5-wizard-step components that enables users to accomplish a single goal that consists of multiple dependable sub-tasks. The ui5-wizard-step API defines both the content of particular step and its corresponding tab, displayed within the Wizard's navigation header with the icon and text properties. Also, the component provides selected and disabled properties, that determine which step is currently "selected" (active), which ones are enabled or disabled. Тhe Wizard does not provide "move to next button", instead we give the user freedom to decide how to move to particular step. It might be button, or something else, placed inside the content of step. At the end, to move to particular step, the user can use the API of the ui5-wizard-step (selected and disabled). In terms of user experience, the wizard allows navigation between enabled (validated) steps upon clicking the steps within the navigation header and via scrolling. When these interactions occur, the wizard updates the selected state and fires selection-change event to notify the interested parties. FIXES: #2368
1 parent 75af076 commit bdec517

29 files changed

+3126
-34
lines changed

‎docs/Public Module Imports.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
3131
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
3232
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
3333
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
34-
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
35-
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
34+
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
35+
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
3636
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
3737
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
3838
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
@@ -45,13 +45,13 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
4545
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
4646
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
4747
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
48-
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
48+
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
4949
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
5050
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
5151
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
5252
| Responsive Popover | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
5353
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
54-
| Select Option | `ui5-option` | comes with `ui5-select ` |
54+
| Select Option | `ui5-option` | comes with `ui5-select ` |
5555
| Segmented Button | `ui5-segmentedbutton`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
5656
| Suggestion Item | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
5757
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
@@ -63,9 +63,9 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
6363
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
6464
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
6565
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
66-
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
66+
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
6767
| Timeline | `ui5-timeline` | `import "@ui5/webcomponents/dist/Timeline.js";` |
68-
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
68+
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
6969
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
7070
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
7171
| Toggle Button | `ui5-togglebutton` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
@@ -147,6 +147,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
147147
| Notification Overflow Action | `ui5-notification-overflow-action` | `import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";`|
148148
| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` |
149149
| Upload Collection Item | `ui5-upload-collection-item` | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";` |
150+
| Wizard | `ui5-wizard` | `import "@ui5/webcomponents-fiori/dist/Wizard.js";` |
151+
| Wizard Step | `ui5-wizard-step` | comes with `ui5-wizard` |
150152

151153
### 2. Assets
152154

‎packages/fiori/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@ import UploadCollectionItem from "./dist/UploadCollectionItem.js";
2020
import NotificationListItem from "./dist/NotificationListItem.js"
2121
import NotificationListGroupItem from "./dist/NotificationListGroupItem.js";
2222
import NotificationOverflowAction from "./dist/NotificationOverflowAction.js";
23+
import Wizard from "./dist/Wizard.js";
2324

2425
export default testAssets;

‎packages/fiori/src/Wizard.hbs

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="ui5-wiz-root" aria-label="{{ariaLabelText}}">
2+
<div class="ui5-wiz-nav" role="navigation" aria-roledescription="{{navAriaRoleDescription}}" tabindex="-1">
3+
<ul class="ui5-wiz-nav-list" role="list">
4+
{{#each _stepsInHeader}}
5+
<ui5-wizard-tab
6+
heading="{{heading}}"
7+
subheading="{{subheading}}"
8+
icon="{{icon}}"
9+
number="{{number}}"
10+
?disabled="{{disabled}}"
11+
?selected="{{selected}}"
12+
?hide-separator="{{hideSeparator}}"
13+
?active-separator="{{activeSeparator}}"
14+
?branching-separator="{{branchingSeparator}}"
15+
role="listitem"
16+
aria-posinset="{{pos}}"
17+
aria-setsize="{{size}}"
18+
aria-roledescription="{{roleDescription}}"
19+
aria-label="{{ariaLabel}}"
20+
data-ui5-content-ref-id="{{this.refStepId}}"
21+
data-ui5-index="{{pos}}"
22+
_tab-index="{{tabIndex}}"
23+
@selection-change-requested="{{../onSelectionChangeRequested}}"
24+
@focused="{{../onStepInHeaderFocused}}"
25+
></ui5-wizard-tab>
26+
{{/each}}
27+
</ul>
28+
</div>
29+
30+
<div class="ui5-wiz-content" @scroll="{{onScroll}}">
31+
{{#each _steps}}
32+
<div class="ui5-wiz-content-item"
33+
?hidden="{{disabled}}"
34+
?selected="{{selected}}"
35+
?stretch="{{stretch}}"
36+
data-ui5-content-item-ref-id="{{_id}}">
37+
<slot name="{{this._individualSlot}}"></slot>
38+
</div>
39+
{{/each}}
40+
</div>
41+
</div>

0 commit comments

Comments
 (0)