@patternfly/patternfly 4.157.1 → 4.159.2
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/Dropdown/dropdown.css +46 -11
- package/components/Dropdown/dropdown.scss +60 -11
- package/components/Menu/menu.css +84 -0
- package/components/Menu/menu.scss +109 -0
- package/components/MenuToggle/menu-toggle.css +48 -1
- package/components/MenuToggle/menu-toggle.scss +62 -1
- package/components/Nav/nav.css +3 -3
- package/components/Nav/nav.scss +2 -1
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/docs/components/Dropdown/examples/Dropdown.css +1 -0
- package/docs/components/Dropdown/examples/Dropdown.md +94 -0
- package/docs/components/Menu/examples/Menu.md +1 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
- package/docs/components/Nav/examples/Navigation.css +12 -4
- package/docs/components/Nav/examples/Navigation.md +51 -232
- package/docs/components/Table/examples/Table.md +2168 -76
- package/docs/demos/Button/examples/Button.md +176 -0
- package/docs/demos/Table/examples/Table.md +3734 -95
- package/package.json +1 -1
- package/patternfly-no-reset.css +183 -17
- package/patternfly.css +183 -17
- 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
|
+
```
|