@patternfly/patternfly 4.159.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/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/docs/components/Table/examples/Table.md +500 -0
- package/docs/demos/Button/examples/Button.md +176 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +2 -2
- package/patternfly.css +2 -2
- 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
|
+
```
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -23702,8 +23702,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
23702
23702
|
--pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
|
|
23703
23703
|
--pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
|
|
23704
23704
|
--pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
|
|
23705
|
-
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-
|
|
23706
|
-
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-
|
|
23705
|
+
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
|
|
23706
|
+
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
|
|
23707
23707
|
--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
|
|
23708
23708
|
--pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
|
|
23709
23709
|
--pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
|
package/patternfly.css
CHANGED
|
@@ -23838,8 +23838,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
23838
23838
|
--pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
|
|
23839
23839
|
--pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
|
|
23840
23840
|
--pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
|
|
23841
|
-
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-
|
|
23842
|
-
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-
|
|
23841
|
+
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
|
|
23842
|
+
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
|
|
23843
23843
|
--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
|
|
23844
23844
|
--pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
|
|
23845
23845
|
--pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
|