@patternfly/patternfly 6.0.0-alpha.56 → 6.0.0-alpha.58
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/Button/button.css +26 -11
- package/components/Button/button.scss +27 -12
- package/components/CodeBlock/code-block.css +18 -9
- package/components/CodeBlock/code-block.scss +18 -10
- package/components/DescriptionList/description-list.css +39 -34
- package/components/DescriptionList/description-list.scss +25 -25
- package/components/FileUpload/file-upload.css +28 -34
- package/components/FileUpload/file-upload.scss +30 -42
- package/components/Icon/icon.css +154 -18
- package/components/Icon/icon.scss +187 -20
- package/components/Label/label-group.css +39 -44
- package/components/Label/label-group.scss +39 -45
- package/components/Label/label.css +258 -355
- package/components/Label/label.scss +297 -347
- package/components/Sidebar/sidebar.css +20 -9
- package/components/Sidebar/sidebar.scss +23 -11
- package/components/SimpleList/simple-list.css +1 -1
- package/components/SimpleList/simple-list.scss +1 -1
- package/components/ToggleGroup/toggle-group.css +34 -47
- package/components/ToggleGroup/toggle-group.scss +34 -45
- package/docs/components/FileUpload/examples/FileUpload.md +112 -53
- package/docs/components/Icon/examples/Icon.md +82 -11
- package/docs/components/Label/examples/Label.css +4 -0
- package/docs/components/Label/examples/Label.md +999 -223
- package/docs/components/Sidebar/examples/Sidebar.md +19 -0
- package/docs/demos/Form/examples/BasicForms.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-globals.css +701 -570
- package/patternfly-theme-dark-unversioned.css +701 -570
- package/patternfly.css +701 -570
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +18 -0
- package/components/Label/themes/dark/label.scss +0 -53
- package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
|
@@ -33,7 +33,7 @@ cssPrefix: pf-v5-c-icon
|
|
|
33
33
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
###
|
|
36
|
+
### Standalone icon sizes
|
|
37
37
|
|
|
38
38
|
```html
|
|
39
39
|
<span class="pf-v5-c-icon pf-m-sm">
|
|
@@ -56,6 +56,73 @@ cssPrefix: pf-v5-c-icon
|
|
|
56
56
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
57
57
|
</span>
|
|
58
58
|
</span>
|
|
59
|
+
<span class="pf-v5-c-icon pf-m-2xl">
|
|
60
|
+
<span class="pf-v5-c-icon__content">
|
|
61
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
62
|
+
</span>
|
|
63
|
+
</span>
|
|
64
|
+
<span class="pf-v5-c-icon pf-m-3xl">
|
|
65
|
+
<span class="pf-v5-c-icon__content">
|
|
66
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
67
|
+
</span>
|
|
68
|
+
</span>
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Body sizes
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<span class="pf-v5-c-icon pf-m-body-sm">
|
|
76
|
+
<span class="pf-v5-c-icon__content">
|
|
77
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
78
|
+
</span>
|
|
79
|
+
</span>
|
|
80
|
+
<span class="pf-v5-c-icon pf-m-body-default">
|
|
81
|
+
<span class="pf-v5-c-icon__content">
|
|
82
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
83
|
+
</span>
|
|
84
|
+
</span>
|
|
85
|
+
<span class="pf-v5-c-icon pf-m-body-lg">
|
|
86
|
+
<span class="pf-v5-c-icon__content">
|
|
87
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
88
|
+
</span>
|
|
89
|
+
</span>
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Heading sizes
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<span class="pf-v5-c-icon pf-m-heading-sm">
|
|
97
|
+
<span class="pf-v5-c-icon__content">
|
|
98
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
99
|
+
</span>
|
|
100
|
+
</span>
|
|
101
|
+
<span class="pf-v5-c-icon pf-m-heading-md">
|
|
102
|
+
<span class="pf-v5-c-icon__content">
|
|
103
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
104
|
+
</span>
|
|
105
|
+
</span>
|
|
106
|
+
<span class="pf-v5-c-icon pf-m-heading-lg">
|
|
107
|
+
<span class="pf-v5-c-icon__content">
|
|
108
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
109
|
+
</span>
|
|
110
|
+
</span>
|
|
111
|
+
<span class="pf-v5-c-icon pf-m-heading-xl">
|
|
112
|
+
<span class="pf-v5-c-icon__content">
|
|
113
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
<span class="pf-v5-c-icon pf-m-heading-2xl">
|
|
117
|
+
<span class="pf-v5-c-icon__content">
|
|
118
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
119
|
+
</span>
|
|
120
|
+
</span>
|
|
121
|
+
<span class="pf-v5-c-icon pf-m-heading-3xl">
|
|
122
|
+
<span class="pf-v5-c-icon__content">
|
|
123
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
124
|
+
</span>
|
|
125
|
+
</span>
|
|
59
126
|
|
|
60
127
|
```
|
|
61
128
|
|
|
@@ -95,23 +162,23 @@ cssPrefix: pf-v5-c-icon
|
|
|
95
162
|
Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
|
|
96
163
|
|
|
97
164
|
```html
|
|
98
|
-
<span class="pf-v5-c-icon pf-m-
|
|
99
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
165
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
166
|
+
<span class="pf-v5-c-icon__content pf-m-lg">
|
|
100
167
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
101
168
|
</span>
|
|
102
169
|
</span>
|
|
103
|
-
<span class="pf-v5-c-icon pf-m-
|
|
104
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
170
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
171
|
+
<span class="pf-v5-c-icon__content pf-m-xl">
|
|
105
172
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
106
173
|
</span>
|
|
107
174
|
</span>
|
|
108
|
-
<span class="pf-v5-c-icon pf-m-
|
|
109
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
175
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
176
|
+
<span class="pf-v5-c-icon__content pf-m-2xl">
|
|
110
177
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
111
178
|
</span>
|
|
112
179
|
</span>
|
|
113
|
-
<span class="pf-v5-c-icon pf-m-
|
|
114
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
180
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
181
|
+
<span class="pf-v5-c-icon__content pf-m-3xl">
|
|
115
182
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
116
183
|
</span>
|
|
117
184
|
</span>
|
|
@@ -248,7 +315,11 @@ Refer to the [icons](/design-foundations/icons) page for information about the P
|
|
|
248
315
|
| `.pf-v5-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
|
|
249
316
|
| `.pf-v5-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
|
|
250
317
|
| `.pf-m-inline` | `.pf-v5-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
|
|
251
|
-
| `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
|
|
252
|
-
| `.pf-m-[sm,
|
|
318
|
+
| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
|
|
319
|
+
| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
|
|
320
|
+
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
|
|
321
|
+
| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
|
|
322
|
+
| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
|
|
323
|
+
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
|
|
253
324
|
| `.pf-m-in-progress` | `.pf-v5-c-icon` | Shows the progress element in place of the icon content. |
|
|
254
325
|
| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom` | `.pf-v5-c-icon__content` | Modifies the icon content to use a status color. |
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
#ws-core-c-label-filled .ws-preview-html,
|
|
2
|
+
#ws-core-c-label-outline .ws-preview-html,
|
|
3
|
+
#ws-core-c-label-compact .ws-preview-html,
|
|
2
4
|
#ws-core-c-label-overflow .ws-preview-html {
|
|
3
5
|
margin: -4px;
|
|
4
6
|
}
|
|
5
7
|
|
|
6
8
|
#ws-core-c-label-filled .pf-v5-c-label,
|
|
9
|
+
#ws-core-c-label-outline .pf-v5-c-label,
|
|
10
|
+
#ws-core-c-label-compact .pf-v5-c-label,
|
|
7
11
|
#ws-core-c-label-overflow .pf-v5-c-label {
|
|
8
12
|
margin: 4px;
|
|
9
13
|
}
|