@patternfly/patternfly 4.194.2 → 4.195.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/RELEASE-NOTES.md +25 -0
- package/docs/demos/Drawer/examples/Drawer.md +1930 -0
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1946 -0
- package/docs/utilities/Text/examples/Text.md +43 -26
- package/package.json +1 -1
- package/patternfly-addons.css +24 -0
- package/patternfly-charts-theme-dark.css +6 -1
- package/themes/dark/_patternfly-charts-theme-dark.scss +6 -1
- package/utilities/Text/text.css +24 -0
- package/utilities/Text/text.scss +24 -0
|
@@ -5,6 +5,22 @@ section: utilities
|
|
|
5
5
|
|
|
6
6
|
## Examples
|
|
7
7
|
|
|
8
|
+
### Font family
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
<div class="pf-u-font-family-sans-serif">Sans serif</div>
|
|
12
|
+
<div class="pf-u-font-family-heading-sans-serif">Heading sans serif</div>
|
|
13
|
+
<div class="pf-u-font-family-monospace">Monospace</div>
|
|
14
|
+
<div
|
|
15
|
+
class="pf-u-font-family-redhatVF-sans-serif"
|
|
16
|
+
>Red Hat variable font sans serif</div>
|
|
17
|
+
<div
|
|
18
|
+
class="pf-u-font-family-redhatVF-heading-sans-serif"
|
|
19
|
+
>Red Hat variable font heading sans serif</div>
|
|
20
|
+
<div class="pf-u-font-family-redhatVF-monospace">Red Hat variable font monospace</div>
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
|
|
8
24
|
### Font size
|
|
9
25
|
|
|
10
26
|
```html
|
|
@@ -153,29 +169,30 @@ Care should be taken especially when applying text colors, as this can have a ne
|
|
|
153
169
|
|
|
154
170
|
### Usage
|
|
155
171
|
|
|
156
|
-
| Class
|
|
157
|
-
|
|
|
158
|
-
| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`
|
|
159
|
-
| `.pf-u-font-
|
|
160
|
-
| `.pf-u-
|
|
161
|
-
| `.pf-u-
|
|
162
|
-
| `.pf-u-
|
|
163
|
-
| `.pf-u-color-
|
|
164
|
-
| `.pf-u-
|
|
165
|
-
| `.pf-u-link-color
|
|
166
|
-
| `.pf-u-link-color-
|
|
167
|
-
| `.pf-u-link-color-light
|
|
168
|
-
| `.pf-u-link-color-
|
|
169
|
-
| `.pf-u-link-color-dark
|
|
170
|
-
| `.pf-u-link-color-
|
|
171
|
-
| `.pf-u-
|
|
172
|
-
| `.pf-u-
|
|
173
|
-
| `.pf-u-
|
|
174
|
-
| `.pf-u-
|
|
175
|
-
| `.pf-u-
|
|
176
|
-
| `.pf-u-
|
|
177
|
-
| `.pf-u-
|
|
178
|
-
| `.pf-u-
|
|
179
|
-
| `.pf-u-text-
|
|
180
|
-
| `.pf-u-text-
|
|
181
|
-
| `.pf-u-text-
|
|
172
|
+
| Class | Applied to | Outcome |
|
|
173
|
+
| ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
174
|
+
| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
|
|
175
|
+
| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*` | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
|
|
176
|
+
| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}` | `*` | Sets font-size to light, normal, or bold |
|
|
177
|
+
| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
|
|
178
|
+
| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
|
|
179
|
+
| `.pf-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
|
|
180
|
+
| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
|
|
181
|
+
| `.pf-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
|
|
182
|
+
| `.pf-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
|
|
183
|
+
| `.pf-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
|
|
184
|
+
| `.pf-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
|
|
185
|
+
| `.pf-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
|
|
186
|
+
| `.pf-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
|
|
187
|
+
| `.pf-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
|
|
188
|
+
| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to default color 100, 200, or 300 |
|
|
189
|
+
| `.pf-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
|
|
190
|
+
| `.pf-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
|
|
191
|
+
| `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
|
|
192
|
+
| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
|
|
193
|
+
| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
|
|
194
|
+
| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
|
|
195
|
+
| `.pf-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
|
|
196
|
+
| `.pf-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
|
|
197
|
+
| `.pf-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
|
|
198
|
+
| `.pf-u-text-truncate` | `*` | Truncates text field |
|
package/package.json
CHANGED
package/patternfly-addons.css
CHANGED
|
@@ -7873,6 +7873,30 @@
|
|
|
7873
7873
|
}
|
|
7874
7874
|
}
|
|
7875
7875
|
|
|
7876
|
+
.pf-u-font-family-sans-serif {
|
|
7877
|
+
font-family: var(--pf-global--FontFamily--sans-serif) !important;
|
|
7878
|
+
}
|
|
7879
|
+
|
|
7880
|
+
.pf-u-font-family-heading-sans-serif {
|
|
7881
|
+
font-family: var(--pf-global--FontFamily--heading--sans-serif) !important;
|
|
7882
|
+
}
|
|
7883
|
+
|
|
7884
|
+
.pf-u-font-family-monospace {
|
|
7885
|
+
font-family: var(--pf-global--FontFamily--monospace) !important;
|
|
7886
|
+
}
|
|
7887
|
+
|
|
7888
|
+
.pf-u-font-family-redhatVF-sans-serif {
|
|
7889
|
+
font-family: var(--pf-global--FontFamily--redhatVF--sans-serif) !important;
|
|
7890
|
+
}
|
|
7891
|
+
|
|
7892
|
+
.pf-u-font-family-redhatVF-heading-sans-serif {
|
|
7893
|
+
font-family: var(--pf-global--FontFamily--redhatVF--heading--sans-serif) !important;
|
|
7894
|
+
}
|
|
7895
|
+
|
|
7896
|
+
.pf-u-font-family-redhatVF-monospace {
|
|
7897
|
+
font-family: var(--pf-global--FontFamily--redhatVF--monospace) !important;
|
|
7898
|
+
}
|
|
7899
|
+
|
|
7876
7900
|
.pf-u-font-size-xs {
|
|
7877
7901
|
font-size: var(--pf-global--FontSize--xs) !important;
|
|
7878
7902
|
}
|
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
--pf-chart-global--subtitle--Fill: var(--pf-global--Color--200);
|
|
35
35
|
--pf-chart-global--tooltip--Fill: var(--pf-global--Color--100);
|
|
36
36
|
--pf-chart-global--tooltip--bg--Fill: var(--pf-global--BackgroundColor--300);
|
|
37
|
+
--pf-chart-global--tooltip--BorderWidth: 1;
|
|
38
|
+
--pf-chart-global--tooltip--BorderColor: var(--pf-global--BorderColor--300);
|
|
37
39
|
--pf-chart-axis--axis--stroke--Color: var(--pf-chart-global--BorderColor);
|
|
38
40
|
--pf-chart-axis--grid--stroke--Color: var(--pf-chart-global--BorderColor);
|
|
39
41
|
--pf-chart-axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
|
|
@@ -61,5 +63,8 @@
|
|
|
61
63
|
--pf-chart-voronoi--labels--Fill: var(--pf-chart-global--tooltip--Fill);
|
|
62
64
|
--pf-chart-tooltip--flyoutStyle--Fill: var(--pf-chart-global--tooltip--bg--Fill);
|
|
63
65
|
--pf-chart-voronoi--flyout--stroke--Fill: var(--pf-chart-global--tooltip--bg--Fill);
|
|
64
|
-
--pf-chart-
|
|
66
|
+
--pf-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-chart-global--tooltip--BorderWidth);
|
|
67
|
+
--pf-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-chart-global--tooltip--BorderColor);
|
|
68
|
+
--pf-chart-voronoi--flyout--stroke--Width: var(--pf-chart-global--tooltip--BorderWidth);
|
|
69
|
+
--pf-chart-voronoi--flyout--stroke--Color: var(--pf-chart-global--tooltip--BorderColor);
|
|
65
70
|
}
|
|
@@ -44,6 +44,8 @@
|
|
|
44
44
|
--pf-chart-global--subtitle--Fill: var(--pf-global--Color--200);
|
|
45
45
|
--pf-chart-global--tooltip--Fill: var(--pf-global--Color--100);
|
|
46
46
|
--pf-chart-global--tooltip--bg--Fill: var(--pf-global--BackgroundColor--300);
|
|
47
|
+
--pf-chart-global--tooltip--BorderWidth: 1;
|
|
48
|
+
--pf-chart-global--tooltip--BorderColor: var(--pf-global--BorderColor--300);
|
|
47
49
|
|
|
48
50
|
// axis
|
|
49
51
|
--pf-chart-axis--axis--stroke--Color: var(--pf-chart-global--BorderColor);
|
|
@@ -87,7 +89,10 @@
|
|
|
87
89
|
--pf-chart-tooltip--flyoutStyle--Fill: var(--pf-chart-global--tooltip--bg--Fill);
|
|
88
90
|
--pf-chart-voronoi--flyout--stroke--Fill: var(--pf-chart-global--tooltip--bg--Fill);
|
|
89
91
|
// border
|
|
90
|
-
--pf-chart-
|
|
92
|
+
--pf-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-chart-global--tooltip--BorderWidth);
|
|
93
|
+
--pf-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-chart-global--tooltip--BorderColor);
|
|
94
|
+
--pf-chart-voronoi--flyout--stroke--Width: var(--pf-chart-global--tooltip--BorderWidth);
|
|
95
|
+
--pf-chart-voronoi--flyout--stroke--Color: var(--pf-chart-global--tooltip--BorderColor);
|
|
91
96
|
}
|
|
92
97
|
// stylelint-enable
|
|
93
98
|
}
|
package/utilities/Text/text.css
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
.pf-u-font-family-sans-serif {
|
|
2
|
+
font-family: var(--pf-global--FontFamily--sans-serif) !important;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.pf-u-font-family-heading-sans-serif {
|
|
6
|
+
font-family: var(--pf-global--FontFamily--heading--sans-serif) !important;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.pf-u-font-family-monospace {
|
|
10
|
+
font-family: var(--pf-global--FontFamily--monospace) !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.pf-u-font-family-redhatVF-sans-serif {
|
|
14
|
+
font-family: var(--pf-global--FontFamily--redhatVF--sans-serif) !important;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pf-u-font-family-redhatVF-heading-sans-serif {
|
|
18
|
+
font-family: var(--pf-global--FontFamily--redhatVF--heading--sans-serif) !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.pf-u-font-family-redhatVF-monospace {
|
|
22
|
+
font-family: var(--pf-global--FontFamily--redhatVF--monospace) !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
1
25
|
.pf-u-font-size-xs {
|
|
2
26
|
font-size: var(--pf-global--FontSize--xs) !important;
|
|
3
27
|
}
|
package/utilities/Text/text.scss
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
// stylelint-disable
|
|
2
2
|
|
|
3
|
+
// Font family options
|
|
4
|
+
$pf-u-font-family-options: (
|
|
5
|
+
font-family-sans-serif: (
|
|
6
|
+
font-family var(--pf-global--FontFamily--sans-serif)
|
|
7
|
+
),
|
|
8
|
+
font-family-heading-sans-serif: (
|
|
9
|
+
font-family var(--pf-global--FontFamily--heading--sans-serif)
|
|
10
|
+
),
|
|
11
|
+
font-family-monospace: (
|
|
12
|
+
font-family var(--pf-global--FontFamily--monospace)
|
|
13
|
+
),
|
|
14
|
+
font-family-redhatVF-sans-serif: (
|
|
15
|
+
font-family var(--pf-global--FontFamily--redhatVF--sans-serif)
|
|
16
|
+
),
|
|
17
|
+
font-family-redhatVF-heading-sans-serif: (
|
|
18
|
+
font-family var(--pf-global--FontFamily--redhatVF--heading--sans-serif)
|
|
19
|
+
),
|
|
20
|
+
font-family-redhatVF-monospace: (
|
|
21
|
+
font-family var(--pf-global--FontFamily--redhatVF--monospace)
|
|
22
|
+
)
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
@include pf-utility-builder($pf-u-font-family-options);
|
|
26
|
+
|
|
3
27
|
// Font size options
|
|
4
28
|
$pf-u-font-size-options: (
|
|
5
29
|
font-size-xs: (
|