Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-wizard): initial implementation #2400

Merged
merged 15 commits into from
Nov 2, 2020
Merged

feat(ui5-wizard): initial implementation #2400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d698e02
feat(ui5-wizard): initial implementation
ilhan007 Oct 24, 2020
a06aaf3
Merge branch 'master' into feat-wizard
ilhan007 Oct 25, 2020
11636d7
add tests
ilhan007 Oct 26, 2020
2daf721
add "branching" separator line
ilhan007 Oct 26, 2020
f8d64aa
fix typos
ilhan007 Oct 27, 2020
2d496b6
add public import info
ilhan007 Oct 27, 2020
998c532
move components to "fiori" package
ilhan007 Oct 27, 2020
c5b0ce2
add prop "subheading", rename "text" to "heading"
ilhan007 Oct 27, 2020
8f895a0
add accessibility support
ilhan007 Oct 27, 2020
db218ae
address review comments
ilhan007 Oct 28, 2020
e2e2532
fix typos and empty aria attrs, add root aria-label
ilhan007 Oct 28, 2020
99f5a80
add private ariaLabel prop to Wizard
ilhan007 Oct 29, 2020
e3a837c
update jsdoc
ilhan007 Oct 29, 2020
1f1c2d2
improve support of API misuse
ilhan007 Oct 29, 2020
a385f41
more typos
ilhan007 Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions docs/Public Module Imports.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
Expand All @@ -45,13 +45,13 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
| Responsive Popover | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
| Select Option | `ui5-option` | comes with `ui5-select ` |
| Select Option | `ui5-option` | comes with `ui5-select ` |
| Segmented Button | `ui5-segmentedbutton`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
| Suggestion Item | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
Expand All @@ -63,9 +63,9 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
| Timeline | `ui5-timeline` | `import "@ui5/webcomponents/dist/Timeline.js";` |
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
| Toggle Button | `ui5-togglebutton` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
Expand Down Expand Up @@ -147,6 +147,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| Notification Overflow Action | `ui5-notification-overflow-action` | `import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";`|
| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` |
| Upload Collection Item | `ui5-upload-collection-item` | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";` |
| Wizard | `ui5-wizard` | `import "@ui5/webcomponents-fiori/dist/Wizard.js";` |
| Wizard Step | `ui5-wizard-step` | comes with `ui5-wizard` |

### 2. Assets

Expand Down
1 change: 1 addition & 0 deletions packages/fiori/bundle.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@ import UploadCollectionItem from "./dist/UploadCollectionItem.js";
import NotificationListItem from "./dist/NotificationListItem.js"
import NotificationListGroupItem from "./dist/NotificationListGroupItem.js";
import NotificationOverflowAction from "./dist/NotificationOverflowAction.js";
import Wizard from "./dist/Wizard.js";

export default testAssets;
41 changes: 41 additions & 0 deletions packages/fiori/src/Wizard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<div class="ui5-wiz-root" aria-label="{{ariaLabelText}}">
<div class="ui5-wiz-nav" role="navigation" aria-roledescription="{{navAriaRoleDescription}}" tabindex="-1">
<ul class="ui5-wiz-nav-list" role="list">
{{#each _stepsInHeader}}
<ui5-wizard-tab
heading="{{heading}}"
subheading="{{subheading}}"
icon="{{icon}}"
number="{{number}}"
?disabled="{{disabled}}"
?selected="{{selected}}"
?hide-separator="{{hideSeparator}}"
?active-separator="{{activeSeparator}}"
?branching-separator="{{branchingSeparator}}"
role="listitem"
aria-posinset="{{pos}}"
aria-setsize="{{size}}"
aria-roledescription="{{roleDescription}}"
aria-label="{{ariaLabel}}"
data-ui5-content-ref-id="{{this.refStepId}}"
data-ui5-index="{{pos}}"
_tab-index="{{tabIndex}}"
@selection-change-requested="{{../onSelectionChangeRequested}}"
@focused="{{../onStepInHeaderFocused}}"
></ui5-wizard-tab>
{{/each}}
</ul>
</div>

<div class="ui5-wiz-content" @scroll="{{onScroll}}">
{{#each _steps}}
<div class="ui5-wiz-content-item"
?hidden="{{disabled}}"
?selected="{{selected}}"
?stretch="{{stretch}}"
data-ui5-content-item-ref-id="{{_id}}">
<slot name="{{this._individualSlot}}"></slot>
</div>
{{/each}}
</div>
</div>
Loading