@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -10,105 +10,105 @@ wrapperTag: div
|
|
|
10
10
|
### Basic
|
|
11
11
|
|
|
12
12
|
```html isFullscreen
|
|
13
|
-
<div class="pf-
|
|
14
|
-
<div class="pf-
|
|
15
|
-
<div class="pf-
|
|
13
|
+
<div class="pf-v6-c-wizard">
|
|
14
|
+
<div class="pf-v6-c-wizard__header">
|
|
15
|
+
<div class="pf-v6-c-wizard__close">
|
|
16
16
|
<button
|
|
17
|
-
class="pf-
|
|
17
|
+
class="pf-v6-c-button pf-m-plain"
|
|
18
18
|
type="button"
|
|
19
19
|
aria-label="Close"
|
|
20
20
|
>
|
|
21
21
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
22
22
|
</button>
|
|
23
23
|
</div>
|
|
24
|
-
<div class="pf-
|
|
25
|
-
<h1 class="pf-
|
|
24
|
+
<div class="pf-v6-c-wizard__title">
|
|
25
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
26
26
|
</div>
|
|
27
|
-
<div class="pf-
|
|
27
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
28
28
|
</div>
|
|
29
29
|
<button
|
|
30
30
|
aria-label="Wizard Header Toggle"
|
|
31
|
-
class="pf-
|
|
31
|
+
class="pf-v6-c-wizard__toggle"
|
|
32
32
|
aria-expanded="false"
|
|
33
33
|
>
|
|
34
|
-
<span class="pf-
|
|
35
|
-
<span class="pf-
|
|
36
|
-
<span class="pf-
|
|
34
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
35
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
36
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
37
37
|
Configuration
|
|
38
38
|
<i
|
|
39
|
-
class="fas fa-angle-right pf-
|
|
39
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
40
40
|
aria-hidden="true"
|
|
41
41
|
></i>
|
|
42
42
|
</span>
|
|
43
|
-
<span class="pf-
|
|
43
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
44
44
|
</span>
|
|
45
|
-
<span class="pf-
|
|
45
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
46
46
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
47
47
|
</span>
|
|
48
48
|
</button>
|
|
49
|
-
<div class="pf-
|
|
50
|
-
<div class="pf-
|
|
51
|
-
<nav class="pf-
|
|
52
|
-
<ol class="pf-
|
|
53
|
-
<li class="pf-
|
|
54
|
-
<button class="pf-
|
|
49
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
50
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
51
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
52
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
53
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
54
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
|
|
55
55
|
</li>
|
|
56
|
-
<li class="pf-
|
|
56
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
57
57
|
<button
|
|
58
|
-
class="pf-
|
|
58
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
59
59
|
type="button"
|
|
60
60
|
aria-expanded="true"
|
|
61
61
|
>
|
|
62
|
-
<span class="pf-
|
|
63
|
-
<span class="pf-
|
|
64
|
-
<span class="pf-
|
|
62
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
63
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
64
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
65
65
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
66
66
|
</span>
|
|
67
67
|
</span>
|
|
68
68
|
</button>
|
|
69
|
-
<ol class="pf-
|
|
70
|
-
<li class="pf-
|
|
71
|
-
<button class="pf-
|
|
69
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
70
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
71
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
72
72
|
</li>
|
|
73
|
-
<li class="pf-
|
|
73
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
74
74
|
<button
|
|
75
|
-
class="pf-
|
|
75
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
76
76
|
type="button"
|
|
77
77
|
aria-current="page"
|
|
78
78
|
>Substep B</button>
|
|
79
79
|
</li>
|
|
80
|
-
<li class="pf-
|
|
81
|
-
<button class="pf-
|
|
80
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
81
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
82
82
|
</li>
|
|
83
83
|
</ol>
|
|
84
84
|
</li>
|
|
85
|
-
<li class="pf-
|
|
86
|
-
<button class="pf-
|
|
85
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
86
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
87
87
|
</li>
|
|
88
|
-
<li class="pf-
|
|
88
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
89
89
|
<button
|
|
90
|
-
class="pf-
|
|
90
|
+
class="pf-v6-c-wizard__nav-link"
|
|
91
91
|
type="button"
|
|
92
92
|
disabled
|
|
93
93
|
>Review</button>
|
|
94
94
|
</li>
|
|
95
95
|
</ol>
|
|
96
96
|
</nav>
|
|
97
|
-
<main class="pf-
|
|
98
|
-
<div class="pf-
|
|
99
|
-
<form class="pf-
|
|
100
|
-
<div class="pf-
|
|
101
|
-
<div class="pf-
|
|
102
|
-
class="pf-
|
|
97
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
98
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
99
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
100
|
+
<div class="pf-v6-c-form__group">
|
|
101
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
102
|
+
class="pf-v6-c-form__label"
|
|
103
103
|
for="wizard-basic-form-field1"
|
|
104
104
|
>
|
|
105
|
-
<span class="pf-
|
|
106
|
-
class="pf-
|
|
105
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
106
|
+
class="pf-v6-c-form__label-required"
|
|
107
107
|
aria-hidden="true"
|
|
108
108
|
>*</span></label>
|
|
109
109
|
</div>
|
|
110
|
-
<div class="pf-
|
|
111
|
-
<span class="pf-
|
|
110
|
+
<div class="pf-v6-c-form__group-control">
|
|
111
|
+
<span class="pf-v6-c-form-control">
|
|
112
112
|
<input
|
|
113
113
|
type="text"
|
|
114
114
|
id="wizard-basic-form-field1"
|
|
@@ -117,18 +117,18 @@ wrapperTag: div
|
|
|
117
117
|
</span>
|
|
118
118
|
</div>
|
|
119
119
|
</div>
|
|
120
|
-
<div class="pf-
|
|
121
|
-
<div class="pf-
|
|
122
|
-
class="pf-
|
|
120
|
+
<div class="pf-v6-c-form__group">
|
|
121
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
122
|
+
class="pf-v6-c-form__label"
|
|
123
123
|
for="wizard-basic-form-field2"
|
|
124
124
|
>
|
|
125
|
-
<span class="pf-
|
|
126
|
-
class="pf-
|
|
125
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
126
|
+
class="pf-v6-c-form__label-required"
|
|
127
127
|
aria-hidden="true"
|
|
128
128
|
>*</span></label>
|
|
129
129
|
</div>
|
|
130
|
-
<div class="pf-
|
|
131
|
-
<span class="pf-
|
|
130
|
+
<div class="pf-v6-c-form__group-control">
|
|
131
|
+
<span class="pf-v6-c-form-control">
|
|
132
132
|
<input
|
|
133
133
|
type="text"
|
|
134
134
|
id="wizard-basic-form-field2"
|
|
@@ -137,18 +137,18 @@ wrapperTag: div
|
|
|
137
137
|
</span>
|
|
138
138
|
</div>
|
|
139
139
|
</div>
|
|
140
|
-
<div class="pf-
|
|
141
|
-
<div class="pf-
|
|
142
|
-
class="pf-
|
|
140
|
+
<div class="pf-v6-c-form__group">
|
|
141
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
142
|
+
class="pf-v6-c-form__label"
|
|
143
143
|
for="wizard-basic-form-field3"
|
|
144
144
|
>
|
|
145
|
-
<span class="pf-
|
|
146
|
-
class="pf-
|
|
145
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
146
|
+
class="pf-v6-c-form__label-required"
|
|
147
147
|
aria-hidden="true"
|
|
148
148
|
>*</span></label>
|
|
149
149
|
</div>
|
|
150
|
-
<div class="pf-
|
|
151
|
-
<span class="pf-
|
|
150
|
+
<div class="pf-v6-c-form__group-control">
|
|
151
|
+
<span class="pf-v6-c-form-control">
|
|
152
152
|
<input
|
|
153
153
|
type="text"
|
|
154
154
|
id="wizard-basic-form-field3"
|
|
@@ -157,18 +157,18 @@ wrapperTag: div
|
|
|
157
157
|
</span>
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
|
-
<div class="pf-
|
|
161
|
-
<div class="pf-
|
|
162
|
-
class="pf-
|
|
160
|
+
<div class="pf-v6-c-form__group">
|
|
161
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
162
|
+
class="pf-v6-c-form__label"
|
|
163
163
|
for="wizard-basic-form-field4"
|
|
164
164
|
>
|
|
165
|
-
<span class="pf-
|
|
166
|
-
class="pf-
|
|
165
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
166
|
+
class="pf-v6-c-form__label-required"
|
|
167
167
|
aria-hidden="true"
|
|
168
168
|
>*</span></label>
|
|
169
169
|
</div>
|
|
170
|
-
<div class="pf-
|
|
171
|
-
<span class="pf-
|
|
170
|
+
<div class="pf-v6-c-form__group-control">
|
|
171
|
+
<span class="pf-v6-c-form-control">
|
|
172
172
|
<input
|
|
173
173
|
type="text"
|
|
174
174
|
id="wizard-basic-form-field4"
|
|
@@ -177,18 +177,18 @@ wrapperTag: div
|
|
|
177
177
|
</span>
|
|
178
178
|
</div>
|
|
179
179
|
</div>
|
|
180
|
-
<div class="pf-
|
|
181
|
-
<div class="pf-
|
|
182
|
-
class="pf-
|
|
180
|
+
<div class="pf-v6-c-form__group">
|
|
181
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
182
|
+
class="pf-v6-c-form__label"
|
|
183
183
|
for="wizard-basic-form-field5"
|
|
184
184
|
>
|
|
185
|
-
<span class="pf-
|
|
186
|
-
class="pf-
|
|
185
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
186
|
+
class="pf-v6-c-form__label-required"
|
|
187
187
|
aria-hidden="true"
|
|
188
188
|
>*</span></label>
|
|
189
189
|
</div>
|
|
190
|
-
<div class="pf-
|
|
191
|
-
<span class="pf-
|
|
190
|
+
<div class="pf-v6-c-form__group-control">
|
|
191
|
+
<span class="pf-v6-c-form-control">
|
|
192
192
|
<input
|
|
193
193
|
type="text"
|
|
194
194
|
id="wizard-basic-form-field5"
|
|
@@ -197,18 +197,18 @@ wrapperTag: div
|
|
|
197
197
|
</span>
|
|
198
198
|
</div>
|
|
199
199
|
</div>
|
|
200
|
-
<div class="pf-
|
|
201
|
-
<div class="pf-
|
|
202
|
-
class="pf-
|
|
200
|
+
<div class="pf-v6-c-form__group">
|
|
201
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
202
|
+
class="pf-v6-c-form__label"
|
|
203
203
|
for="wizard-basic-form-field6"
|
|
204
204
|
>
|
|
205
|
-
<span class="pf-
|
|
206
|
-
class="pf-
|
|
205
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
206
|
+
class="pf-v6-c-form__label-required"
|
|
207
207
|
aria-hidden="true"
|
|
208
208
|
>*</span></label>
|
|
209
209
|
</div>
|
|
210
|
-
<div class="pf-
|
|
211
|
-
<span class="pf-
|
|
210
|
+
<div class="pf-v6-c-form__group-control">
|
|
211
|
+
<span class="pf-v6-c-form-control">
|
|
212
212
|
<input
|
|
213
213
|
type="text"
|
|
214
214
|
id="wizard-basic-form-field6"
|
|
@@ -217,18 +217,18 @@ wrapperTag: div
|
|
|
217
217
|
</span>
|
|
218
218
|
</div>
|
|
219
219
|
</div>
|
|
220
|
-
<div class="pf-
|
|
221
|
-
<div class="pf-
|
|
222
|
-
class="pf-
|
|
220
|
+
<div class="pf-v6-c-form__group">
|
|
221
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
222
|
+
class="pf-v6-c-form__label"
|
|
223
223
|
for="wizard-basic-form-field7"
|
|
224
224
|
>
|
|
225
|
-
<span class="pf-
|
|
226
|
-
class="pf-
|
|
225
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
226
|
+
class="pf-v6-c-form__label-required"
|
|
227
227
|
aria-hidden="true"
|
|
228
228
|
>*</span></label>
|
|
229
229
|
</div>
|
|
230
|
-
<div class="pf-
|
|
231
|
-
<span class="pf-
|
|
230
|
+
<div class="pf-v6-c-form__group-control">
|
|
231
|
+
<span class="pf-v6-c-form-control">
|
|
232
232
|
<input
|
|
233
233
|
type="text"
|
|
234
234
|
id="wizard-basic-form-field7"
|
|
@@ -241,11 +241,11 @@ wrapperTag: div
|
|
|
241
241
|
</div>
|
|
242
242
|
</main>
|
|
243
243
|
</div>
|
|
244
|
-
<footer class="pf-
|
|
245
|
-
<button class="pf-
|
|
246
|
-
<button class="pf-
|
|
247
|
-
<div class="pf-
|
|
248
|
-
<button class="pf-
|
|
244
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
245
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
246
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
247
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
248
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
249
249
|
</div>
|
|
250
250
|
</footer>
|
|
251
251
|
</div>
|
|
@@ -256,180 +256,180 @@ wrapperTag: div
|
|
|
256
256
|
### Nav expanded (mobile)
|
|
257
257
|
|
|
258
258
|
```html isFullscreen
|
|
259
|
-
<div class="pf-
|
|
260
|
-
<div class="pf-
|
|
261
|
-
<div class="pf-
|
|
259
|
+
<div class="pf-v6-c-wizard">
|
|
260
|
+
<div class="pf-v6-c-wizard__header">
|
|
261
|
+
<div class="pf-v6-c-wizard__close">
|
|
262
262
|
<button
|
|
263
|
-
class="pf-
|
|
263
|
+
class="pf-v6-c-button pf-m-plain"
|
|
264
264
|
type="button"
|
|
265
265
|
aria-label="Close"
|
|
266
266
|
>
|
|
267
267
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
268
268
|
</button>
|
|
269
269
|
</div>
|
|
270
|
-
<div class="pf-
|
|
271
|
-
<h1 class="pf-
|
|
270
|
+
<div class="pf-v6-c-wizard__title">
|
|
271
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
272
272
|
</div>
|
|
273
|
-
<div class="pf-
|
|
273
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
274
274
|
</div>
|
|
275
275
|
<button
|
|
276
276
|
aria-label="Wizard Header Toggle"
|
|
277
|
-
class="pf-
|
|
277
|
+
class="pf-v6-c-wizard__toggle pf-m-expanded"
|
|
278
278
|
aria-expanded="true"
|
|
279
279
|
>
|
|
280
|
-
<span class="pf-
|
|
281
|
-
<span class="pf-
|
|
282
|
-
<span class="pf-
|
|
280
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
281
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
282
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
283
283
|
Configuration
|
|
284
284
|
<i
|
|
285
|
-
class="fas fa-angle-right pf-
|
|
285
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
286
286
|
aria-hidden="true"
|
|
287
287
|
></i>
|
|
288
288
|
</span>
|
|
289
|
-
<span class="pf-
|
|
289
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
290
290
|
</span>
|
|
291
|
-
<span class="pf-
|
|
291
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
292
292
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
293
293
|
</span>
|
|
294
294
|
</button>
|
|
295
|
-
<div class="pf-
|
|
296
|
-
<div class="pf-
|
|
297
|
-
<nav class="pf-
|
|
298
|
-
<ol class="pf-
|
|
299
|
-
<li class="pf-
|
|
300
|
-
<button class="pf-
|
|
295
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
296
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
297
|
+
<nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
|
|
298
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
299
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
300
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
|
|
301
301
|
</li>
|
|
302
|
-
<li class="pf-
|
|
302
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
303
303
|
<button
|
|
304
|
-
class="pf-
|
|
304
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
305
305
|
type="button"
|
|
306
306
|
aria-expanded="true"
|
|
307
307
|
>
|
|
308
|
-
<span class="pf-
|
|
309
|
-
<span class="pf-
|
|
310
|
-
<span class="pf-
|
|
308
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
309
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
310
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
311
311
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
312
312
|
</span>
|
|
313
313
|
</span>
|
|
314
314
|
</button>
|
|
315
|
-
<ol class="pf-
|
|
316
|
-
<li class="pf-
|
|
317
|
-
<button class="pf-
|
|
315
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
316
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
317
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
318
318
|
</li>
|
|
319
|
-
<li class="pf-
|
|
319
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
320
320
|
<button
|
|
321
|
-
class="pf-
|
|
321
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
322
322
|
type="button"
|
|
323
323
|
aria-current="page"
|
|
324
324
|
>Substep B</button>
|
|
325
325
|
</li>
|
|
326
|
-
<li class="pf-
|
|
327
|
-
<button class="pf-
|
|
326
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
327
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
328
328
|
</li>
|
|
329
329
|
</ol>
|
|
330
330
|
</li>
|
|
331
|
-
<li class="pf-
|
|
332
|
-
<button class="pf-
|
|
331
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
332
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
333
333
|
</li>
|
|
334
|
-
<li class="pf-
|
|
334
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
335
335
|
<button
|
|
336
|
-
class="pf-
|
|
336
|
+
class="pf-v6-c-wizard__nav-link"
|
|
337
337
|
type="button"
|
|
338
338
|
disabled
|
|
339
339
|
>Review</button>
|
|
340
340
|
</li>
|
|
341
341
|
</ol>
|
|
342
342
|
</nav>
|
|
343
|
-
<main class="pf-
|
|
344
|
-
<div class="pf-
|
|
345
|
-
<form class="pf-
|
|
346
|
-
<div class="pf-
|
|
347
|
-
<div class="pf-
|
|
348
|
-
<span class="pf-
|
|
349
|
-
class="pf-
|
|
343
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
344
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
345
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
346
|
+
<div class="pf-v6-c-form__group">
|
|
347
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field1">
|
|
348
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
349
|
+
class="pf-v6-c-form__label-required"
|
|
350
350
|
aria-hidden="true"
|
|
351
351
|
>*</span></label>
|
|
352
352
|
</div>
|
|
353
|
-
<div class="pf-
|
|
354
|
-
<span class="pf-
|
|
353
|
+
<div class="pf-v6-c-form__group-control">
|
|
354
|
+
<span class="pf-v6-c-form-control">
|
|
355
355
|
<input type="text" id="-form-field1" name="-form-field1" />
|
|
356
356
|
</span>
|
|
357
357
|
</div>
|
|
358
358
|
</div>
|
|
359
|
-
<div class="pf-
|
|
360
|
-
<div class="pf-
|
|
361
|
-
<span class="pf-
|
|
362
|
-
class="pf-
|
|
359
|
+
<div class="pf-v6-c-form__group">
|
|
360
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field2">
|
|
361
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
362
|
+
class="pf-v6-c-form__label-required"
|
|
363
363
|
aria-hidden="true"
|
|
364
364
|
>*</span></label>
|
|
365
365
|
</div>
|
|
366
|
-
<div class="pf-
|
|
367
|
-
<span class="pf-
|
|
366
|
+
<div class="pf-v6-c-form__group-control">
|
|
367
|
+
<span class="pf-v6-c-form-control">
|
|
368
368
|
<input type="text" id="-form-field2" name="-form-field2" />
|
|
369
369
|
</span>
|
|
370
370
|
</div>
|
|
371
371
|
</div>
|
|
372
|
-
<div class="pf-
|
|
373
|
-
<div class="pf-
|
|
374
|
-
<span class="pf-
|
|
375
|
-
class="pf-
|
|
372
|
+
<div class="pf-v6-c-form__group">
|
|
373
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field3">
|
|
374
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
375
|
+
class="pf-v6-c-form__label-required"
|
|
376
376
|
aria-hidden="true"
|
|
377
377
|
>*</span></label>
|
|
378
378
|
</div>
|
|
379
|
-
<div class="pf-
|
|
380
|
-
<span class="pf-
|
|
379
|
+
<div class="pf-v6-c-form__group-control">
|
|
380
|
+
<span class="pf-v6-c-form-control">
|
|
381
381
|
<input type="text" id="-form-field3" name="-form-field3" />
|
|
382
382
|
</span>
|
|
383
383
|
</div>
|
|
384
384
|
</div>
|
|
385
|
-
<div class="pf-
|
|
386
|
-
<div class="pf-
|
|
387
|
-
<span class="pf-
|
|
388
|
-
class="pf-
|
|
385
|
+
<div class="pf-v6-c-form__group">
|
|
386
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field4">
|
|
387
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
388
|
+
class="pf-v6-c-form__label-required"
|
|
389
389
|
aria-hidden="true"
|
|
390
390
|
>*</span></label>
|
|
391
391
|
</div>
|
|
392
|
-
<div class="pf-
|
|
393
|
-
<span class="pf-
|
|
392
|
+
<div class="pf-v6-c-form__group-control">
|
|
393
|
+
<span class="pf-v6-c-form-control">
|
|
394
394
|
<input type="text" id="-form-field4" name="-form-field4" />
|
|
395
395
|
</span>
|
|
396
396
|
</div>
|
|
397
397
|
</div>
|
|
398
|
-
<div class="pf-
|
|
399
|
-
<div class="pf-
|
|
400
|
-
<span class="pf-
|
|
401
|
-
class="pf-
|
|
398
|
+
<div class="pf-v6-c-form__group">
|
|
399
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field5">
|
|
400
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
401
|
+
class="pf-v6-c-form__label-required"
|
|
402
402
|
aria-hidden="true"
|
|
403
403
|
>*</span></label>
|
|
404
404
|
</div>
|
|
405
|
-
<div class="pf-
|
|
406
|
-
<span class="pf-
|
|
405
|
+
<div class="pf-v6-c-form__group-control">
|
|
406
|
+
<span class="pf-v6-c-form-control">
|
|
407
407
|
<input type="text" id="-form-field5" name="-form-field5" />
|
|
408
408
|
</span>
|
|
409
409
|
</div>
|
|
410
410
|
</div>
|
|
411
|
-
<div class="pf-
|
|
412
|
-
<div class="pf-
|
|
413
|
-
<span class="pf-
|
|
414
|
-
class="pf-
|
|
411
|
+
<div class="pf-v6-c-form__group">
|
|
412
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field6">
|
|
413
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
414
|
+
class="pf-v6-c-form__label-required"
|
|
415
415
|
aria-hidden="true"
|
|
416
416
|
>*</span></label>
|
|
417
417
|
</div>
|
|
418
|
-
<div class="pf-
|
|
419
|
-
<span class="pf-
|
|
418
|
+
<div class="pf-v6-c-form__group-control">
|
|
419
|
+
<span class="pf-v6-c-form-control">
|
|
420
420
|
<input type="text" id="-form-field6" name="-form-field6" />
|
|
421
421
|
</span>
|
|
422
422
|
</div>
|
|
423
423
|
</div>
|
|
424
|
-
<div class="pf-
|
|
425
|
-
<div class="pf-
|
|
426
|
-
<span class="pf-
|
|
427
|
-
class="pf-
|
|
424
|
+
<div class="pf-v6-c-form__group">
|
|
425
|
+
<div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field7">
|
|
426
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
427
|
+
class="pf-v6-c-form__label-required"
|
|
428
428
|
aria-hidden="true"
|
|
429
429
|
>*</span></label>
|
|
430
430
|
</div>
|
|
431
|
-
<div class="pf-
|
|
432
|
-
<span class="pf-
|
|
431
|
+
<div class="pf-v6-c-form__group-control">
|
|
432
|
+
<span class="pf-v6-c-form-control">
|
|
433
433
|
<input type="text" id="-form-field7" name="-form-field7" />
|
|
434
434
|
</span>
|
|
435
435
|
</div>
|
|
@@ -438,11 +438,11 @@ wrapperTag: div
|
|
|
438
438
|
</div>
|
|
439
439
|
</main>
|
|
440
440
|
</div>
|
|
441
|
-
<footer class="pf-
|
|
442
|
-
<button class="pf-
|
|
443
|
-
<button class="pf-
|
|
444
|
-
<div class="pf-
|
|
445
|
-
<button class="pf-
|
|
441
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
442
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
443
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
444
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
445
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
446
446
|
</div>
|
|
447
447
|
</footer>
|
|
448
448
|
</div>
|
|
@@ -453,112 +453,112 @@ wrapperTag: div
|
|
|
453
453
|
### With drawer
|
|
454
454
|
|
|
455
455
|
```html isFullscreen
|
|
456
|
-
<div class="pf-
|
|
457
|
-
<div class="pf-
|
|
458
|
-
<div class="pf-
|
|
456
|
+
<div class="pf-v6-c-wizard">
|
|
457
|
+
<div class="pf-v6-c-wizard__header">
|
|
458
|
+
<div class="pf-v6-c-wizard__close">
|
|
459
459
|
<button
|
|
460
|
-
class="pf-
|
|
460
|
+
class="pf-v6-c-button pf-m-plain"
|
|
461
461
|
type="button"
|
|
462
462
|
aria-label="Close"
|
|
463
463
|
>
|
|
464
464
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
465
465
|
</button>
|
|
466
466
|
</div>
|
|
467
|
-
<div class="pf-
|
|
468
|
-
<h1 class="pf-
|
|
467
|
+
<div class="pf-v6-c-wizard__title">
|
|
468
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
469
469
|
</div>
|
|
470
|
-
<div class="pf-
|
|
470
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
471
471
|
</div>
|
|
472
472
|
<button
|
|
473
473
|
aria-label="Wizard Header Toggle"
|
|
474
|
-
class="pf-
|
|
474
|
+
class="pf-v6-c-wizard__toggle"
|
|
475
475
|
aria-expanded="false"
|
|
476
476
|
>
|
|
477
|
-
<span class="pf-
|
|
478
|
-
<span class="pf-
|
|
479
|
-
<span class="pf-
|
|
477
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
478
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
479
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
480
480
|
Configuration
|
|
481
481
|
<i
|
|
482
|
-
class="fas fa-angle-right pf-
|
|
482
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
483
483
|
aria-hidden="true"
|
|
484
484
|
></i>
|
|
485
485
|
</span>
|
|
486
|
-
<span class="pf-
|
|
486
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
487
487
|
</span>
|
|
488
|
-
<span class="pf-
|
|
488
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
489
489
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
490
490
|
</span>
|
|
491
491
|
</button>
|
|
492
|
-
<div class="pf-
|
|
493
|
-
<div class="pf-
|
|
494
|
-
<nav class="pf-
|
|
495
|
-
<ol class="pf-
|
|
496
|
-
<li class="pf-
|
|
497
|
-
<button class="pf-
|
|
492
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
493
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
494
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
495
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
496
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
497
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
|
|
498
498
|
</li>
|
|
499
|
-
<li class="pf-
|
|
499
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
500
500
|
<button
|
|
501
|
-
class="pf-
|
|
501
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
502
502
|
type="button"
|
|
503
503
|
aria-expanded="true"
|
|
504
504
|
>
|
|
505
|
-
<span class="pf-
|
|
506
|
-
<span class="pf-
|
|
507
|
-
<span class="pf-
|
|
505
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
506
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
507
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
508
508
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
509
509
|
</span>
|
|
510
510
|
</span>
|
|
511
511
|
</button>
|
|
512
|
-
<ol class="pf-
|
|
513
|
-
<li class="pf-
|
|
514
|
-
<button class="pf-
|
|
512
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
513
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
514
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
515
515
|
</li>
|
|
516
|
-
<li class="pf-
|
|
516
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
517
517
|
<button
|
|
518
|
-
class="pf-
|
|
518
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
519
519
|
type="button"
|
|
520
520
|
aria-current="page"
|
|
521
521
|
>Substep B</button>
|
|
522
522
|
</li>
|
|
523
|
-
<li class="pf-
|
|
524
|
-
<button class="pf-
|
|
523
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
524
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
525
525
|
</li>
|
|
526
526
|
</ol>
|
|
527
527
|
</li>
|
|
528
|
-
<li class="pf-
|
|
529
|
-
<button class="pf-
|
|
528
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
529
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
530
530
|
</li>
|
|
531
|
-
<li class="pf-
|
|
531
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
532
532
|
<button
|
|
533
|
-
class="pf-
|
|
533
|
+
class="pf-v6-c-wizard__nav-link"
|
|
534
534
|
type="button"
|
|
535
535
|
disabled
|
|
536
536
|
>Review</button>
|
|
537
537
|
</li>
|
|
538
538
|
</ol>
|
|
539
539
|
</nav>
|
|
540
|
-
<main class="pf-
|
|
541
|
-
<div class="pf-
|
|
542
|
-
<div class="pf-
|
|
543
|
-
<div class="pf-
|
|
544
|
-
<div class="pf-
|
|
540
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
541
|
+
<div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
|
|
542
|
+
<div class="pf-v6-c-drawer__main">
|
|
543
|
+
<div class="pf-v6-c-drawer__content">
|
|
544
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
545
545
|
<button
|
|
546
|
-
class="pf-
|
|
546
|
+
class="pf-v6-c-button pf-v5-u-hidden pf-m-link pf-m-inline pf-v5-u-float-right pf-v5-u-ml-md"
|
|
547
547
|
type="button"
|
|
548
548
|
>Open drawer</button>
|
|
549
|
-
<form class="pf-
|
|
550
|
-
<div class="pf-
|
|
551
|
-
<div class="pf-
|
|
552
|
-
class="pf-
|
|
549
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
550
|
+
<div class="pf-v6-c-form__group">
|
|
551
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
552
|
+
class="pf-v6-c-form__label"
|
|
553
553
|
for="wizard-with-drawer-example-form-field1"
|
|
554
554
|
>
|
|
555
|
-
<span class="pf-
|
|
556
|
-
class="pf-
|
|
555
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
556
|
+
class="pf-v6-c-form__label-required"
|
|
557
557
|
aria-hidden="true"
|
|
558
558
|
>*</span></label>
|
|
559
559
|
</div>
|
|
560
|
-
<div class="pf-
|
|
561
|
-
<span class="pf-
|
|
560
|
+
<div class="pf-v6-c-form__group-control">
|
|
561
|
+
<span class="pf-v6-c-form-control">
|
|
562
562
|
<input
|
|
563
563
|
type="text"
|
|
564
564
|
id="wizard-with-drawer-example-form-field1"
|
|
@@ -567,18 +567,18 @@ wrapperTag: div
|
|
|
567
567
|
</span>
|
|
568
568
|
</div>
|
|
569
569
|
</div>
|
|
570
|
-
<div class="pf-
|
|
571
|
-
<div class="pf-
|
|
572
|
-
class="pf-
|
|
570
|
+
<div class="pf-v6-c-form__group">
|
|
571
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
572
|
+
class="pf-v6-c-form__label"
|
|
573
573
|
for="wizard-with-drawer-example-form-field2"
|
|
574
574
|
>
|
|
575
|
-
<span class="pf-
|
|
576
|
-
class="pf-
|
|
575
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
576
|
+
class="pf-v6-c-form__label-required"
|
|
577
577
|
aria-hidden="true"
|
|
578
578
|
>*</span></label>
|
|
579
579
|
</div>
|
|
580
|
-
<div class="pf-
|
|
581
|
-
<span class="pf-
|
|
580
|
+
<div class="pf-v6-c-form__group-control">
|
|
581
|
+
<span class="pf-v6-c-form-control">
|
|
582
582
|
<input
|
|
583
583
|
type="text"
|
|
584
584
|
id="wizard-with-drawer-example-form-field2"
|
|
@@ -587,18 +587,18 @@ wrapperTag: div
|
|
|
587
587
|
</span>
|
|
588
588
|
</div>
|
|
589
589
|
</div>
|
|
590
|
-
<div class="pf-
|
|
591
|
-
<div class="pf-
|
|
592
|
-
class="pf-
|
|
590
|
+
<div class="pf-v6-c-form__group">
|
|
591
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
592
|
+
class="pf-v6-c-form__label"
|
|
593
593
|
for="wizard-with-drawer-example-form-field3"
|
|
594
594
|
>
|
|
595
|
-
<span class="pf-
|
|
596
|
-
class="pf-
|
|
595
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
596
|
+
class="pf-v6-c-form__label-required"
|
|
597
597
|
aria-hidden="true"
|
|
598
598
|
>*</span></label>
|
|
599
599
|
</div>
|
|
600
|
-
<div class="pf-
|
|
601
|
-
<span class="pf-
|
|
600
|
+
<div class="pf-v6-c-form__group-control">
|
|
601
|
+
<span class="pf-v6-c-form-control">
|
|
602
602
|
<input
|
|
603
603
|
type="text"
|
|
604
604
|
id="wizard-with-drawer-example-form-field3"
|
|
@@ -607,18 +607,18 @@ wrapperTag: div
|
|
|
607
607
|
</span>
|
|
608
608
|
</div>
|
|
609
609
|
</div>
|
|
610
|
-
<div class="pf-
|
|
611
|
-
<div class="pf-
|
|
612
|
-
class="pf-
|
|
610
|
+
<div class="pf-v6-c-form__group">
|
|
611
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
612
|
+
class="pf-v6-c-form__label"
|
|
613
613
|
for="wizard-with-drawer-example-form-field4"
|
|
614
614
|
>
|
|
615
|
-
<span class="pf-
|
|
616
|
-
class="pf-
|
|
615
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
616
|
+
class="pf-v6-c-form__label-required"
|
|
617
617
|
aria-hidden="true"
|
|
618
618
|
>*</span></label>
|
|
619
619
|
</div>
|
|
620
|
-
<div class="pf-
|
|
621
|
-
<span class="pf-
|
|
620
|
+
<div class="pf-v6-c-form__group-control">
|
|
621
|
+
<span class="pf-v6-c-form-control">
|
|
622
622
|
<input
|
|
623
623
|
type="text"
|
|
624
624
|
id="wizard-with-drawer-example-form-field4"
|
|
@@ -627,18 +627,18 @@ wrapperTag: div
|
|
|
627
627
|
</span>
|
|
628
628
|
</div>
|
|
629
629
|
</div>
|
|
630
|
-
<div class="pf-
|
|
631
|
-
<div class="pf-
|
|
632
|
-
class="pf-
|
|
630
|
+
<div class="pf-v6-c-form__group">
|
|
631
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
632
|
+
class="pf-v6-c-form__label"
|
|
633
633
|
for="wizard-with-drawer-example-form-field5"
|
|
634
634
|
>
|
|
635
|
-
<span class="pf-
|
|
636
|
-
class="pf-
|
|
635
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
636
|
+
class="pf-v6-c-form__label-required"
|
|
637
637
|
aria-hidden="true"
|
|
638
638
|
>*</span></label>
|
|
639
639
|
</div>
|
|
640
|
-
<div class="pf-
|
|
641
|
-
<span class="pf-
|
|
640
|
+
<div class="pf-v6-c-form__group-control">
|
|
641
|
+
<span class="pf-v6-c-form-control">
|
|
642
642
|
<input
|
|
643
643
|
type="text"
|
|
644
644
|
id="wizard-with-drawer-example-form-field5"
|
|
@@ -647,18 +647,18 @@ wrapperTag: div
|
|
|
647
647
|
</span>
|
|
648
648
|
</div>
|
|
649
649
|
</div>
|
|
650
|
-
<div class="pf-
|
|
651
|
-
<div class="pf-
|
|
652
|
-
class="pf-
|
|
650
|
+
<div class="pf-v6-c-form__group">
|
|
651
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
652
|
+
class="pf-v6-c-form__label"
|
|
653
653
|
for="wizard-with-drawer-example-form-field6"
|
|
654
654
|
>
|
|
655
|
-
<span class="pf-
|
|
656
|
-
class="pf-
|
|
655
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
656
|
+
class="pf-v6-c-form__label-required"
|
|
657
657
|
aria-hidden="true"
|
|
658
658
|
>*</span></label>
|
|
659
659
|
</div>
|
|
660
|
-
<div class="pf-
|
|
661
|
-
<span class="pf-
|
|
660
|
+
<div class="pf-v6-c-form__group-control">
|
|
661
|
+
<span class="pf-v6-c-form-control">
|
|
662
662
|
<input
|
|
663
663
|
type="text"
|
|
664
664
|
id="wizard-with-drawer-example-form-field6"
|
|
@@ -667,18 +667,18 @@ wrapperTag: div
|
|
|
667
667
|
</span>
|
|
668
668
|
</div>
|
|
669
669
|
</div>
|
|
670
|
-
<div class="pf-
|
|
671
|
-
<div class="pf-
|
|
672
|
-
class="pf-
|
|
670
|
+
<div class="pf-v6-c-form__group">
|
|
671
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
672
|
+
class="pf-v6-c-form__label"
|
|
673
673
|
for="wizard-with-drawer-example-form-field7"
|
|
674
674
|
>
|
|
675
|
-
<span class="pf-
|
|
676
|
-
class="pf-
|
|
675
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
676
|
+
class="pf-v6-c-form__label-required"
|
|
677
677
|
aria-hidden="true"
|
|
678
678
|
>*</span></label>
|
|
679
679
|
</div>
|
|
680
|
-
<div class="pf-
|
|
681
|
-
<span class="pf-
|
|
680
|
+
<div class="pf-v6-c-form__group-control">
|
|
681
|
+
<span class="pf-v6-c-form-control">
|
|
682
682
|
<input
|
|
683
683
|
type="text"
|
|
684
684
|
id="wizard-with-drawer-example-form-field7"
|
|
@@ -690,13 +690,13 @@ wrapperTag: div
|
|
|
690
690
|
</form>
|
|
691
691
|
</div>
|
|
692
692
|
</div>
|
|
693
|
-
<div class="pf-
|
|
694
|
-
<div class="pf-
|
|
695
|
-
<div class="pf-
|
|
696
|
-
<div class="pf-
|
|
697
|
-
<div class="pf-
|
|
693
|
+
<div class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
694
|
+
<div class="pf-v6-c-drawer__body">
|
|
695
|
+
<div class="pf-v6-c-drawer__head">
|
|
696
|
+
<div class="pf-v6-c-drawer__actions">
|
|
697
|
+
<div class="pf-v6-c-drawer__close">
|
|
698
698
|
<button
|
|
699
|
-
class="pf-
|
|
699
|
+
class="pf-v6-c-button pf-m-plain"
|
|
700
700
|
type="button"
|
|
701
701
|
aria-label="Close drawer panel"
|
|
702
702
|
>
|
|
@@ -708,11 +708,11 @@ wrapperTag: div
|
|
|
708
708
|
</div>
|
|
709
709
|
</div>
|
|
710
710
|
</div>
|
|
711
|
-
<footer class="pf-
|
|
712
|
-
<button class="pf-
|
|
713
|
-
<button class="pf-
|
|
714
|
-
<div class="pf-
|
|
715
|
-
<button class="pf-
|
|
711
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
712
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
713
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
714
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
715
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
716
716
|
</div>
|
|
717
717
|
</footer>
|
|
718
718
|
</div>
|
|
@@ -726,105 +726,105 @@ wrapperTag: div
|
|
|
726
726
|
### Expandable collapsed
|
|
727
727
|
|
|
728
728
|
```html isFullscreen
|
|
729
|
-
<div class="pf-
|
|
730
|
-
<div class="pf-
|
|
731
|
-
<div class="pf-
|
|
729
|
+
<div class="pf-v6-c-wizard">
|
|
730
|
+
<div class="pf-v6-c-wizard__header">
|
|
731
|
+
<div class="pf-v6-c-wizard__close">
|
|
732
732
|
<button
|
|
733
|
-
class="pf-
|
|
733
|
+
class="pf-v6-c-button pf-m-plain"
|
|
734
734
|
type="button"
|
|
735
735
|
aria-label="Close"
|
|
736
736
|
>
|
|
737
737
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
738
738
|
</button>
|
|
739
739
|
</div>
|
|
740
|
-
<div class="pf-
|
|
741
|
-
<h1 class="pf-
|
|
740
|
+
<div class="pf-v6-c-wizard__title">
|
|
741
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
742
742
|
</div>
|
|
743
|
-
<div class="pf-
|
|
743
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
744
744
|
</div>
|
|
745
745
|
<button
|
|
746
746
|
aria-label="Wizard Header Toggle"
|
|
747
|
-
class="pf-
|
|
747
|
+
class="pf-v6-c-wizard__toggle"
|
|
748
748
|
aria-expanded="false"
|
|
749
749
|
>
|
|
750
|
-
<span class="pf-
|
|
751
|
-
<span class="pf-
|
|
752
|
-
<span class="pf-
|
|
750
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
751
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
752
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
753
753
|
Configuration
|
|
754
754
|
<i
|
|
755
|
-
class="fas fa-angle-right pf-
|
|
755
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
756
756
|
aria-hidden="true"
|
|
757
757
|
></i>
|
|
758
758
|
</span>
|
|
759
|
-
<span class="pf-
|
|
759
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
760
760
|
</span>
|
|
761
|
-
<span class="pf-
|
|
761
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
762
762
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
763
763
|
</span>
|
|
764
764
|
</button>
|
|
765
|
-
<div class="pf-
|
|
766
|
-
<div class="pf-
|
|
767
|
-
<nav class="pf-
|
|
768
|
-
<ol class="pf-
|
|
769
|
-
<li class="pf-
|
|
765
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
766
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
767
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
768
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
769
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
770
770
|
<button
|
|
771
|
-
class="pf-
|
|
771
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
772
772
|
type="button"
|
|
773
773
|
aria-current="page"
|
|
774
774
|
>Information</button>
|
|
775
775
|
</li>
|
|
776
|
-
<li class="pf-
|
|
776
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable">
|
|
777
777
|
<button
|
|
778
|
-
class="pf-
|
|
778
|
+
class="pf-v6-c-wizard__nav-link"
|
|
779
779
|
type="button"
|
|
780
780
|
aria-expanded="false"
|
|
781
781
|
>
|
|
782
|
-
<span class="pf-
|
|
783
|
-
<span class="pf-
|
|
784
|
-
<span class="pf-
|
|
782
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
783
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
784
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
785
785
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
786
786
|
</span>
|
|
787
787
|
</span>
|
|
788
788
|
</button>
|
|
789
|
-
<ol class="pf-
|
|
790
|
-
<li class="pf-
|
|
791
|
-
<button class="pf-
|
|
789
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
790
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
791
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
792
792
|
</li>
|
|
793
|
-
<li class="pf-
|
|
794
|
-
<button class="pf-
|
|
793
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
794
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
|
|
795
795
|
</li>
|
|
796
|
-
<li class="pf-
|
|
797
|
-
<button class="pf-
|
|
796
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
797
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
798
798
|
</li>
|
|
799
799
|
</ol>
|
|
800
800
|
</li>
|
|
801
|
-
<li class="pf-
|
|
802
|
-
<button class="pf-
|
|
801
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
802
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
803
803
|
</li>
|
|
804
|
-
<li class="pf-
|
|
804
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
805
805
|
<button
|
|
806
|
-
class="pf-
|
|
806
|
+
class="pf-v6-c-wizard__nav-link"
|
|
807
807
|
type="button"
|
|
808
808
|
disabled
|
|
809
809
|
>Review</button>
|
|
810
810
|
</li>
|
|
811
811
|
</ol>
|
|
812
812
|
</nav>
|
|
813
|
-
<main class="pf-
|
|
814
|
-
<div class="pf-
|
|
815
|
-
<form class="pf-
|
|
816
|
-
<div class="pf-
|
|
817
|
-
<div class="pf-
|
|
818
|
-
class="pf-
|
|
813
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
814
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
815
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
816
|
+
<div class="pf-v6-c-form__group">
|
|
817
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
818
|
+
class="pf-v6-c-form__label"
|
|
819
819
|
for="wizard-expandable-collapsed-form-field1"
|
|
820
820
|
>
|
|
821
|
-
<span class="pf-
|
|
822
|
-
class="pf-
|
|
821
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
822
|
+
class="pf-v6-c-form__label-required"
|
|
823
823
|
aria-hidden="true"
|
|
824
824
|
>*</span></label>
|
|
825
825
|
</div>
|
|
826
|
-
<div class="pf-
|
|
827
|
-
<span class="pf-
|
|
826
|
+
<div class="pf-v6-c-form__group-control">
|
|
827
|
+
<span class="pf-v6-c-form-control">
|
|
828
828
|
<input
|
|
829
829
|
type="text"
|
|
830
830
|
id="wizard-expandable-collapsed-form-field1"
|
|
@@ -833,18 +833,18 @@ wrapperTag: div
|
|
|
833
833
|
</span>
|
|
834
834
|
</div>
|
|
835
835
|
</div>
|
|
836
|
-
<div class="pf-
|
|
837
|
-
<div class="pf-
|
|
838
|
-
class="pf-
|
|
836
|
+
<div class="pf-v6-c-form__group">
|
|
837
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
838
|
+
class="pf-v6-c-form__label"
|
|
839
839
|
for="wizard-expandable-collapsed-form-field2"
|
|
840
840
|
>
|
|
841
|
-
<span class="pf-
|
|
842
|
-
class="pf-
|
|
841
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
842
|
+
class="pf-v6-c-form__label-required"
|
|
843
843
|
aria-hidden="true"
|
|
844
844
|
>*</span></label>
|
|
845
845
|
</div>
|
|
846
|
-
<div class="pf-
|
|
847
|
-
<span class="pf-
|
|
846
|
+
<div class="pf-v6-c-form__group-control">
|
|
847
|
+
<span class="pf-v6-c-form-control">
|
|
848
848
|
<input
|
|
849
849
|
type="text"
|
|
850
850
|
id="wizard-expandable-collapsed-form-field2"
|
|
@@ -853,18 +853,18 @@ wrapperTag: div
|
|
|
853
853
|
</span>
|
|
854
854
|
</div>
|
|
855
855
|
</div>
|
|
856
|
-
<div class="pf-
|
|
857
|
-
<div class="pf-
|
|
858
|
-
class="pf-
|
|
856
|
+
<div class="pf-v6-c-form__group">
|
|
857
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
858
|
+
class="pf-v6-c-form__label"
|
|
859
859
|
for="wizard-expandable-collapsed-form-field3"
|
|
860
860
|
>
|
|
861
|
-
<span class="pf-
|
|
862
|
-
class="pf-
|
|
861
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
862
|
+
class="pf-v6-c-form__label-required"
|
|
863
863
|
aria-hidden="true"
|
|
864
864
|
>*</span></label>
|
|
865
865
|
</div>
|
|
866
|
-
<div class="pf-
|
|
867
|
-
<span class="pf-
|
|
866
|
+
<div class="pf-v6-c-form__group-control">
|
|
867
|
+
<span class="pf-v6-c-form-control">
|
|
868
868
|
<input
|
|
869
869
|
type="text"
|
|
870
870
|
id="wizard-expandable-collapsed-form-field3"
|
|
@@ -873,18 +873,18 @@ wrapperTag: div
|
|
|
873
873
|
</span>
|
|
874
874
|
</div>
|
|
875
875
|
</div>
|
|
876
|
-
<div class="pf-
|
|
877
|
-
<div class="pf-
|
|
878
|
-
class="pf-
|
|
876
|
+
<div class="pf-v6-c-form__group">
|
|
877
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
878
|
+
class="pf-v6-c-form__label"
|
|
879
879
|
for="wizard-expandable-collapsed-form-field4"
|
|
880
880
|
>
|
|
881
|
-
<span class="pf-
|
|
882
|
-
class="pf-
|
|
881
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
882
|
+
class="pf-v6-c-form__label-required"
|
|
883
883
|
aria-hidden="true"
|
|
884
884
|
>*</span></label>
|
|
885
885
|
</div>
|
|
886
|
-
<div class="pf-
|
|
887
|
-
<span class="pf-
|
|
886
|
+
<div class="pf-v6-c-form__group-control">
|
|
887
|
+
<span class="pf-v6-c-form-control">
|
|
888
888
|
<input
|
|
889
889
|
type="text"
|
|
890
890
|
id="wizard-expandable-collapsed-form-field4"
|
|
@@ -893,18 +893,18 @@ wrapperTag: div
|
|
|
893
893
|
</span>
|
|
894
894
|
</div>
|
|
895
895
|
</div>
|
|
896
|
-
<div class="pf-
|
|
897
|
-
<div class="pf-
|
|
898
|
-
class="pf-
|
|
896
|
+
<div class="pf-v6-c-form__group">
|
|
897
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
898
|
+
class="pf-v6-c-form__label"
|
|
899
899
|
for="wizard-expandable-collapsed-form-field5"
|
|
900
900
|
>
|
|
901
|
-
<span class="pf-
|
|
902
|
-
class="pf-
|
|
901
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
902
|
+
class="pf-v6-c-form__label-required"
|
|
903
903
|
aria-hidden="true"
|
|
904
904
|
>*</span></label>
|
|
905
905
|
</div>
|
|
906
|
-
<div class="pf-
|
|
907
|
-
<span class="pf-
|
|
906
|
+
<div class="pf-v6-c-form__group-control">
|
|
907
|
+
<span class="pf-v6-c-form-control">
|
|
908
908
|
<input
|
|
909
909
|
type="text"
|
|
910
910
|
id="wizard-expandable-collapsed-form-field5"
|
|
@@ -913,18 +913,18 @@ wrapperTag: div
|
|
|
913
913
|
</span>
|
|
914
914
|
</div>
|
|
915
915
|
</div>
|
|
916
|
-
<div class="pf-
|
|
917
|
-
<div class="pf-
|
|
918
|
-
class="pf-
|
|
916
|
+
<div class="pf-v6-c-form__group">
|
|
917
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
918
|
+
class="pf-v6-c-form__label"
|
|
919
919
|
for="wizard-expandable-collapsed-form-field6"
|
|
920
920
|
>
|
|
921
|
-
<span class="pf-
|
|
922
|
-
class="pf-
|
|
921
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
922
|
+
class="pf-v6-c-form__label-required"
|
|
923
923
|
aria-hidden="true"
|
|
924
924
|
>*</span></label>
|
|
925
925
|
</div>
|
|
926
|
-
<div class="pf-
|
|
927
|
-
<span class="pf-
|
|
926
|
+
<div class="pf-v6-c-form__group-control">
|
|
927
|
+
<span class="pf-v6-c-form-control">
|
|
928
928
|
<input
|
|
929
929
|
type="text"
|
|
930
930
|
id="wizard-expandable-collapsed-form-field6"
|
|
@@ -933,18 +933,18 @@ wrapperTag: div
|
|
|
933
933
|
</span>
|
|
934
934
|
</div>
|
|
935
935
|
</div>
|
|
936
|
-
<div class="pf-
|
|
937
|
-
<div class="pf-
|
|
938
|
-
class="pf-
|
|
936
|
+
<div class="pf-v6-c-form__group">
|
|
937
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
938
|
+
class="pf-v6-c-form__label"
|
|
939
939
|
for="wizard-expandable-collapsed-form-field7"
|
|
940
940
|
>
|
|
941
|
-
<span class="pf-
|
|
942
|
-
class="pf-
|
|
941
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
942
|
+
class="pf-v6-c-form__label-required"
|
|
943
943
|
aria-hidden="true"
|
|
944
944
|
>*</span></label>
|
|
945
945
|
</div>
|
|
946
|
-
<div class="pf-
|
|
947
|
-
<span class="pf-
|
|
946
|
+
<div class="pf-v6-c-form__group-control">
|
|
947
|
+
<span class="pf-v6-c-form-control">
|
|
948
948
|
<input
|
|
949
949
|
type="text"
|
|
950
950
|
id="wizard-expandable-collapsed-form-field7"
|
|
@@ -957,11 +957,11 @@ wrapperTag: div
|
|
|
957
957
|
</div>
|
|
958
958
|
</main>
|
|
959
959
|
</div>
|
|
960
|
-
<footer class="pf-
|
|
961
|
-
<button class="pf-
|
|
962
|
-
<button class="pf-
|
|
963
|
-
<div class="pf-
|
|
964
|
-
<button class="pf-
|
|
960
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
961
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
962
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
963
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
964
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
965
965
|
</div>
|
|
966
966
|
</footer>
|
|
967
967
|
</div>
|
|
@@ -972,105 +972,105 @@ wrapperTag: div
|
|
|
972
972
|
### Expandable expanded
|
|
973
973
|
|
|
974
974
|
```html isFullscreen
|
|
975
|
-
<div class="pf-
|
|
976
|
-
<div class="pf-
|
|
977
|
-
<div class="pf-
|
|
975
|
+
<div class="pf-v6-c-wizard">
|
|
976
|
+
<div class="pf-v6-c-wizard__header">
|
|
977
|
+
<div class="pf-v6-c-wizard__close">
|
|
978
978
|
<button
|
|
979
|
-
class="pf-
|
|
979
|
+
class="pf-v6-c-button pf-m-plain"
|
|
980
980
|
type="button"
|
|
981
981
|
aria-label="Close"
|
|
982
982
|
>
|
|
983
983
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
984
984
|
</button>
|
|
985
985
|
</div>
|
|
986
|
-
<div class="pf-
|
|
987
|
-
<h1 class="pf-
|
|
986
|
+
<div class="pf-v6-c-wizard__title">
|
|
987
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
988
988
|
</div>
|
|
989
|
-
<div class="pf-
|
|
989
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
990
990
|
</div>
|
|
991
991
|
<button
|
|
992
992
|
aria-label="Wizard Header Toggle"
|
|
993
|
-
class="pf-
|
|
993
|
+
class="pf-v6-c-wizard__toggle"
|
|
994
994
|
aria-expanded="false"
|
|
995
995
|
>
|
|
996
|
-
<span class="pf-
|
|
997
|
-
<span class="pf-
|
|
998
|
-
<span class="pf-
|
|
996
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
997
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
998
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
999
999
|
Configuration
|
|
1000
1000
|
<i
|
|
1001
|
-
class="fas fa-angle-right pf-
|
|
1001
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
1002
1002
|
aria-hidden="true"
|
|
1003
1003
|
></i>
|
|
1004
1004
|
</span>
|
|
1005
|
-
<span class="pf-
|
|
1005
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
1006
1006
|
</span>
|
|
1007
|
-
<span class="pf-
|
|
1007
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
1008
1008
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1009
1009
|
</span>
|
|
1010
1010
|
</button>
|
|
1011
|
-
<div class="pf-
|
|
1012
|
-
<div class="pf-
|
|
1013
|
-
<nav class="pf-
|
|
1014
|
-
<ol class="pf-
|
|
1015
|
-
<li class="pf-
|
|
1016
|
-
<button class="pf-
|
|
1011
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
1012
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
1013
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
1014
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
1015
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1016
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
|
|
1017
1017
|
</li>
|
|
1018
|
-
<li class="pf-
|
|
1018
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
1019
1019
|
<button
|
|
1020
|
-
class="pf-
|
|
1020
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
1021
1021
|
type="button"
|
|
1022
1022
|
aria-expanded="true"
|
|
1023
1023
|
>
|
|
1024
|
-
<span class="pf-
|
|
1025
|
-
<span class="pf-
|
|
1026
|
-
<span class="pf-
|
|
1024
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
1025
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
1026
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
1027
1027
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1028
1028
|
</span>
|
|
1029
1029
|
</span>
|
|
1030
1030
|
</button>
|
|
1031
|
-
<ol class="pf-
|
|
1032
|
-
<li class="pf-
|
|
1033
|
-
<button class="pf-
|
|
1031
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
1032
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1033
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
1034
1034
|
</li>
|
|
1035
|
-
<li class="pf-
|
|
1035
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1036
1036
|
<button
|
|
1037
|
-
class="pf-
|
|
1037
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
1038
1038
|
type="button"
|
|
1039
1039
|
aria-current="page"
|
|
1040
1040
|
>Substep B</button>
|
|
1041
1041
|
</li>
|
|
1042
|
-
<li class="pf-
|
|
1043
|
-
<button class="pf-
|
|
1042
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1043
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
1044
1044
|
</li>
|
|
1045
1045
|
</ol>
|
|
1046
1046
|
</li>
|
|
1047
|
-
<li class="pf-
|
|
1048
|
-
<button class="pf-
|
|
1047
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1048
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
1049
1049
|
</li>
|
|
1050
|
-
<li class="pf-
|
|
1050
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1051
1051
|
<button
|
|
1052
|
-
class="pf-
|
|
1052
|
+
class="pf-v6-c-wizard__nav-link"
|
|
1053
1053
|
type="button"
|
|
1054
1054
|
disabled
|
|
1055
1055
|
>Review</button>
|
|
1056
1056
|
</li>
|
|
1057
1057
|
</ol>
|
|
1058
1058
|
</nav>
|
|
1059
|
-
<main class="pf-
|
|
1060
|
-
<div class="pf-
|
|
1061
|
-
<form class="pf-
|
|
1062
|
-
<div class="pf-
|
|
1063
|
-
<div class="pf-
|
|
1064
|
-
class="pf-
|
|
1059
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
1060
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
1061
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
1062
|
+
<div class="pf-v6-c-form__group">
|
|
1063
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1064
|
+
class="pf-v6-c-form__label"
|
|
1065
1065
|
for="wizard-expandable-expanded-form-field1"
|
|
1066
1066
|
>
|
|
1067
|
-
<span class="pf-
|
|
1068
|
-
class="pf-
|
|
1067
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
1068
|
+
class="pf-v6-c-form__label-required"
|
|
1069
1069
|
aria-hidden="true"
|
|
1070
1070
|
>*</span></label>
|
|
1071
1071
|
</div>
|
|
1072
|
-
<div class="pf-
|
|
1073
|
-
<span class="pf-
|
|
1072
|
+
<div class="pf-v6-c-form__group-control">
|
|
1073
|
+
<span class="pf-v6-c-form-control">
|
|
1074
1074
|
<input
|
|
1075
1075
|
type="text"
|
|
1076
1076
|
id="wizard-expandable-expanded-form-field1"
|
|
@@ -1079,18 +1079,18 @@ wrapperTag: div
|
|
|
1079
1079
|
</span>
|
|
1080
1080
|
</div>
|
|
1081
1081
|
</div>
|
|
1082
|
-
<div class="pf-
|
|
1083
|
-
<div class="pf-
|
|
1084
|
-
class="pf-
|
|
1082
|
+
<div class="pf-v6-c-form__group">
|
|
1083
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1084
|
+
class="pf-v6-c-form__label"
|
|
1085
1085
|
for="wizard-expandable-expanded-form-field2"
|
|
1086
1086
|
>
|
|
1087
|
-
<span class="pf-
|
|
1088
|
-
class="pf-
|
|
1087
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
1088
|
+
class="pf-v6-c-form__label-required"
|
|
1089
1089
|
aria-hidden="true"
|
|
1090
1090
|
>*</span></label>
|
|
1091
1091
|
</div>
|
|
1092
|
-
<div class="pf-
|
|
1093
|
-
<span class="pf-
|
|
1092
|
+
<div class="pf-v6-c-form__group-control">
|
|
1093
|
+
<span class="pf-v6-c-form-control">
|
|
1094
1094
|
<input
|
|
1095
1095
|
type="text"
|
|
1096
1096
|
id="wizard-expandable-expanded-form-field2"
|
|
@@ -1099,18 +1099,18 @@ wrapperTag: div
|
|
|
1099
1099
|
</span>
|
|
1100
1100
|
</div>
|
|
1101
1101
|
</div>
|
|
1102
|
-
<div class="pf-
|
|
1103
|
-
<div class="pf-
|
|
1104
|
-
class="pf-
|
|
1102
|
+
<div class="pf-v6-c-form__group">
|
|
1103
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1104
|
+
class="pf-v6-c-form__label"
|
|
1105
1105
|
for="wizard-expandable-expanded-form-field3"
|
|
1106
1106
|
>
|
|
1107
|
-
<span class="pf-
|
|
1108
|
-
class="pf-
|
|
1107
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
1108
|
+
class="pf-v6-c-form__label-required"
|
|
1109
1109
|
aria-hidden="true"
|
|
1110
1110
|
>*</span></label>
|
|
1111
1111
|
</div>
|
|
1112
|
-
<div class="pf-
|
|
1113
|
-
<span class="pf-
|
|
1112
|
+
<div class="pf-v6-c-form__group-control">
|
|
1113
|
+
<span class="pf-v6-c-form-control">
|
|
1114
1114
|
<input
|
|
1115
1115
|
type="text"
|
|
1116
1116
|
id="wizard-expandable-expanded-form-field3"
|
|
@@ -1119,18 +1119,18 @@ wrapperTag: div
|
|
|
1119
1119
|
</span>
|
|
1120
1120
|
</div>
|
|
1121
1121
|
</div>
|
|
1122
|
-
<div class="pf-
|
|
1123
|
-
<div class="pf-
|
|
1124
|
-
class="pf-
|
|
1122
|
+
<div class="pf-v6-c-form__group">
|
|
1123
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1124
|
+
class="pf-v6-c-form__label"
|
|
1125
1125
|
for="wizard-expandable-expanded-form-field4"
|
|
1126
1126
|
>
|
|
1127
|
-
<span class="pf-
|
|
1128
|
-
class="pf-
|
|
1127
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
1128
|
+
class="pf-v6-c-form__label-required"
|
|
1129
1129
|
aria-hidden="true"
|
|
1130
1130
|
>*</span></label>
|
|
1131
1131
|
</div>
|
|
1132
|
-
<div class="pf-
|
|
1133
|
-
<span class="pf-
|
|
1132
|
+
<div class="pf-v6-c-form__group-control">
|
|
1133
|
+
<span class="pf-v6-c-form-control">
|
|
1134
1134
|
<input
|
|
1135
1135
|
type="text"
|
|
1136
1136
|
id="wizard-expandable-expanded-form-field4"
|
|
@@ -1139,18 +1139,18 @@ wrapperTag: div
|
|
|
1139
1139
|
</span>
|
|
1140
1140
|
</div>
|
|
1141
1141
|
</div>
|
|
1142
|
-
<div class="pf-
|
|
1143
|
-
<div class="pf-
|
|
1144
|
-
class="pf-
|
|
1142
|
+
<div class="pf-v6-c-form__group">
|
|
1143
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1144
|
+
class="pf-v6-c-form__label"
|
|
1145
1145
|
for="wizard-expandable-expanded-form-field5"
|
|
1146
1146
|
>
|
|
1147
|
-
<span class="pf-
|
|
1148
|
-
class="pf-
|
|
1147
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
1148
|
+
class="pf-v6-c-form__label-required"
|
|
1149
1149
|
aria-hidden="true"
|
|
1150
1150
|
>*</span></label>
|
|
1151
1151
|
</div>
|
|
1152
|
-
<div class="pf-
|
|
1153
|
-
<span class="pf-
|
|
1152
|
+
<div class="pf-v6-c-form__group-control">
|
|
1153
|
+
<span class="pf-v6-c-form-control">
|
|
1154
1154
|
<input
|
|
1155
1155
|
type="text"
|
|
1156
1156
|
id="wizard-expandable-expanded-form-field5"
|
|
@@ -1159,18 +1159,18 @@ wrapperTag: div
|
|
|
1159
1159
|
</span>
|
|
1160
1160
|
</div>
|
|
1161
1161
|
</div>
|
|
1162
|
-
<div class="pf-
|
|
1163
|
-
<div class="pf-
|
|
1164
|
-
class="pf-
|
|
1162
|
+
<div class="pf-v6-c-form__group">
|
|
1163
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1164
|
+
class="pf-v6-c-form__label"
|
|
1165
1165
|
for="wizard-expandable-expanded-form-field6"
|
|
1166
1166
|
>
|
|
1167
|
-
<span class="pf-
|
|
1168
|
-
class="pf-
|
|
1167
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
1168
|
+
class="pf-v6-c-form__label-required"
|
|
1169
1169
|
aria-hidden="true"
|
|
1170
1170
|
>*</span></label>
|
|
1171
1171
|
</div>
|
|
1172
|
-
<div class="pf-
|
|
1173
|
-
<span class="pf-
|
|
1172
|
+
<div class="pf-v6-c-form__group-control">
|
|
1173
|
+
<span class="pf-v6-c-form-control">
|
|
1174
1174
|
<input
|
|
1175
1175
|
type="text"
|
|
1176
1176
|
id="wizard-expandable-expanded-form-field6"
|
|
@@ -1179,18 +1179,18 @@ wrapperTag: div
|
|
|
1179
1179
|
</span>
|
|
1180
1180
|
</div>
|
|
1181
1181
|
</div>
|
|
1182
|
-
<div class="pf-
|
|
1183
|
-
<div class="pf-
|
|
1184
|
-
class="pf-
|
|
1182
|
+
<div class="pf-v6-c-form__group">
|
|
1183
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
1184
|
+
class="pf-v6-c-form__label"
|
|
1185
1185
|
for="wizard-expandable-expanded-form-field7"
|
|
1186
1186
|
>
|
|
1187
|
-
<span class="pf-
|
|
1188
|
-
class="pf-
|
|
1187
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
1188
|
+
class="pf-v6-c-form__label-required"
|
|
1189
1189
|
aria-hidden="true"
|
|
1190
1190
|
>*</span></label>
|
|
1191
1191
|
</div>
|
|
1192
|
-
<div class="pf-
|
|
1193
|
-
<span class="pf-
|
|
1192
|
+
<div class="pf-v6-c-form__group-control">
|
|
1193
|
+
<span class="pf-v6-c-form-control">
|
|
1194
1194
|
<input
|
|
1195
1195
|
type="text"
|
|
1196
1196
|
id="wizard-expandable-expanded-form-field7"
|
|
@@ -1203,11 +1203,11 @@ wrapperTag: div
|
|
|
1203
1203
|
</div>
|
|
1204
1204
|
</main>
|
|
1205
1205
|
</div>
|
|
1206
|
-
<footer class="pf-
|
|
1207
|
-
<button class="pf-
|
|
1208
|
-
<button class="pf-
|
|
1209
|
-
<div class="pf-
|
|
1210
|
-
<button class="pf-
|
|
1206
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
1207
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
1208
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
1209
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
1210
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
1211
1211
|
</div>
|
|
1212
1212
|
</footer>
|
|
1213
1213
|
</div>
|
|
@@ -1218,98 +1218,98 @@ wrapperTag: div
|
|
|
1218
1218
|
### Finished
|
|
1219
1219
|
|
|
1220
1220
|
```html isFullscreen
|
|
1221
|
-
<div class="pf-
|
|
1222
|
-
<div class="pf-
|
|
1223
|
-
<div class="pf-
|
|
1221
|
+
<div class="pf-v6-c-wizard pf-m-finished">
|
|
1222
|
+
<div class="pf-v6-c-wizard__header">
|
|
1223
|
+
<div class="pf-v6-c-wizard__close">
|
|
1224
1224
|
<button
|
|
1225
|
-
class="pf-
|
|
1225
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1226
1226
|
type="button"
|
|
1227
1227
|
aria-label="Close"
|
|
1228
1228
|
>
|
|
1229
1229
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1230
1230
|
</button>
|
|
1231
1231
|
</div>
|
|
1232
|
-
<div class="pf-
|
|
1233
|
-
<h1 class="pf-
|
|
1232
|
+
<div class="pf-v6-c-wizard__title">
|
|
1233
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
1234
1234
|
</div>
|
|
1235
|
-
<div class="pf-
|
|
1235
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
1236
1236
|
</div>
|
|
1237
1237
|
<button
|
|
1238
1238
|
aria-label="Wizard Header Toggle"
|
|
1239
|
-
class="pf-
|
|
1239
|
+
class="pf-v6-c-wizard__toggle"
|
|
1240
1240
|
aria-expanded="false"
|
|
1241
1241
|
>
|
|
1242
|
-
<span class="pf-
|
|
1243
|
-
<span class="pf-
|
|
1244
|
-
<span class="pf-
|
|
1242
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
1243
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
1244
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
1245
1245
|
Configuration
|
|
1246
1246
|
<i
|
|
1247
|
-
class="fas fa-angle-right pf-
|
|
1247
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
1248
1248
|
aria-hidden="true"
|
|
1249
1249
|
></i>
|
|
1250
1250
|
</span>
|
|
1251
|
-
<span class="pf-
|
|
1251
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
1252
1252
|
</span>
|
|
1253
|
-
<span class="pf-
|
|
1253
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
1254
1254
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1255
1255
|
</span>
|
|
1256
1256
|
</button>
|
|
1257
|
-
<div class="pf-
|
|
1258
|
-
<div class="pf-
|
|
1259
|
-
<nav class="pf-
|
|
1260
|
-
<ol class="pf-
|
|
1261
|
-
<li class="pf-
|
|
1262
|
-
<button class="pf-
|
|
1257
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
1258
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
1259
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
1260
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
1261
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1262
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
|
|
1263
1263
|
</li>
|
|
1264
|
-
<li class="pf-
|
|
1265
|
-
<button class="pf-
|
|
1266
|
-
<ol class="pf-
|
|
1267
|
-
<li class="pf-
|
|
1268
|
-
<button class="pf-
|
|
1264
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1265
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Configuration</button>
|
|
1266
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
1267
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1268
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
|
|
1269
1269
|
</li>
|
|
1270
|
-
<li class="pf-
|
|
1271
|
-
<button class="pf-
|
|
1270
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1271
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
|
|
1272
1272
|
</li>
|
|
1273
|
-
<li class="pf-
|
|
1274
|
-
<button class="pf-
|
|
1273
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1274
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
|
|
1275
1275
|
</li>
|
|
1276
1276
|
</ol>
|
|
1277
1277
|
</li>
|
|
1278
|
-
<li class="pf-
|
|
1279
|
-
<button class="pf-
|
|
1278
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1279
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
|
|
1280
1280
|
</li>
|
|
1281
|
-
<li class="pf-
|
|
1282
|
-
<button class="pf-
|
|
1281
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
1282
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">Review</button>
|
|
1283
1283
|
</li>
|
|
1284
1284
|
</ol>
|
|
1285
1285
|
</nav>
|
|
1286
|
-
<main class="pf-
|
|
1287
|
-
<div class="pf-
|
|
1288
|
-
<div class="pf-
|
|
1289
|
-
<div class="pf-
|
|
1290
|
-
<div class="pf-
|
|
1291
|
-
<div class="pf-
|
|
1286
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
1287
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
1288
|
+
<div class="pf-v6-l-bullseye">
|
|
1289
|
+
<div class="pf-v6-c-empty-state pf-m-lg">
|
|
1290
|
+
<div class="pf-v6-c-empty-state__content">
|
|
1291
|
+
<div class="pf-v6-c-empty-state__icon">
|
|
1292
1292
|
<i class="fas fa- fa-cogs" aria-hidden="true"></i>
|
|
1293
1293
|
</div>
|
|
1294
1294
|
|
|
1295
1295
|
<div
|
|
1296
|
-
class="pf-
|
|
1296
|
+
class="pf-v6-c-empty-state__title"
|
|
1297
1297
|
id="wizard-finished-empty-state-title"
|
|
1298
1298
|
>
|
|
1299
1299
|
<h1
|
|
1300
|
-
class="pf-
|
|
1300
|
+
class="pf-v6-c-empty-state__title-text"
|
|
1301
1301
|
>Validating credentials</h1>
|
|
1302
1302
|
</div>
|
|
1303
|
-
<div class="pf-
|
|
1303
|
+
<div class="pf-v6-c-empty-state__body">
|
|
1304
1304
|
<div
|
|
1305
|
-
class="pf-
|
|
1305
|
+
class="pf-v6-c-progress pf-m-singleline"
|
|
1306
1306
|
id="progress-singleline-example"
|
|
1307
1307
|
>
|
|
1308
|
-
<div class="pf-
|
|
1309
|
-
<span class="pf-
|
|
1308
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
1309
|
+
<span class="pf-v6-c-progress__measure">33%</span>
|
|
1310
1310
|
</div>
|
|
1311
1311
|
<div
|
|
1312
|
-
class="pf-
|
|
1312
|
+
class="pf-v6-c-progress__bar"
|
|
1313
1313
|
role="progressbar"
|
|
1314
1314
|
aria-valuemin="0"
|
|
1315
1315
|
aria-valuemax="100"
|
|
@@ -1318,27 +1318,27 @@ wrapperTag: div
|
|
|
1318
1318
|
aria-label="Progress status"
|
|
1319
1319
|
>
|
|
1320
1320
|
<div
|
|
1321
|
-
class="pf-
|
|
1321
|
+
class="pf-v6-c-progress__indicator"
|
|
1322
1322
|
style="width:33%;"
|
|
1323
1323
|
></div>
|
|
1324
1324
|
</div>
|
|
1325
1325
|
</div>
|
|
1326
1326
|
</div>
|
|
1327
1327
|
<div
|
|
1328
|
-
class="pf-
|
|
1328
|
+
class="pf-v6-c-empty-state__body"
|
|
1329
1329
|
>Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
|
|
1330
|
-
<button class="pf-
|
|
1330
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
1331
1331
|
</div>
|
|
1332
1332
|
</div>
|
|
1333
1333
|
</div>
|
|
1334
1334
|
</div>
|
|
1335
1335
|
</main>
|
|
1336
1336
|
</div>
|
|
1337
|
-
<footer class="pf-
|
|
1338
|
-
<button class="pf-
|
|
1339
|
-
<button class="pf-
|
|
1340
|
-
<div class="pf-
|
|
1341
|
-
<button class="pf-
|
|
1337
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
1338
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
|
|
1339
|
+
<button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
|
|
1340
|
+
<div class="pf-v6-c-wizard__footer-cancel">
|
|
1341
|
+
<button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
|
|
1342
1342
|
</div>
|
|
1343
1343
|
</footer>
|
|
1344
1344
|
</div>
|