@patternfly/patternfly 6.0.0-alpha.179 → 6.0.0-alpha.180
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/components/Wizard/wizard.css +13 -6
- package/components/Wizard/wizard.scss +17 -6
- package/components/_index.css +13 -6
- package/docs/components/Wizard/examples/Wizard.md +625 -42
- package/package.json +1 -1
- package/patternfly-no-globals.css +13 -6
- package/patternfly.css +13 -6
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1769,7 +1769,7 @@ wrapperTag: div
|
|
|
1769
1769
|
<div class="pf-v6-c-form__group">
|
|
1770
1770
|
<div class="pf-v6-c-form__group-label"><label
|
|
1771
1771
|
class="pf-v6-c-form__label"
|
|
1772
|
-
for="wizard-error-on-step-form-field1"
|
|
1772
|
+
for="wizard-error-on-step-example-form-field1"
|
|
1773
1773
|
>
|
|
1774
1774
|
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
1775
1775
|
class="pf-v6-c-form__label-required"
|
|
@@ -1780,8 +1780,8 @@ wrapperTag: div
|
|
|
1780
1780
|
<span class="pf-v6-c-form-control">
|
|
1781
1781
|
<input
|
|
1782
1782
|
type="text"
|
|
1783
|
-
id="wizard-error-on-step-form-field1"
|
|
1784
|
-
name="wizard-error-on-step-form-field1"
|
|
1783
|
+
id="wizard-error-on-step-example-form-field1"
|
|
1784
|
+
name="wizard-error-on-step-example-form-field1"
|
|
1785
1785
|
/>
|
|
1786
1786
|
</span>
|
|
1787
1787
|
</div>
|
|
@@ -1789,7 +1789,7 @@ wrapperTag: div
|
|
|
1789
1789
|
<div class="pf-v6-c-form__group">
|
|
1790
1790
|
<div class="pf-v6-c-form__group-label"><label
|
|
1791
1791
|
class="pf-v6-c-form__label"
|
|
1792
|
-
for="wizard-error-on-step-form-field2"
|
|
1792
|
+
for="wizard-error-on-step-example-form-field2"
|
|
1793
1793
|
>
|
|
1794
1794
|
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
1795
1795
|
class="pf-v6-c-form__label-required"
|
|
@@ -1800,8 +1800,8 @@ wrapperTag: div
|
|
|
1800
1800
|
<span class="pf-v6-c-form-control">
|
|
1801
1801
|
<input
|
|
1802
1802
|
type="text"
|
|
1803
|
-
id="wizard-error-on-step-form-field2"
|
|
1804
|
-
name="wizard-error-on-step-form-field2"
|
|
1803
|
+
id="wizard-error-on-step-example-form-field2"
|
|
1804
|
+
name="wizard-error-on-step-example-form-field2"
|
|
1805
1805
|
/>
|
|
1806
1806
|
</span>
|
|
1807
1807
|
</div>
|
|
@@ -1809,7 +1809,7 @@ wrapperTag: div
|
|
|
1809
1809
|
<div class="pf-v6-c-form__group">
|
|
1810
1810
|
<div class="pf-v6-c-form__group-label"><label
|
|
1811
1811
|
class="pf-v6-c-form__label"
|
|
1812
|
-
for="wizard-error-on-step-form-field3"
|
|
1812
|
+
for="wizard-error-on-step-example-form-field3"
|
|
1813
1813
|
>
|
|
1814
1814
|
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
1815
1815
|
class="pf-v6-c-form__label-required"
|
|
@@ -1820,8 +1820,8 @@ wrapperTag: div
|
|
|
1820
1820
|
<span class="pf-v6-c-form-control">
|
|
1821
1821
|
<input
|
|
1822
1822
|
type="text"
|
|
1823
|
-
id="wizard-error-on-step-form-field3"
|
|
1824
|
-
name="wizard-error-on-step-form-field3"
|
|
1823
|
+
id="wizard-error-on-step-example-form-field3"
|
|
1824
|
+
name="wizard-error-on-step-example-form-field3"
|
|
1825
1825
|
/>
|
|
1826
1826
|
</span>
|
|
1827
1827
|
</div>
|
|
@@ -1829,7 +1829,7 @@ wrapperTag: div
|
|
|
1829
1829
|
<div class="pf-v6-c-form__group">
|
|
1830
1830
|
<div class="pf-v6-c-form__group-label"><label
|
|
1831
1831
|
class="pf-v6-c-form__label"
|
|
1832
|
-
for="wizard-error-on-step-form-field4"
|
|
1832
|
+
for="wizard-error-on-step-example-form-field4"
|
|
1833
1833
|
>
|
|
1834
1834
|
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
1835
1835
|
class="pf-v6-c-form__label-required"
|
|
@@ -1840,8 +1840,8 @@ wrapperTag: div
|
|
|
1840
1840
|
<span class="pf-v6-c-form-control">
|
|
1841
1841
|
<input
|
|
1842
1842
|
type="text"
|
|
1843
|
-
id="wizard-error-on-step-form-field4"
|
|
1844
|
-
name="wizard-error-on-step-form-field4"
|
|
1843
|
+
id="wizard-error-on-step-example-form-field4"
|
|
1844
|
+
name="wizard-error-on-step-example-form-field4"
|
|
1845
1845
|
/>
|
|
1846
1846
|
</span>
|
|
1847
1847
|
</div>
|
|
@@ -1849,7 +1849,7 @@ wrapperTag: div
|
|
|
1849
1849
|
<div class="pf-v6-c-form__group">
|
|
1850
1850
|
<div class="pf-v6-c-form__group-label"><label
|
|
1851
1851
|
class="pf-v6-c-form__label"
|
|
1852
|
-
for="wizard-error-on-step-form-field5"
|
|
1852
|
+
for="wizard-error-on-step-example-form-field5"
|
|
1853
1853
|
>
|
|
1854
1854
|
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
1855
1855
|
class="pf-v6-c-form__label-required"
|
|
@@ -1860,8 +1860,8 @@ wrapperTag: div
|
|
|
1860
1860
|
<span class="pf-v6-c-form-control">
|
|
1861
1861
|
<input
|
|
1862
1862
|
type="text"
|
|
1863
|
-
id="wizard-error-on-step-form-field5"
|
|
1864
|
-
name="wizard-error-on-step-form-field5"
|
|
1863
|
+
id="wizard-error-on-step-example-form-field5"
|
|
1864
|
+
name="wizard-error-on-step-example-form-field5"
|
|
1865
1865
|
/>
|
|
1866
1866
|
</span>
|
|
1867
1867
|
</div>
|
|
@@ -1869,7 +1869,7 @@ wrapperTag: div
|
|
|
1869
1869
|
<div class="pf-v6-c-form__group">
|
|
1870
1870
|
<div class="pf-v6-c-form__group-label"><label
|
|
1871
1871
|
class="pf-v6-c-form__label"
|
|
1872
|
-
for="wizard-error-on-step-form-field6"
|
|
1872
|
+
for="wizard-error-on-step-example-form-field6"
|
|
1873
1873
|
>
|
|
1874
1874
|
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
1875
1875
|
class="pf-v6-c-form__label-required"
|
|
@@ -1880,8 +1880,8 @@ wrapperTag: div
|
|
|
1880
1880
|
<span class="pf-v6-c-form-control">
|
|
1881
1881
|
<input
|
|
1882
1882
|
type="text"
|
|
1883
|
-
id="wizard-error-on-step-form-field6"
|
|
1884
|
-
name="wizard-error-on-step-form-field6"
|
|
1883
|
+
id="wizard-error-on-step-example-form-field6"
|
|
1884
|
+
name="wizard-error-on-step-example-form-field6"
|
|
1885
1885
|
/>
|
|
1886
1886
|
</span>
|
|
1887
1887
|
</div>
|
|
@@ -1889,7 +1889,7 @@ wrapperTag: div
|
|
|
1889
1889
|
<div class="pf-v6-c-form__group">
|
|
1890
1890
|
<div class="pf-v6-c-form__group-label"><label
|
|
1891
1891
|
class="pf-v6-c-form__label"
|
|
1892
|
-
for="wizard-error-on-step-form-field7"
|
|
1892
|
+
for="wizard-error-on-step-example-form-field7"
|
|
1893
1893
|
>
|
|
1894
1894
|
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
1895
1895
|
class="pf-v6-c-form__label-required"
|
|
@@ -1900,8 +1900,8 @@ wrapperTag: div
|
|
|
1900
1900
|
<span class="pf-v6-c-form-control">
|
|
1901
1901
|
<input
|
|
1902
1902
|
type="text"
|
|
1903
|
-
id="wizard-error-on-step-form-field7"
|
|
1904
|
-
name="wizard-error-on-step-form-field7"
|
|
1903
|
+
id="wizard-error-on-step-example-form-field7"
|
|
1904
|
+
name="wizard-error-on-step-example-form-field7"
|
|
1905
1905
|
/>
|
|
1906
1906
|
</span>
|
|
1907
1907
|
</div>
|
|
@@ -2060,7 +2060,7 @@ wrapperTag: div
|
|
|
2060
2060
|
<div class="pf-v6-c-form__group">
|
|
2061
2061
|
<div class="pf-v6-c-form__group-label"><label
|
|
2062
2062
|
class="pf-v6-c-form__label"
|
|
2063
|
-
for="wizard-nav-expanded-
|
|
2063
|
+
for="wizard-error-on-step-nav-expanded-example-form-field1"
|
|
2064
2064
|
>
|
|
2065
2065
|
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
2066
2066
|
class="pf-v6-c-form__label-required"
|
|
@@ -2071,8 +2071,8 @@ wrapperTag: div
|
|
|
2071
2071
|
<span class="pf-v6-c-form-control">
|
|
2072
2072
|
<input
|
|
2073
2073
|
type="text"
|
|
2074
|
-
id="wizard-nav-expanded-
|
|
2075
|
-
name="wizard-nav-expanded-
|
|
2074
|
+
id="wizard-error-on-step-nav-expanded-example-form-field1"
|
|
2075
|
+
name="wizard-error-on-step-nav-expanded-example-form-field1"
|
|
2076
2076
|
/>
|
|
2077
2077
|
</span>
|
|
2078
2078
|
</div>
|
|
@@ -2080,7 +2080,7 @@ wrapperTag: div
|
|
|
2080
2080
|
<div class="pf-v6-c-form__group">
|
|
2081
2081
|
<div class="pf-v6-c-form__group-label"><label
|
|
2082
2082
|
class="pf-v6-c-form__label"
|
|
2083
|
-
for="wizard-nav-expanded-
|
|
2083
|
+
for="wizard-error-on-step-nav-expanded-example-form-field2"
|
|
2084
2084
|
>
|
|
2085
2085
|
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
2086
2086
|
class="pf-v6-c-form__label-required"
|
|
@@ -2091,8 +2091,8 @@ wrapperTag: div
|
|
|
2091
2091
|
<span class="pf-v6-c-form-control">
|
|
2092
2092
|
<input
|
|
2093
2093
|
type="text"
|
|
2094
|
-
id="wizard-nav-expanded-
|
|
2095
|
-
name="wizard-nav-expanded-
|
|
2094
|
+
id="wizard-error-on-step-nav-expanded-example-form-field2"
|
|
2095
|
+
name="wizard-error-on-step-nav-expanded-example-form-field2"
|
|
2096
2096
|
/>
|
|
2097
2097
|
</span>
|
|
2098
2098
|
</div>
|
|
@@ -2100,7 +2100,7 @@ wrapperTag: div
|
|
|
2100
2100
|
<div class="pf-v6-c-form__group">
|
|
2101
2101
|
<div class="pf-v6-c-form__group-label"><label
|
|
2102
2102
|
class="pf-v6-c-form__label"
|
|
2103
|
-
for="wizard-nav-expanded-
|
|
2103
|
+
for="wizard-error-on-step-nav-expanded-example-form-field3"
|
|
2104
2104
|
>
|
|
2105
2105
|
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
2106
2106
|
class="pf-v6-c-form__label-required"
|
|
@@ -2111,8 +2111,8 @@ wrapperTag: div
|
|
|
2111
2111
|
<span class="pf-v6-c-form-control">
|
|
2112
2112
|
<input
|
|
2113
2113
|
type="text"
|
|
2114
|
-
id="wizard-nav-expanded-
|
|
2115
|
-
name="wizard-nav-expanded-
|
|
2114
|
+
id="wizard-error-on-step-nav-expanded-example-form-field3"
|
|
2115
|
+
name="wizard-error-on-step-nav-expanded-example-form-field3"
|
|
2116
2116
|
/>
|
|
2117
2117
|
</span>
|
|
2118
2118
|
</div>
|
|
@@ -2120,7 +2120,7 @@ wrapperTag: div
|
|
|
2120
2120
|
<div class="pf-v6-c-form__group">
|
|
2121
2121
|
<div class="pf-v6-c-form__group-label"><label
|
|
2122
2122
|
class="pf-v6-c-form__label"
|
|
2123
|
-
for="wizard-nav-expanded-
|
|
2123
|
+
for="wizard-error-on-step-nav-expanded-example-form-field4"
|
|
2124
2124
|
>
|
|
2125
2125
|
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
2126
2126
|
class="pf-v6-c-form__label-required"
|
|
@@ -2131,8 +2131,8 @@ wrapperTag: div
|
|
|
2131
2131
|
<span class="pf-v6-c-form-control">
|
|
2132
2132
|
<input
|
|
2133
2133
|
type="text"
|
|
2134
|
-
id="wizard-nav-expanded-
|
|
2135
|
-
name="wizard-nav-expanded-
|
|
2134
|
+
id="wizard-error-on-step-nav-expanded-example-form-field4"
|
|
2135
|
+
name="wizard-error-on-step-nav-expanded-example-form-field4"
|
|
2136
2136
|
/>
|
|
2137
2137
|
</span>
|
|
2138
2138
|
</div>
|
|
@@ -2140,7 +2140,7 @@ wrapperTag: div
|
|
|
2140
2140
|
<div class="pf-v6-c-form__group">
|
|
2141
2141
|
<div class="pf-v6-c-form__group-label"><label
|
|
2142
2142
|
class="pf-v6-c-form__label"
|
|
2143
|
-
for="wizard-nav-expanded-
|
|
2143
|
+
for="wizard-error-on-step-nav-expanded-example-form-field5"
|
|
2144
2144
|
>
|
|
2145
2145
|
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
2146
2146
|
class="pf-v6-c-form__label-required"
|
|
@@ -2151,8 +2151,8 @@ wrapperTag: div
|
|
|
2151
2151
|
<span class="pf-v6-c-form-control">
|
|
2152
2152
|
<input
|
|
2153
2153
|
type="text"
|
|
2154
|
-
id="wizard-nav-expanded-
|
|
2155
|
-
name="wizard-nav-expanded-
|
|
2154
|
+
id="wizard-error-on-step-nav-expanded-example-form-field5"
|
|
2155
|
+
name="wizard-error-on-step-nav-expanded-example-form-field5"
|
|
2156
2156
|
/>
|
|
2157
2157
|
</span>
|
|
2158
2158
|
</div>
|
|
@@ -2160,7 +2160,7 @@ wrapperTag: div
|
|
|
2160
2160
|
<div class="pf-v6-c-form__group">
|
|
2161
2161
|
<div class="pf-v6-c-form__group-label"><label
|
|
2162
2162
|
class="pf-v6-c-form__label"
|
|
2163
|
-
for="wizard-nav-expanded-
|
|
2163
|
+
for="wizard-error-on-step-nav-expanded-example-form-field6"
|
|
2164
2164
|
>
|
|
2165
2165
|
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
2166
2166
|
class="pf-v6-c-form__label-required"
|
|
@@ -2171,8 +2171,8 @@ wrapperTag: div
|
|
|
2171
2171
|
<span class="pf-v6-c-form-control">
|
|
2172
2172
|
<input
|
|
2173
2173
|
type="text"
|
|
2174
|
-
id="wizard-nav-expanded-
|
|
2175
|
-
name="wizard-nav-expanded-
|
|
2174
|
+
id="wizard-error-on-step-nav-expanded-example-form-field6"
|
|
2175
|
+
name="wizard-error-on-step-nav-expanded-example-form-field6"
|
|
2176
2176
|
/>
|
|
2177
2177
|
</span>
|
|
2178
2178
|
</div>
|
|
@@ -2180,7 +2180,7 @@ wrapperTag: div
|
|
|
2180
2180
|
<div class="pf-v6-c-form__group">
|
|
2181
2181
|
<div class="pf-v6-c-form__group-label"><label
|
|
2182
2182
|
class="pf-v6-c-form__label"
|
|
2183
|
-
for="wizard-nav-expanded-
|
|
2183
|
+
for="wizard-error-on-step-nav-expanded-example-form-field7"
|
|
2184
2184
|
>
|
|
2185
2185
|
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
2186
2186
|
class="pf-v6-c-form__label-required"
|
|
@@ -2191,8 +2191,590 @@ wrapperTag: div
|
|
|
2191
2191
|
<span class="pf-v6-c-form-control">
|
|
2192
2192
|
<input
|
|
2193
2193
|
type="text"
|
|
2194
|
-
id="wizard-nav-expanded-
|
|
2195
|
-
name="wizard-nav-expanded-
|
|
2194
|
+
id="wizard-error-on-step-nav-expanded-example-form-field7"
|
|
2195
|
+
name="wizard-error-on-step-nav-expanded-example-form-field7"
|
|
2196
|
+
/>
|
|
2197
|
+
</span>
|
|
2198
|
+
</div>
|
|
2199
|
+
</div>
|
|
2200
|
+
</form>
|
|
2201
|
+
</div>
|
|
2202
|
+
</main>
|
|
2203
|
+
</div>
|
|
2204
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
2205
|
+
<div class="pf-v6-c-action-list">
|
|
2206
|
+
<div class="pf-v6-c-action-list__group">
|
|
2207
|
+
<div class="pf-v6-c-action-list__item">
|
|
2208
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">
|
|
2209
|
+
<span class="pf-v6-c-button__text">Back</span>
|
|
2210
|
+
</button>
|
|
2211
|
+
</div>
|
|
2212
|
+
<div class="pf-v6-c-action-list__item">
|
|
2213
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
2214
|
+
<span class="pf-v6-c-button__text">Next</span>
|
|
2215
|
+
</button>
|
|
2216
|
+
</div>
|
|
2217
|
+
</div>
|
|
2218
|
+
<div class="pf-v6-c-action-list__group">
|
|
2219
|
+
<div class="pf-v6-c-action-list__item">
|
|
2220
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
2221
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
2222
|
+
</button>
|
|
2223
|
+
</div>
|
|
2224
|
+
</div>
|
|
2225
|
+
</div>
|
|
2226
|
+
</footer>
|
|
2227
|
+
</div>
|
|
2228
|
+
</div>
|
|
2229
|
+
|
|
2230
|
+
```
|
|
2231
|
+
|
|
2232
|
+
### Success on step
|
|
2233
|
+
|
|
2234
|
+
```html isFullscreen
|
|
2235
|
+
<div class="pf-v6-c-wizard">
|
|
2236
|
+
<div class="pf-v6-c-wizard__header">
|
|
2237
|
+
<div class="pf-v6-c-wizard__close">
|
|
2238
|
+
<button
|
|
2239
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2240
|
+
type="button"
|
|
2241
|
+
aria-label="Close"
|
|
2242
|
+
>
|
|
2243
|
+
<span class="pf-v6-c-button__icon">
|
|
2244
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2245
|
+
</span>
|
|
2246
|
+
</button>
|
|
2247
|
+
</div>
|
|
2248
|
+
<div class="pf-v6-c-wizard__title">
|
|
2249
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
2250
|
+
</div>
|
|
2251
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
2252
|
+
</div>
|
|
2253
|
+
<button
|
|
2254
|
+
aria-label="Wizard Header Toggle"
|
|
2255
|
+
class="pf-v6-c-wizard__toggle"
|
|
2256
|
+
aria-expanded="false"
|
|
2257
|
+
>
|
|
2258
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
2259
|
+
<span class="pf-v6-c-wizard__toggle-list-item pf-m-success">
|
|
2260
|
+
<span class="pf-v6-c-wizard__toggle-status-icon">
|
|
2261
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
2262
|
+
</span>
|
|
2263
|
+
Configuration
|
|
2264
|
+
<i
|
|
2265
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
2266
|
+
aria-hidden="true"
|
|
2267
|
+
></i>
|
|
2268
|
+
</span>
|
|
2269
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
2270
|
+
</span>
|
|
2271
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
2272
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2273
|
+
</span>
|
|
2274
|
+
</button>
|
|
2275
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
2276
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
2277
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
2278
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
2279
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2280
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2281
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2282
|
+
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
|
|
2283
|
+
</span>
|
|
2284
|
+
</button>
|
|
2285
|
+
</li>
|
|
2286
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
2287
|
+
<button
|
|
2288
|
+
class="pf-v6-c-wizard__nav-link pf-m-success pf-m-current"
|
|
2289
|
+
type="button"
|
|
2290
|
+
aria-expanded="true"
|
|
2291
|
+
>
|
|
2292
|
+
<span class="pf-v6-c-wizard__nav-link-status-icon">
|
|
2293
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
2294
|
+
</span>
|
|
2295
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2296
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
2297
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
2298
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
2299
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2300
|
+
</span>
|
|
2301
|
+
</span>
|
|
2302
|
+
</span>
|
|
2303
|
+
</button>
|
|
2304
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
2305
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2306
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2307
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2308
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
|
|
2309
|
+
</span>
|
|
2310
|
+
</button>
|
|
2311
|
+
</li>
|
|
2312
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2313
|
+
<button
|
|
2314
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
2315
|
+
type="button"
|
|
2316
|
+
aria-current="page"
|
|
2317
|
+
>
|
|
2318
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2319
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
|
|
2320
|
+
</span>
|
|
2321
|
+
</button>
|
|
2322
|
+
</li>
|
|
2323
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2324
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2325
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2326
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
|
|
2327
|
+
</span>
|
|
2328
|
+
</button>
|
|
2329
|
+
</li>
|
|
2330
|
+
</ol>
|
|
2331
|
+
</li>
|
|
2332
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2333
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2334
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2335
|
+
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
|
|
2336
|
+
</span>
|
|
2337
|
+
</button>
|
|
2338
|
+
</li>
|
|
2339
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2340
|
+
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
|
|
2341
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2342
|
+
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
|
|
2343
|
+
</span>
|
|
2344
|
+
</button>
|
|
2345
|
+
</li>
|
|
2346
|
+
</ol>
|
|
2347
|
+
</nav>
|
|
2348
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
2349
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
2350
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
2351
|
+
<div class="pf-v6-c-form__group">
|
|
2352
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2353
|
+
class="pf-v6-c-form__label"
|
|
2354
|
+
for="wizard-success-on-step-example-form-field1"
|
|
2355
|
+
>
|
|
2356
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
2357
|
+
class="pf-v6-c-form__label-required"
|
|
2358
|
+
aria-hidden="true"
|
|
2359
|
+
>*</span></label>
|
|
2360
|
+
</div>
|
|
2361
|
+
<div class="pf-v6-c-form__group-control">
|
|
2362
|
+
<span class="pf-v6-c-form-control">
|
|
2363
|
+
<input
|
|
2364
|
+
type="text"
|
|
2365
|
+
id="wizard-success-on-step-example-form-field1"
|
|
2366
|
+
name="wizard-success-on-step-example-form-field1"
|
|
2367
|
+
/>
|
|
2368
|
+
</span>
|
|
2369
|
+
</div>
|
|
2370
|
+
</div>
|
|
2371
|
+
<div class="pf-v6-c-form__group">
|
|
2372
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2373
|
+
class="pf-v6-c-form__label"
|
|
2374
|
+
for="wizard-success-on-step-example-form-field2"
|
|
2375
|
+
>
|
|
2376
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
2377
|
+
class="pf-v6-c-form__label-required"
|
|
2378
|
+
aria-hidden="true"
|
|
2379
|
+
>*</span></label>
|
|
2380
|
+
</div>
|
|
2381
|
+
<div class="pf-v6-c-form__group-control">
|
|
2382
|
+
<span class="pf-v6-c-form-control">
|
|
2383
|
+
<input
|
|
2384
|
+
type="text"
|
|
2385
|
+
id="wizard-success-on-step-example-form-field2"
|
|
2386
|
+
name="wizard-success-on-step-example-form-field2"
|
|
2387
|
+
/>
|
|
2388
|
+
</span>
|
|
2389
|
+
</div>
|
|
2390
|
+
</div>
|
|
2391
|
+
<div class="pf-v6-c-form__group">
|
|
2392
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2393
|
+
class="pf-v6-c-form__label"
|
|
2394
|
+
for="wizard-success-on-step-example-form-field3"
|
|
2395
|
+
>
|
|
2396
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
2397
|
+
class="pf-v6-c-form__label-required"
|
|
2398
|
+
aria-hidden="true"
|
|
2399
|
+
>*</span></label>
|
|
2400
|
+
</div>
|
|
2401
|
+
<div class="pf-v6-c-form__group-control">
|
|
2402
|
+
<span class="pf-v6-c-form-control">
|
|
2403
|
+
<input
|
|
2404
|
+
type="text"
|
|
2405
|
+
id="wizard-success-on-step-example-form-field3"
|
|
2406
|
+
name="wizard-success-on-step-example-form-field3"
|
|
2407
|
+
/>
|
|
2408
|
+
</span>
|
|
2409
|
+
</div>
|
|
2410
|
+
</div>
|
|
2411
|
+
<div class="pf-v6-c-form__group">
|
|
2412
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2413
|
+
class="pf-v6-c-form__label"
|
|
2414
|
+
for="wizard-success-on-step-example-form-field4"
|
|
2415
|
+
>
|
|
2416
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
2417
|
+
class="pf-v6-c-form__label-required"
|
|
2418
|
+
aria-hidden="true"
|
|
2419
|
+
>*</span></label>
|
|
2420
|
+
</div>
|
|
2421
|
+
<div class="pf-v6-c-form__group-control">
|
|
2422
|
+
<span class="pf-v6-c-form-control">
|
|
2423
|
+
<input
|
|
2424
|
+
type="text"
|
|
2425
|
+
id="wizard-success-on-step-example-form-field4"
|
|
2426
|
+
name="wizard-success-on-step-example-form-field4"
|
|
2427
|
+
/>
|
|
2428
|
+
</span>
|
|
2429
|
+
</div>
|
|
2430
|
+
</div>
|
|
2431
|
+
<div class="pf-v6-c-form__group">
|
|
2432
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2433
|
+
class="pf-v6-c-form__label"
|
|
2434
|
+
for="wizard-success-on-step-example-form-field5"
|
|
2435
|
+
>
|
|
2436
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
2437
|
+
class="pf-v6-c-form__label-required"
|
|
2438
|
+
aria-hidden="true"
|
|
2439
|
+
>*</span></label>
|
|
2440
|
+
</div>
|
|
2441
|
+
<div class="pf-v6-c-form__group-control">
|
|
2442
|
+
<span class="pf-v6-c-form-control">
|
|
2443
|
+
<input
|
|
2444
|
+
type="text"
|
|
2445
|
+
id="wizard-success-on-step-example-form-field5"
|
|
2446
|
+
name="wizard-success-on-step-example-form-field5"
|
|
2447
|
+
/>
|
|
2448
|
+
</span>
|
|
2449
|
+
</div>
|
|
2450
|
+
</div>
|
|
2451
|
+
<div class="pf-v6-c-form__group">
|
|
2452
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2453
|
+
class="pf-v6-c-form__label"
|
|
2454
|
+
for="wizard-success-on-step-example-form-field6"
|
|
2455
|
+
>
|
|
2456
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
2457
|
+
class="pf-v6-c-form__label-required"
|
|
2458
|
+
aria-hidden="true"
|
|
2459
|
+
>*</span></label>
|
|
2460
|
+
</div>
|
|
2461
|
+
<div class="pf-v6-c-form__group-control">
|
|
2462
|
+
<span class="pf-v6-c-form-control">
|
|
2463
|
+
<input
|
|
2464
|
+
type="text"
|
|
2465
|
+
id="wizard-success-on-step-example-form-field6"
|
|
2466
|
+
name="wizard-success-on-step-example-form-field6"
|
|
2467
|
+
/>
|
|
2468
|
+
</span>
|
|
2469
|
+
</div>
|
|
2470
|
+
</div>
|
|
2471
|
+
<div class="pf-v6-c-form__group">
|
|
2472
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2473
|
+
class="pf-v6-c-form__label"
|
|
2474
|
+
for="wizard-success-on-step-example-form-field7"
|
|
2475
|
+
>
|
|
2476
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
2477
|
+
class="pf-v6-c-form__label-required"
|
|
2478
|
+
aria-hidden="true"
|
|
2479
|
+
>*</span></label>
|
|
2480
|
+
</div>
|
|
2481
|
+
<div class="pf-v6-c-form__group-control">
|
|
2482
|
+
<span class="pf-v6-c-form-control">
|
|
2483
|
+
<input
|
|
2484
|
+
type="text"
|
|
2485
|
+
id="wizard-success-on-step-example-form-field7"
|
|
2486
|
+
name="wizard-success-on-step-example-form-field7"
|
|
2487
|
+
/>
|
|
2488
|
+
</span>
|
|
2489
|
+
</div>
|
|
2490
|
+
</div>
|
|
2491
|
+
</form>
|
|
2492
|
+
</div>
|
|
2493
|
+
</main>
|
|
2494
|
+
</div>
|
|
2495
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
2496
|
+
<div class="pf-v6-c-action-list">
|
|
2497
|
+
<div class="pf-v6-c-action-list__group">
|
|
2498
|
+
<div class="pf-v6-c-action-list__item">
|
|
2499
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">
|
|
2500
|
+
<span class="pf-v6-c-button__text">Back</span>
|
|
2501
|
+
</button>
|
|
2502
|
+
</div>
|
|
2503
|
+
<div class="pf-v6-c-action-list__item">
|
|
2504
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
2505
|
+
<span class="pf-v6-c-button__text">Next</span>
|
|
2506
|
+
</button>
|
|
2507
|
+
</div>
|
|
2508
|
+
</div>
|
|
2509
|
+
<div class="pf-v6-c-action-list__group">
|
|
2510
|
+
<div class="pf-v6-c-action-list__item">
|
|
2511
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
2512
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
2513
|
+
</button>
|
|
2514
|
+
</div>
|
|
2515
|
+
</div>
|
|
2516
|
+
</div>
|
|
2517
|
+
</footer>
|
|
2518
|
+
</div>
|
|
2519
|
+
</div>
|
|
2520
|
+
|
|
2521
|
+
```
|
|
2522
|
+
|
|
2523
|
+
### Nav expanded with success (mobile)
|
|
2524
|
+
|
|
2525
|
+
```html isFullscreen
|
|
2526
|
+
<div class="pf-v6-c-wizard">
|
|
2527
|
+
<div class="pf-v6-c-wizard__header">
|
|
2528
|
+
<div class="pf-v6-c-wizard__close">
|
|
2529
|
+
<button
|
|
2530
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2531
|
+
type="button"
|
|
2532
|
+
aria-label="Close"
|
|
2533
|
+
>
|
|
2534
|
+
<span class="pf-v6-c-button__icon">
|
|
2535
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
2536
|
+
</span>
|
|
2537
|
+
</button>
|
|
2538
|
+
</div>
|
|
2539
|
+
<div class="pf-v6-c-wizard__title">
|
|
2540
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
2541
|
+
</div>
|
|
2542
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
2543
|
+
</div>
|
|
2544
|
+
<button
|
|
2545
|
+
aria-label="Wizard Header Toggle"
|
|
2546
|
+
class="pf-v6-c-wizard__toggle pf-m-expanded"
|
|
2547
|
+
aria-expanded="true"
|
|
2548
|
+
>
|
|
2549
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
2550
|
+
<span class="pf-v6-c-wizard__toggle-list-item pf-m-success">
|
|
2551
|
+
<span class="pf-v6-c-wizard__toggle-status-icon">
|
|
2552
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
2553
|
+
</span>
|
|
2554
|
+
Configuration
|
|
2555
|
+
<i
|
|
2556
|
+
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
|
|
2557
|
+
aria-hidden="true"
|
|
2558
|
+
></i>
|
|
2559
|
+
</span>
|
|
2560
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
2561
|
+
</span>
|
|
2562
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
2563
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2564
|
+
</span>
|
|
2565
|
+
</button>
|
|
2566
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
2567
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
2568
|
+
<nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
|
|
2569
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
2570
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2571
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2572
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2573
|
+
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
|
|
2574
|
+
</span>
|
|
2575
|
+
</button>
|
|
2576
|
+
</li>
|
|
2577
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
2578
|
+
<button
|
|
2579
|
+
class="pf-v6-c-wizard__nav-link pf-m-success pf-m-current"
|
|
2580
|
+
type="button"
|
|
2581
|
+
aria-expanded="true"
|
|
2582
|
+
>
|
|
2583
|
+
<span class="pf-v6-c-wizard__nav-link-status-icon">
|
|
2584
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
2585
|
+
</span>
|
|
2586
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2587
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
2588
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
2589
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
2590
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2591
|
+
</span>
|
|
2592
|
+
</span>
|
|
2593
|
+
</span>
|
|
2594
|
+
</button>
|
|
2595
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
2596
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2597
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2598
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2599
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
|
|
2600
|
+
</span>
|
|
2601
|
+
</button>
|
|
2602
|
+
</li>
|
|
2603
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2604
|
+
<button
|
|
2605
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
2606
|
+
type="button"
|
|
2607
|
+
aria-current="page"
|
|
2608
|
+
>
|
|
2609
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2610
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
|
|
2611
|
+
</span>
|
|
2612
|
+
</button>
|
|
2613
|
+
</li>
|
|
2614
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2615
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2616
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2617
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
|
|
2618
|
+
</span>
|
|
2619
|
+
</button>
|
|
2620
|
+
</li>
|
|
2621
|
+
</ol>
|
|
2622
|
+
</li>
|
|
2623
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2624
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
2625
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2626
|
+
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
|
|
2627
|
+
</span>
|
|
2628
|
+
</button>
|
|
2629
|
+
</li>
|
|
2630
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
2631
|
+
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
|
|
2632
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
2633
|
+
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
|
|
2634
|
+
</span>
|
|
2635
|
+
</button>
|
|
2636
|
+
</li>
|
|
2637
|
+
</ol>
|
|
2638
|
+
</nav>
|
|
2639
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
2640
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
2641
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
2642
|
+
<div class="pf-v6-c-form__group">
|
|
2643
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2644
|
+
class="pf-v6-c-form__label"
|
|
2645
|
+
for="wizard-success-on-step-nav-expanded-example-form-field1"
|
|
2646
|
+
>
|
|
2647
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
2648
|
+
class="pf-v6-c-form__label-required"
|
|
2649
|
+
aria-hidden="true"
|
|
2650
|
+
>*</span></label>
|
|
2651
|
+
</div>
|
|
2652
|
+
<div class="pf-v6-c-form__group-control">
|
|
2653
|
+
<span class="pf-v6-c-form-control">
|
|
2654
|
+
<input
|
|
2655
|
+
type="text"
|
|
2656
|
+
id="wizard-success-on-step-nav-expanded-example-form-field1"
|
|
2657
|
+
name="wizard-success-on-step-nav-expanded-example-form-field1"
|
|
2658
|
+
/>
|
|
2659
|
+
</span>
|
|
2660
|
+
</div>
|
|
2661
|
+
</div>
|
|
2662
|
+
<div class="pf-v6-c-form__group">
|
|
2663
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2664
|
+
class="pf-v6-c-form__label"
|
|
2665
|
+
for="wizard-success-on-step-nav-expanded-example-form-field2"
|
|
2666
|
+
>
|
|
2667
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
2668
|
+
class="pf-v6-c-form__label-required"
|
|
2669
|
+
aria-hidden="true"
|
|
2670
|
+
>*</span></label>
|
|
2671
|
+
</div>
|
|
2672
|
+
<div class="pf-v6-c-form__group-control">
|
|
2673
|
+
<span class="pf-v6-c-form-control">
|
|
2674
|
+
<input
|
|
2675
|
+
type="text"
|
|
2676
|
+
id="wizard-success-on-step-nav-expanded-example-form-field2"
|
|
2677
|
+
name="wizard-success-on-step-nav-expanded-example-form-field2"
|
|
2678
|
+
/>
|
|
2679
|
+
</span>
|
|
2680
|
+
</div>
|
|
2681
|
+
</div>
|
|
2682
|
+
<div class="pf-v6-c-form__group">
|
|
2683
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2684
|
+
class="pf-v6-c-form__label"
|
|
2685
|
+
for="wizard-success-on-step-nav-expanded-example-form-field3"
|
|
2686
|
+
>
|
|
2687
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
2688
|
+
class="pf-v6-c-form__label-required"
|
|
2689
|
+
aria-hidden="true"
|
|
2690
|
+
>*</span></label>
|
|
2691
|
+
</div>
|
|
2692
|
+
<div class="pf-v6-c-form__group-control">
|
|
2693
|
+
<span class="pf-v6-c-form-control">
|
|
2694
|
+
<input
|
|
2695
|
+
type="text"
|
|
2696
|
+
id="wizard-success-on-step-nav-expanded-example-form-field3"
|
|
2697
|
+
name="wizard-success-on-step-nav-expanded-example-form-field3"
|
|
2698
|
+
/>
|
|
2699
|
+
</span>
|
|
2700
|
+
</div>
|
|
2701
|
+
</div>
|
|
2702
|
+
<div class="pf-v6-c-form__group">
|
|
2703
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2704
|
+
class="pf-v6-c-form__label"
|
|
2705
|
+
for="wizard-success-on-step-nav-expanded-example-form-field4"
|
|
2706
|
+
>
|
|
2707
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
2708
|
+
class="pf-v6-c-form__label-required"
|
|
2709
|
+
aria-hidden="true"
|
|
2710
|
+
>*</span></label>
|
|
2711
|
+
</div>
|
|
2712
|
+
<div class="pf-v6-c-form__group-control">
|
|
2713
|
+
<span class="pf-v6-c-form-control">
|
|
2714
|
+
<input
|
|
2715
|
+
type="text"
|
|
2716
|
+
id="wizard-success-on-step-nav-expanded-example-form-field4"
|
|
2717
|
+
name="wizard-success-on-step-nav-expanded-example-form-field4"
|
|
2718
|
+
/>
|
|
2719
|
+
</span>
|
|
2720
|
+
</div>
|
|
2721
|
+
</div>
|
|
2722
|
+
<div class="pf-v6-c-form__group">
|
|
2723
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2724
|
+
class="pf-v6-c-form__label"
|
|
2725
|
+
for="wizard-success-on-step-nav-expanded-example-form-field5"
|
|
2726
|
+
>
|
|
2727
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
2728
|
+
class="pf-v6-c-form__label-required"
|
|
2729
|
+
aria-hidden="true"
|
|
2730
|
+
>*</span></label>
|
|
2731
|
+
</div>
|
|
2732
|
+
<div class="pf-v6-c-form__group-control">
|
|
2733
|
+
<span class="pf-v6-c-form-control">
|
|
2734
|
+
<input
|
|
2735
|
+
type="text"
|
|
2736
|
+
id="wizard-success-on-step-nav-expanded-example-form-field5"
|
|
2737
|
+
name="wizard-success-on-step-nav-expanded-example-form-field5"
|
|
2738
|
+
/>
|
|
2739
|
+
</span>
|
|
2740
|
+
</div>
|
|
2741
|
+
</div>
|
|
2742
|
+
<div class="pf-v6-c-form__group">
|
|
2743
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2744
|
+
class="pf-v6-c-form__label"
|
|
2745
|
+
for="wizard-success-on-step-nav-expanded-example-form-field6"
|
|
2746
|
+
>
|
|
2747
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
2748
|
+
class="pf-v6-c-form__label-required"
|
|
2749
|
+
aria-hidden="true"
|
|
2750
|
+
>*</span></label>
|
|
2751
|
+
</div>
|
|
2752
|
+
<div class="pf-v6-c-form__group-control">
|
|
2753
|
+
<span class="pf-v6-c-form-control">
|
|
2754
|
+
<input
|
|
2755
|
+
type="text"
|
|
2756
|
+
id="wizard-success-on-step-nav-expanded-example-form-field6"
|
|
2757
|
+
name="wizard-success-on-step-nav-expanded-example-form-field6"
|
|
2758
|
+
/>
|
|
2759
|
+
</span>
|
|
2760
|
+
</div>
|
|
2761
|
+
</div>
|
|
2762
|
+
<div class="pf-v6-c-form__group">
|
|
2763
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
2764
|
+
class="pf-v6-c-form__label"
|
|
2765
|
+
for="wizard-success-on-step-nav-expanded-example-form-field7"
|
|
2766
|
+
>
|
|
2767
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
2768
|
+
class="pf-v6-c-form__label-required"
|
|
2769
|
+
aria-hidden="true"
|
|
2770
|
+
>*</span></label>
|
|
2771
|
+
</div>
|
|
2772
|
+
<div class="pf-v6-c-form__group-control">
|
|
2773
|
+
<span class="pf-v6-c-form-control">
|
|
2774
|
+
<input
|
|
2775
|
+
type="text"
|
|
2776
|
+
id="wizard-success-on-step-nav-expanded-example-form-field7"
|
|
2777
|
+
name="wizard-success-on-step-nav-expanded-example-form-field7"
|
|
2196
2778
|
/>
|
|
2197
2779
|
</span>
|
|
2198
2780
|
</div>
|
|
@@ -2285,5 +2867,6 @@ wrapperTag: div
|
|
|
2285
2867
|
| `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
|
|
2286
2868
|
| `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
|
|
2287
2869
|
| `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. |
|
|
2870
|
+
| `.pf-m-success` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate success status. |
|
|
2288
2871
|
| `.pf-m-danger` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate danger status. |
|
|
2289
2872
|
| `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. |
|