@patternfly/patternfly 4.158.0 → 4.160.0
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/README.md +2 -2
- package/RELEASE-NOTES.md +30 -0
- package/components/Menu/menu.css +84 -0
- package/components/Menu/menu.scss +109 -0
- package/components/Nav/nav.css +3 -3
- package/components/Nav/nav.scss +2 -1
- package/components/Table/table.css +3 -3
- package/components/Table/table.scss +3 -3
- package/components/Toolbar/toolbar.css +4 -2
- package/components/Toolbar/toolbar.scss +6 -2
- package/docs/components/Menu/examples/Menu.md +1 -0
- package/docs/components/Nav/examples/Navigation.css +12 -4
- package/docs/components/Nav/examples/Navigation.md +51 -232
- package/docs/components/Select/examples/Select.md +12 -11
- package/docs/components/Table/examples/Table.md +2168 -76
- package/docs/demos/Button/examples/Button.md +176 -0
- package/docs/demos/Card/examples/Card.md +164 -112
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +79 -0
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/Table/examples/Table.md +3734 -95
- package/package.json +1 -1
- package/patternfly-no-reset.css +94 -8
- package/patternfly.css +94 -8
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Button'
|
|
3
|
+
section: components
|
|
4
|
+
cssPrefix: pf-d-button
|
|
5
|
+
---## Examples
|
|
6
|
+
|
|
7
|
+
### Progress button - initial
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<form novalidate class="pf-c-form">
|
|
11
|
+
<div class="pf-c-form__group">
|
|
12
|
+
<div class="pf-c-form__group-label">
|
|
13
|
+
<label class="pf-c-form__label" for="progress-button-initial-login">
|
|
14
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
15
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
16
|
+
</label>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="pf-c-form__group-control">
|
|
19
|
+
<input
|
|
20
|
+
class="pf-c-form-control"
|
|
21
|
+
type="text"
|
|
22
|
+
id="progress-button-initial-login"
|
|
23
|
+
name="progress-button-initial-login"
|
|
24
|
+
value="johndoe"
|
|
25
|
+
required
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="pf-c-form__group">
|
|
30
|
+
<div class="pf-c-form__group-label">
|
|
31
|
+
<label class="pf-c-form__label" for="progress-button-initial-password">
|
|
32
|
+
<span class="pf-c-form__label-text">Password</span>
|
|
33
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
34
|
+
</label>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="pf-c-form__group-control">
|
|
37
|
+
<input
|
|
38
|
+
class="pf-c-form-control"
|
|
39
|
+
type="password"
|
|
40
|
+
value="p@ssw0rd"
|
|
41
|
+
id="progress-button-initial-password"
|
|
42
|
+
name="progress-button-initial-password"
|
|
43
|
+
required
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="pf-c-form__group pf-m-action">
|
|
48
|
+
<div class="pf-c-form__actions">
|
|
49
|
+
<button
|
|
50
|
+
class="pf-c-button pf-m-primary"
|
|
51
|
+
type="submit"
|
|
52
|
+
>Link account and log in</button>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</form>
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Progress button - loading
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<form novalidate class="pf-c-form">
|
|
63
|
+
<div class="pf-c-form__group">
|
|
64
|
+
<div class="pf-c-form__group-label">
|
|
65
|
+
<label class="pf-c-form__label" for="progress-button-loading-login">
|
|
66
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
67
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
68
|
+
</label>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="pf-c-form__group-control">
|
|
71
|
+
<input
|
|
72
|
+
class="pf-c-form-control"
|
|
73
|
+
type="text"
|
|
74
|
+
id="progress-button-loading-login"
|
|
75
|
+
name="progress-button-loading-login"
|
|
76
|
+
value="johndoe"
|
|
77
|
+
required
|
|
78
|
+
/>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="pf-c-form__group">
|
|
82
|
+
<div class="pf-c-form__group-label">
|
|
83
|
+
<label class="pf-c-form__label" for="progress-button-loading-password">
|
|
84
|
+
<span class="pf-c-form__label-text">Password</span>
|
|
85
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
86
|
+
</label>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="pf-c-form__group-control">
|
|
89
|
+
<input
|
|
90
|
+
class="pf-c-form-control"
|
|
91
|
+
type="password"
|
|
92
|
+
value="p@ssw0rd"
|
|
93
|
+
id="progress-button-loading-password"
|
|
94
|
+
name="progress-button-loading-password"
|
|
95
|
+
required
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="pf-c-form__group pf-m-action">
|
|
100
|
+
<div class="pf-c-form__actions">
|
|
101
|
+
<button
|
|
102
|
+
class="pf-c-button pf-m-progress pf-m-in-progress pf-m-primary"
|
|
103
|
+
type="submit"
|
|
104
|
+
>
|
|
105
|
+
<span class="pf-c-button__progress">
|
|
106
|
+
<span
|
|
107
|
+
class="pf-c-spinner pf-m-md"
|
|
108
|
+
role="progressbar"
|
|
109
|
+
aria-label="Loading..."
|
|
110
|
+
>
|
|
111
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
112
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
113
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
Linking account
|
|
117
|
+
</button>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</form>
|
|
121
|
+
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Progress button - complete
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<form novalidate class="pf-c-form">
|
|
128
|
+
<div class="pf-c-form__group">
|
|
129
|
+
<div class="pf-c-form__group-label">
|
|
130
|
+
<label class="pf-c-form__label" for="progress-button-complete-login">
|
|
131
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
132
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
133
|
+
</label>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="pf-c-form__group-control">
|
|
136
|
+
<input
|
|
137
|
+
class="pf-c-form-control"
|
|
138
|
+
type="text"
|
|
139
|
+
id="progress-button-complete-login"
|
|
140
|
+
name="progress-button-complete-login"
|
|
141
|
+
value="johndoe"
|
|
142
|
+
required
|
|
143
|
+
/>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="pf-c-form__group">
|
|
147
|
+
<div class="pf-c-form__group-label">
|
|
148
|
+
<label class="pf-c-form__label" for="progress-button-complete-password">
|
|
149
|
+
<span class="pf-c-form__label-text">Password</span>
|
|
150
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
151
|
+
</label>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="pf-c-form__group-control">
|
|
154
|
+
<input
|
|
155
|
+
class="pf-c-form-control"
|
|
156
|
+
type="password"
|
|
157
|
+
value="p@ssw0rd"
|
|
158
|
+
id="progress-button-complete-password"
|
|
159
|
+
name="progress-button-complete-password"
|
|
160
|
+
required
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="pf-c-form__group pf-m-action">
|
|
165
|
+
<div class="pf-c-form__actions">
|
|
166
|
+
<button class="pf-c-button pf-m-primary pf-m-start" type="submit">
|
|
167
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
168
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
169
|
+
</span>
|
|
170
|
+
Logged in
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</form>
|
|
175
|
+
|
|
176
|
+
```
|
|
@@ -1831,47 +1831,60 @@ wrapperTag: div
|
|
|
1831
1831
|
<h2 class="pf-c-title pf-m-lg">Recommendations</h2>
|
|
1832
1832
|
</div>
|
|
1833
1833
|
<div class="pf-c-card__actions">
|
|
1834
|
-
<div class="pf-c-
|
|
1834
|
+
<div class="pf-c-select">
|
|
1835
|
+
<span
|
|
1836
|
+
id="utilization-card-3-example-select-dropdown-label"
|
|
1837
|
+
hidden
|
|
1838
|
+
>Choose one</span>
|
|
1839
|
+
|
|
1835
1840
|
<button
|
|
1836
|
-
class="pf-c-
|
|
1837
|
-
id="utilization-card-3-example-dropdown-button"
|
|
1838
|
-
aria-expanded="false"
|
|
1841
|
+
class="pf-c-select__toggle"
|
|
1839
1842
|
type="button"
|
|
1843
|
+
id="utilization-card-3-example-select-dropdown-toggle"
|
|
1844
|
+
aria-haspopup="true"
|
|
1845
|
+
aria-expanded="false"
|
|
1846
|
+
aria-labelledby="utilization-card-3-example-select-dropdown-label utilization-card-3-example-select-dropdown-toggle"
|
|
1840
1847
|
>
|
|
1841
|
-
<
|
|
1842
|
-
|
|
1848
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
1849
|
+
<span class="pf-c-select__toggle-text">Filter</span>
|
|
1850
|
+
</div>
|
|
1851
|
+
<span class="pf-c-select__toggle-arrow">
|
|
1843
1852
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1844
1853
|
</span>
|
|
1845
1854
|
</button>
|
|
1855
|
+
|
|
1846
1856
|
<ul
|
|
1847
|
-
class="pf-c-
|
|
1848
|
-
|
|
1857
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
1858
|
+
role="listbox"
|
|
1859
|
+
aria-labelledby="utilization-card-3-example-select-dropdown-label"
|
|
1849
1860
|
hidden
|
|
1850
1861
|
>
|
|
1851
|
-
<li>
|
|
1852
|
-
<
|
|
1862
|
+
<li role="presentation">
|
|
1863
|
+
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
1853
1864
|
</li>
|
|
1854
|
-
<li>
|
|
1855
|
-
<button
|
|
1865
|
+
<li role="presentation">
|
|
1866
|
+
<button
|
|
1867
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
1868
|
+
role="option"
|
|
1869
|
+
aria-selected="true"
|
|
1870
|
+
>
|
|
1871
|
+
Stopped
|
|
1872
|
+
<span class="pf-c-select__menu-item-icon">
|
|
1873
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1874
|
+
</span>
|
|
1875
|
+
</button>
|
|
1856
1876
|
</li>
|
|
1857
|
-
<li>
|
|
1858
|
-
<
|
|
1859
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1860
|
-
href="#"
|
|
1861
|
-
aria-disabled="true"
|
|
1862
|
-
tabindex="-1"
|
|
1863
|
-
>Disabled link</a>
|
|
1877
|
+
<li role="presentation">
|
|
1878
|
+
<button class="pf-c-select__menu-item" role="option">Down</button>
|
|
1864
1879
|
</li>
|
|
1865
|
-
<li>
|
|
1866
|
-
<button
|
|
1867
|
-
class="pf-c-dropdown__menu-item"
|
|
1868
|
-
type="button"
|
|
1869
|
-
disabled
|
|
1870
|
-
>Disabled action</button>
|
|
1880
|
+
<li role="presentation">
|
|
1881
|
+
<button class="pf-c-select__menu-item" role="option">Degraded</button>
|
|
1871
1882
|
</li>
|
|
1872
|
-
<li
|
|
1873
|
-
|
|
1874
|
-
|
|
1883
|
+
<li role="presentation">
|
|
1884
|
+
<button
|
|
1885
|
+
class="pf-c-select__menu-item"
|
|
1886
|
+
role="option"
|
|
1887
|
+
>Needs maintenance</button>
|
|
1875
1888
|
</li>
|
|
1876
1889
|
</ul>
|
|
1877
1890
|
</div>
|
|
@@ -2579,47 +2592,60 @@ wrapperTag: div
|
|
|
2579
2592
|
<span class="pf-u-color-200">Workload</span>
|
|
2580
2593
|
</div>
|
|
2581
2594
|
<div class="pf-c-card__actions">
|
|
2582
|
-
<div class="pf-c-
|
|
2595
|
+
<div class="pf-c-select">
|
|
2596
|
+
<span
|
|
2597
|
+
id="trend-card-1-example-select-dropdown-label"
|
|
2598
|
+
hidden
|
|
2599
|
+
>Choose one</span>
|
|
2600
|
+
|
|
2583
2601
|
<button
|
|
2584
|
-
class="pf-c-
|
|
2585
|
-
id="trend-card-1-example-dropdown-button"
|
|
2586
|
-
aria-expanded="false"
|
|
2602
|
+
class="pf-c-select__toggle"
|
|
2587
2603
|
type="button"
|
|
2604
|
+
id="trend-card-1-example-select-dropdown-toggle"
|
|
2605
|
+
aria-haspopup="true"
|
|
2606
|
+
aria-expanded="false"
|
|
2607
|
+
aria-labelledby="trend-card-1-example-select-dropdown-label trend-card-1-example-select-dropdown-toggle"
|
|
2588
2608
|
>
|
|
2589
|
-
<
|
|
2590
|
-
|
|
2609
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
2610
|
+
<span class="pf-c-select__toggle-text">Filter</span>
|
|
2611
|
+
</div>
|
|
2612
|
+
<span class="pf-c-select__toggle-arrow">
|
|
2591
2613
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2592
2614
|
</span>
|
|
2593
2615
|
</button>
|
|
2616
|
+
|
|
2594
2617
|
<ul
|
|
2595
|
-
class="pf-c-
|
|
2596
|
-
|
|
2618
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
2619
|
+
role="listbox"
|
|
2620
|
+
aria-labelledby="trend-card-1-example-select-dropdown-label"
|
|
2597
2621
|
hidden
|
|
2598
2622
|
>
|
|
2599
|
-
<li>
|
|
2600
|
-
<
|
|
2623
|
+
<li role="presentation">
|
|
2624
|
+
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
2601
2625
|
</li>
|
|
2602
|
-
<li>
|
|
2603
|
-
<button
|
|
2626
|
+
<li role="presentation">
|
|
2627
|
+
<button
|
|
2628
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
2629
|
+
role="option"
|
|
2630
|
+
aria-selected="true"
|
|
2631
|
+
>
|
|
2632
|
+
Stopped
|
|
2633
|
+
<span class="pf-c-select__menu-item-icon">
|
|
2634
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2635
|
+
</span>
|
|
2636
|
+
</button>
|
|
2604
2637
|
</li>
|
|
2605
|
-
<li>
|
|
2606
|
-
<
|
|
2607
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2608
|
-
href="#"
|
|
2609
|
-
aria-disabled="true"
|
|
2610
|
-
tabindex="-1"
|
|
2611
|
-
>Disabled link</a>
|
|
2638
|
+
<li role="presentation">
|
|
2639
|
+
<button class="pf-c-select__menu-item" role="option">Down</button>
|
|
2612
2640
|
</li>
|
|
2613
|
-
<li>
|
|
2614
|
-
<button
|
|
2615
|
-
class="pf-c-dropdown__menu-item"
|
|
2616
|
-
type="button"
|
|
2617
|
-
disabled
|
|
2618
|
-
>Disabled action</button>
|
|
2641
|
+
<li role="presentation">
|
|
2642
|
+
<button class="pf-c-select__menu-item" role="option">Degraded</button>
|
|
2619
2643
|
</li>
|
|
2620
|
-
<li
|
|
2621
|
-
|
|
2622
|
-
|
|
2644
|
+
<li role="presentation">
|
|
2645
|
+
<button
|
|
2646
|
+
class="pf-c-select__menu-item"
|
|
2647
|
+
role="option"
|
|
2648
|
+
>Needs maintenance</button>
|
|
2623
2649
|
</li>
|
|
2624
2650
|
</ul>
|
|
2625
2651
|
</div>
|
|
@@ -2681,47 +2707,60 @@ wrapperTag: div
|
|
|
2681
2707
|
<div class="pf-c-card" id="card-log-view-example">
|
|
2682
2708
|
<div class="pf-c-card__header">
|
|
2683
2709
|
<div class="pf-c-card__actions">
|
|
2684
|
-
<div class="pf-c-
|
|
2710
|
+
<div class="pf-c-select">
|
|
2711
|
+
<span
|
|
2712
|
+
id="card-log-view-example-select-dropdown-label"
|
|
2713
|
+
hidden
|
|
2714
|
+
>Choose one</span>
|
|
2715
|
+
|
|
2685
2716
|
<button
|
|
2686
|
-
class="pf-c-
|
|
2687
|
-
id="card-log-view-example-dropdown-button"
|
|
2688
|
-
aria-expanded="false"
|
|
2717
|
+
class="pf-c-select__toggle"
|
|
2689
2718
|
type="button"
|
|
2719
|
+
id="card-log-view-example-select-dropdown-toggle"
|
|
2720
|
+
aria-haspopup="true"
|
|
2721
|
+
aria-expanded="false"
|
|
2722
|
+
aria-labelledby="card-log-view-example-select-dropdown-label card-log-view-example-select-dropdown-toggle"
|
|
2690
2723
|
>
|
|
2691
|
-
<
|
|
2692
|
-
|
|
2724
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
2725
|
+
<span class="pf-c-select__toggle-text">Most recent</span>
|
|
2726
|
+
</div>
|
|
2727
|
+
<span class="pf-c-select__toggle-arrow">
|
|
2693
2728
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2694
2729
|
</span>
|
|
2695
2730
|
</button>
|
|
2731
|
+
|
|
2696
2732
|
<ul
|
|
2697
|
-
class="pf-c-
|
|
2698
|
-
|
|
2733
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
2734
|
+
role="listbox"
|
|
2735
|
+
aria-labelledby="card-log-view-example-select-dropdown-label"
|
|
2699
2736
|
hidden
|
|
2700
2737
|
>
|
|
2701
|
-
<li>
|
|
2702
|
-
<
|
|
2738
|
+
<li role="presentation">
|
|
2739
|
+
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
2703
2740
|
</li>
|
|
2704
|
-
<li>
|
|
2705
|
-
<button
|
|
2741
|
+
<li role="presentation">
|
|
2742
|
+
<button
|
|
2743
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
2744
|
+
role="option"
|
|
2745
|
+
aria-selected="true"
|
|
2746
|
+
>
|
|
2747
|
+
Stopped
|
|
2748
|
+
<span class="pf-c-select__menu-item-icon">
|
|
2749
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2750
|
+
</span>
|
|
2751
|
+
</button>
|
|
2706
2752
|
</li>
|
|
2707
|
-
<li>
|
|
2708
|
-
<
|
|
2709
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2710
|
-
href="#"
|
|
2711
|
-
aria-disabled="true"
|
|
2712
|
-
tabindex="-1"
|
|
2713
|
-
>Disabled link</a>
|
|
2753
|
+
<li role="presentation">
|
|
2754
|
+
<button class="pf-c-select__menu-item" role="option">Down</button>
|
|
2714
2755
|
</li>
|
|
2715
|
-
<li>
|
|
2716
|
-
<button
|
|
2717
|
-
class="pf-c-dropdown__menu-item"
|
|
2718
|
-
type="button"
|
|
2719
|
-
disabled
|
|
2720
|
-
>Disabled action</button>
|
|
2756
|
+
<li role="presentation">
|
|
2757
|
+
<button class="pf-c-select__menu-item" role="option">Degraded</button>
|
|
2721
2758
|
</li>
|
|
2722
|
-
<li
|
|
2723
|
-
|
|
2724
|
-
|
|
2759
|
+
<li role="presentation">
|
|
2760
|
+
<button
|
|
2761
|
+
class="pf-c-select__menu-item"
|
|
2762
|
+
role="option"
|
|
2763
|
+
>Needs maintenance</button>
|
|
2725
2764
|
</li>
|
|
2726
2765
|
</ul>
|
|
2727
2766
|
</div>
|
|
@@ -2813,47 +2852,60 @@ wrapperTag: div
|
|
|
2813
2852
|
<div class="pf-c-card" id="card-events-view-example">
|
|
2814
2853
|
<div class="pf-c-card__header">
|
|
2815
2854
|
<div class="pf-c-card__actions">
|
|
2816
|
-
<div class="pf-c-
|
|
2855
|
+
<div class="pf-c-select">
|
|
2856
|
+
<span
|
|
2857
|
+
id="card-events-view-example-select-dropdown-label"
|
|
2858
|
+
hidden
|
|
2859
|
+
>Choose one</span>
|
|
2860
|
+
|
|
2817
2861
|
<button
|
|
2818
|
-
class="pf-c-
|
|
2819
|
-
id="card-events-view-example-dropdown-button"
|
|
2820
|
-
aria-expanded="false"
|
|
2862
|
+
class="pf-c-select__toggle"
|
|
2821
2863
|
type="button"
|
|
2864
|
+
id="card-events-view-example-select-dropdown-toggle"
|
|
2865
|
+
aria-haspopup="true"
|
|
2866
|
+
aria-expanded="false"
|
|
2867
|
+
aria-labelledby="card-events-view-example-select-dropdown-label card-events-view-example-select-dropdown-toggle"
|
|
2822
2868
|
>
|
|
2823
|
-
<
|
|
2824
|
-
|
|
2869
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
2870
|
+
<span class="pf-c-select__toggle-text">Status</span>
|
|
2871
|
+
</div>
|
|
2872
|
+
<span class="pf-c-select__toggle-arrow">
|
|
2825
2873
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2826
2874
|
</span>
|
|
2827
2875
|
</button>
|
|
2876
|
+
|
|
2828
2877
|
<ul
|
|
2829
|
-
class="pf-c-
|
|
2830
|
-
|
|
2878
|
+
class="pf-c-select__menu pf-m-align-right"
|
|
2879
|
+
role="listbox"
|
|
2880
|
+
aria-labelledby="card-events-view-example-select-dropdown-label"
|
|
2831
2881
|
hidden
|
|
2832
2882
|
>
|
|
2833
|
-
<li>
|
|
2834
|
-
<
|
|
2883
|
+
<li role="presentation">
|
|
2884
|
+
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
2835
2885
|
</li>
|
|
2836
|
-
<li>
|
|
2837
|
-
<button
|
|
2886
|
+
<li role="presentation">
|
|
2887
|
+
<button
|
|
2888
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
2889
|
+
role="option"
|
|
2890
|
+
aria-selected="true"
|
|
2891
|
+
>
|
|
2892
|
+
Stopped
|
|
2893
|
+
<span class="pf-c-select__menu-item-icon">
|
|
2894
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2895
|
+
</span>
|
|
2896
|
+
</button>
|
|
2838
2897
|
</li>
|
|
2839
|
-
<li>
|
|
2840
|
-
<
|
|
2841
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2842
|
-
href="#"
|
|
2843
|
-
aria-disabled="true"
|
|
2844
|
-
tabindex="-1"
|
|
2845
|
-
>Disabled link</a>
|
|
2898
|
+
<li role="presentation">
|
|
2899
|
+
<button class="pf-c-select__menu-item" role="option">Down</button>
|
|
2846
2900
|
</li>
|
|
2847
|
-
<li>
|
|
2848
|
-
<button
|
|
2849
|
-
class="pf-c-dropdown__menu-item"
|
|
2850
|
-
type="button"
|
|
2851
|
-
disabled
|
|
2852
|
-
>Disabled action</button>
|
|
2901
|
+
<li role="presentation">
|
|
2902
|
+
<button class="pf-c-select__menu-item" role="option">Degraded</button>
|
|
2853
2903
|
</li>
|
|
2854
|
-
<li
|
|
2855
|
-
|
|
2856
|
-
|
|
2904
|
+
<li role="presentation">
|
|
2905
|
+
<button
|
|
2906
|
+
class="pf-c-select__menu-item"
|
|
2907
|
+
role="option"
|
|
2908
|
+
>Needs maintenance</button>
|
|
2857
2909
|
</li>
|
|
2858
2910
|
</ul>
|
|
2859
2911
|
</div>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Password generator'
|
|
3
|
+
section: demos
|
|
4
|
+
---## Examples
|
|
5
|
+
|
|
6
|
+
### Provide a generated password
|
|
7
|
+
|
|
8
|
+
```html
|
|
9
|
+
<form novalidate class="pf-c-form">
|
|
10
|
+
<div class="pf-c-form__group">
|
|
11
|
+
<div class="pf-c-form__group-label pf-m-info">
|
|
12
|
+
<div class="pf-c-form__group-label-main">
|
|
13
|
+
<label
|
|
14
|
+
class="pf-c-form__label"
|
|
15
|
+
for="password-generator-demo--initial-password"
|
|
16
|
+
>
|
|
17
|
+
<span class="pf-c-form__label-text">Password</span>
|
|
18
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
19
|
+
</label>
|
|
20
|
+
|
|
21
|
+
<button class="pf-c-form__group-label-help" aria-label="More info">
|
|
22
|
+
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
23
|
+
</button>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="pf-c-form__group-label-info"></div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="pf-c-form__group-control">
|
|
28
|
+
<div class="pf-c-input-group">
|
|
29
|
+
<input
|
|
30
|
+
class="pf-c-form-control"
|
|
31
|
+
required
|
|
32
|
+
type="password"
|
|
33
|
+
id="password-generator-demo--initial-password"
|
|
34
|
+
name="password-generator-demo--initial-password"
|
|
35
|
+
aria-label="Password input"
|
|
36
|
+
value
|
|
37
|
+
placeholder="Password"
|
|
38
|
+
/>
|
|
39
|
+
<button
|
|
40
|
+
class="pf-c-button pf-m-control"
|
|
41
|
+
type="button"
|
|
42
|
+
aria-label="Show password"
|
|
43
|
+
>
|
|
44
|
+
<i class="fas fa-eye" aria-hidden="true"></i>
|
|
45
|
+
</button>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="pf-c-menu">
|
|
48
|
+
<div class="pf-c-menu__content">
|
|
49
|
+
<ul class="pf-c-menu__list">
|
|
50
|
+
<li class="pf-c-menu__list-item">
|
|
51
|
+
<button class="pf-c-menu__item" type="button">
|
|
52
|
+
<span class="pf-c-menu__item-main">
|
|
53
|
+
<span
|
|
54
|
+
class="pf-c-menu__item-text"
|
|
55
|
+
>Use suggested password: fqu9kKe676JmKt2</span>
|
|
56
|
+
</span>
|
|
57
|
+
</button>
|
|
58
|
+
<button
|
|
59
|
+
class="pf-c-menu__item-action"
|
|
60
|
+
type="button"
|
|
61
|
+
aria-label="Generate a new suggested password"
|
|
62
|
+
>
|
|
63
|
+
<span class="pf-c-menu__item-action-icon">
|
|
64
|
+
<i class="fas fa-fw fa-redo" aria-hidden="true"></i>
|
|
65
|
+
</span>
|
|
66
|
+
</button>
|
|
67
|
+
</li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</form>
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Documentation
|
|
78
|
+
|
|
79
|
+
This demo shows how to use a menu in conjunction with a form input to provide a generated password and an associated button for refresh.
|
|
@@ -40,7 +40,7 @@ section: demos
|
|
|
40
40
|
<button
|
|
41
41
|
class="pf-c-button pf-m-control"
|
|
42
42
|
type="button"
|
|
43
|
-
aria-label="Show password
|
|
43
|
+
aria-label="Show password"
|
|
44
44
|
>
|
|
45
45
|
<i class="fas fa-eye-slash" aria-hidden="true"></i>
|
|
46
46
|
</button>
|
|
@@ -115,7 +115,7 @@ section: demos
|
|
|
115
115
|
<button
|
|
116
116
|
class="pf-c-button pf-m-control"
|
|
117
117
|
type="button"
|
|
118
|
-
aria-label="Show password
|
|
118
|
+
aria-label="Show password"
|
|
119
119
|
>
|
|
120
120
|
<i class="fas fa-eye-slash" aria-hidden="true"></i>
|
|
121
121
|
</button>
|
|
@@ -199,7 +199,7 @@ section: demos
|
|
|
199
199
|
<button
|
|
200
200
|
class="pf-c-button pf-m-control"
|
|
201
201
|
type="button"
|
|
202
|
-
aria-label="Show password
|
|
202
|
+
aria-label="Show password"
|
|
203
203
|
>
|
|
204
204
|
<i class="fas fa-eye-slash" aria-hidden="true"></i>
|
|
205
205
|
</button>
|
|
@@ -283,7 +283,7 @@ section: demos
|
|
|
283
283
|
<button
|
|
284
284
|
class="pf-c-button pf-m-control"
|
|
285
285
|
type="button"
|
|
286
|
-
aria-label="Show password
|
|
286
|
+
aria-label="Show password"
|
|
287
287
|
>
|
|
288
288
|
<i class="fas fa-eye-slash" aria-hidden="true"></i>
|
|
289
289
|
</button>
|