@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99
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/Card/card.css +1 -0
- package/components/Card/card.scss +1 -0
- package/components/Check/check.css +10 -3
- package/components/Check/check.scss +17 -4
- package/components/Masthead/masthead.css +17 -9
- package/components/Masthead/masthead.scss +18 -9
- package/components/MenuToggle/menu-toggle.css +4 -4
- package/components/MenuToggle/menu-toggle.scss +4 -4
- package/components/ModalBox/modal-box.css +11 -7
- package/components/ModalBox/modal-box.scss +27 -12
- package/components/Nav/nav.css +64 -110
- package/components/Nav/nav.scss +70 -143
- package/components/Page/page.css +9 -17
- package/components/Page/page.scss +10 -23
- package/components/Radio/radio.css +12 -5
- package/components/Radio/radio.scss +21 -6
- package/components/Table/table-grid.css +30 -35
- package/components/Table/table-grid.scss +44 -32
- package/components/Table/table-scrollable.css +14 -6
- package/components/Table/table-scrollable.scss +6 -1
- package/components/Table/table-tree-view.css +5 -5
- package/components/Table/table-tree-view.scss +14 -8
- package/components/Table/table.css +90 -254
- package/components/Table/table.scss +158 -347
- package/components/Toolbar/toolbar.css +66 -2
- package/components/Toolbar/toolbar.scss +21 -2
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +12 -12
- package/docs/components/Accordion/examples/Accordion.md +19 -19
- package/docs/components/ActionList/examples/ActionList.md +5 -5
- package/docs/components/Alert/examples/Alert.md +26 -26
- package/docs/components/AppLauncher/deprecated/application-launcher.md +31 -31
- package/docs/components/Avatar/examples/Avatar.md +8 -8
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +3 -3
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
- package/docs/components/Badge/examples/Badge.md +6 -6
- package/docs/components/Banner/examples/Banner.md +17 -17
- package/docs/components/Brand/examples/Brand.css +3 -3
- package/docs/components/Brand/examples/Brand.md +7 -7
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +12 -12
- package/docs/components/Button/examples/Button.css +2 -2
- package/docs/components/Button/examples/Button.md +35 -35
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +29 -29
- package/docs/components/Card/examples/Card.md +30 -30
- package/docs/components/Check/examples/Check.md +12 -12
- package/docs/components/Chip/examples/Chip.md +21 -21
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +19 -19
- package/docs/components/CodeBlock/examples/CodeBlock.md +8 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +14 -14
- package/docs/components/Content/examples/Content.md +5 -5
- package/docs/components/ContextSelector/deprecated/context-selector.md +23 -23
- package/docs/components/DataList/examples/DataList.md +177 -112
- package/docs/components/DatePicker/examples/DatePicker.md +10 -10
- package/docs/components/DescriptionList/examples/DescriptionList.md +29 -29
- package/docs/components/Divider/examples/Divider.md +7 -7
- package/docs/components/DragDrop/examples/DragDrop.md +5 -5
- package/docs/components/Drawer/examples/Drawer.md +36 -36
- package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/docs/components/Dropdown/deprecated/Dropdown.md +47 -47
- package/docs/components/DualListSelector/examples/DualListSelector.md +41 -41
- package/docs/components/EmptyState/examples/EmptyState.md +21 -21
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +18 -18
- package/docs/components/FileUpload/examples/FileUpload.md +8 -8
- package/docs/components/Form/examples/Form.md +52 -52
- package/docs/components/FormControl/examples/FormControl.md +22 -22
- package/docs/components/HelperText/examples/HelperText.md +11 -11
- package/docs/components/Hint/examples/Hint.md +6 -6
- package/docs/components/Icon/examples/Icon.md +13 -13
- package/docs/components/InlineEdit/examples/InlineEdit.md +54 -138
- package/docs/components/InputGroup/examples/InputGroup.md +10 -10
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/Label/examples/Label.css +4 -4
- package/docs/components/Label/examples/Label.md +45 -45
- package/docs/components/List/examples/List.md +6 -6
- package/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/docs/components/LogViewer/examples/LogViewer.md +45 -165
- package/docs/components/Login/examples/Login.md +21 -21
- package/docs/components/Masthead/examples/masthead.md +7 -7
- package/docs/components/Menu/examples/Menu.md +60 -60
- package/docs/components/MenuToggle/examples/MenuToggle.md +34 -106
- package/docs/components/ModalBox/examples/ModalBox.md +75 -34
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +21 -21
- package/docs/components/Nav/examples/Navigation.css +20 -3
- package/docs/components/Nav/examples/Navigation.md +44 -50
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +36 -36
- package/docs/components/NumberInput/examples/NumberInput.md +13 -13
- package/docs/components/OptionsMenu/deprecated/options-menu.md +22 -22
- package/docs/components/OverflowMenu/examples/overflow-menu.md +20 -20
- package/docs/components/Page/deprecated/PageHeader.md +30 -30
- package/docs/components/Page/examples/Page.md +55 -54
- package/docs/components/Pagination/examples/Pagination.md +25 -25
- package/docs/components/Panel/examples/Panel.md +10 -10
- package/docs/components/Popover/examples/Popover.md +30 -30
- package/docs/components/Progress/examples/Progress.md +31 -31
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +17 -17
- package/docs/components/Radio/examples/Radio.md +9 -9
- package/docs/components/Select/deprecated/Select.md +110 -110
- package/docs/components/Sidebar/examples/Sidebar.md +16 -16
- package/docs/components/SimpleList/examples/SimpleList.md +9 -9
- package/docs/components/Skeleton/examples/Skeleton.md +14 -14
- package/docs/components/SkipToContent/examples/SkipToContent.md +4 -4
- package/docs/components/Slider/examples/Slider.md +33 -33
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +14 -14
- package/docs/components/TabContent/examples/TabContent.md +10 -10
- package/docs/components/Table/examples/Table.md +5395 -15077
- package/docs/components/Tabs/examples/Tabs.md +39 -39
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +1 -1
- package/docs/components/Tile/examples/Tile.md +12 -12
- package/docs/components/Timestamp/examples/Timestamp.md +4 -4
- package/docs/components/Title/examples/Title.md +20 -20
- package/docs/components/ToggleGroup/examples/toggle-group.md +10 -10
- package/docs/components/Toolbar/examples/Toolbar.md +68 -200
- package/docs/components/Tooltip/examples/Tooltip.md +9 -9
- package/docs/components/TreeView/examples/TreeView.md +31 -31
- package/docs/components/Truncate/examples/Truncate.md +8 -8
- package/docs/components/Wizard/examples/Wizard.md +46 -46
- package/docs/demos/AboutModal/examples/AboutModal.md +4 -52
- package/docs/demos/Alert/examples/Alert.md +12 -156
- package/docs/demos/BackToTop/examples/BackToTop.md +4 -52
- package/docs/demos/Banner/examples/Banner.md +9 -105
- package/docs/demos/Card/examples/Card.md +12 -19
- package/docs/demos/CardView/examples/CardView.md +5 -65
- package/docs/demos/ContextSelector/examples/ContextSelector.md +12 -156
- package/docs/demos/Dashboard/examples/Dashboard.md +4 -52
- package/docs/demos/DataList/examples/DataList.md +200 -553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -156
- package/docs/demos/Drawer/examples/Drawer.md +20 -260
- package/docs/demos/JumpLinks/examples/JumpLinks.md +24 -312
- package/docs/demos/Masthead/examples/Masthead.md +23 -255
- package/docs/demos/Modal/examples/Modal.md +24 -312
- package/docs/demos/Nav/examples/Nav.md +69 -461
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +20 -260
- package/docs/demos/Page/examples/Page.md +39 -505
- package/docs/demos/Page/examples/Penta.md +120 -53
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -455
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -52
- package/docs/demos/Table/examples/Table.md +1598 -6045
- package/docs/demos/Tabs/examples/Tabs.md +143 -499
- package/docs/demos/Toolbar/examples/Toolbar.md +245 -925
- package/docs/demos/Wizard/examples/Wizard.md +36 -468
- package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
- package/docs/layouts/Flex/examples/Flex.md +76 -76
- package/docs/layouts/Gallery/examples/Gallery.md +6 -6
- package/docs/layouts/Grid/examples/Grid.md +8 -8
- package/docs/layouts/Level/examples/Level.md +4 -4
- package/docs/layouts/Split/examples/Split.md +6 -6
- package/docs/layouts/Stack/examples/Stack.md +5 -5
- package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
- package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
- package/docs/utilities/Display/examples/Display.md +9 -9
- package/docs/utilities/Flex/examples/Flex.md +32 -32
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Sizing/examples/Sizing.md +41 -41
- package/docs/utilities/Spacing/examples/Spacing.md +11 -11
- package/docs/utilities/Text/examples/Text.md +28 -28
- package/package.json +2 -1
- package/patternfly-no-globals.css +347 -463
- package/patternfly-theme-dark-unversioned.css +347 -463
- package/patternfly.css +347 -463
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Table/themes/dark/table.scss +0 -16
|
@@ -26,15 +26,15 @@ section: utility-classes
|
|
|
26
26
|
|
|
27
27
|
| Class | Applied to | Outcome |
|
|
28
28
|
| -- | -- | -- |
|
|
29
|
-
| `.pf-
|
|
30
|
-
| `.pf-
|
|
31
|
-
| `.pf-
|
|
32
|
-
| `.pf-
|
|
33
|
-
| `.pf-
|
|
34
|
-
| `.pf-
|
|
35
|
-
| `.pf-
|
|
36
|
-
| `.pf-
|
|
37
|
-
| `.pf-
|
|
29
|
+
| `.pf-v6-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
|
|
30
|
+
| `.pf-v6-u-w-inherit{-on-[breakpoint]}` | `*` | Sets width: inherit |
|
|
31
|
+
| `.pf-v6-u-w-0{-on-[breakpoint]}` | `*` | Sets width: 0% |
|
|
32
|
+
| `.pf-v6-u-w-25{-on-[breakpoint]}` | `*` | Sets width: 25% |
|
|
33
|
+
| `.pf-v6-u-w-33{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3) |
|
|
34
|
+
| `.pf-v6-u-w-50{-on-[breakpoint]}` | `*` | Sets width: 50% |
|
|
35
|
+
| `.pf-v6-u-w-66{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3 \* 2) |
|
|
36
|
+
| `.pf-v6-u-w-75{-on-[breakpoint]}` | `*` | Sets width: 75% |
|
|
37
|
+
| `.pf-v6-u-w-100{-on-[breakpoint]}` | `*` | Sets width: 100% |
|
|
38
38
|
|
|
39
39
|
### Width viewport units
|
|
40
40
|
|
|
@@ -54,12 +54,12 @@ section: utility-classes
|
|
|
54
54
|
|
|
55
55
|
| Class | Applied to | Outcome |
|
|
56
56
|
| -- | -- | -- |
|
|
57
|
-
| `.pf-
|
|
58
|
-
| `.pf-
|
|
59
|
-
| `.pf-
|
|
60
|
-
| `.pf-
|
|
61
|
-
| `.pf-
|
|
62
|
-
| `.pf-
|
|
57
|
+
| `.pf-v6-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
|
|
58
|
+
| `.pf-v6-u-w-33vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3) |
|
|
59
|
+
| `.pf-v6-u-w-50vw{-on-[breakpoint]}` | `*` | Sets width: 50vw |
|
|
60
|
+
| `.pf-v6-u-w-66vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3 \* 2) |
|
|
61
|
+
| `.pf-v6-u-w-75vw{-on-[breakpoint]}` | `*` | Sets width: 75vw |
|
|
62
|
+
| `.pf-v6-u-w-100vw{-on-[breakpoint]}` | `*` | Sets width: 100vw |
|
|
63
63
|
|
|
64
64
|
### Height base and percentage units
|
|
65
65
|
|
|
@@ -94,15 +94,15 @@ section: utility-classes
|
|
|
94
94
|
|
|
95
95
|
| Class | Applied to | Outcome |
|
|
96
96
|
| -- | -- | -- |
|
|
97
|
-
| `.pf-
|
|
98
|
-
| `.pf-
|
|
99
|
-
| `.pf-
|
|
100
|
-
| `.pf-
|
|
101
|
-
| `.pf-
|
|
102
|
-
| `.pf-
|
|
103
|
-
| `.pf-
|
|
104
|
-
| `.pf-
|
|
105
|
-
| `.pf-
|
|
97
|
+
| `.pf-v6-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
|
|
98
|
+
| `.pf-v6-u-h-inherit{-on-[breakpoint]}` | `*` | Sets height: inherit |
|
|
99
|
+
| `.pf-v6-u-h-0{-on-[breakpoint]}` | `*` | Sets height: 0% |
|
|
100
|
+
| `.pf-v6-u-h-25{-on-[breakpoint]}`| `*` | Sets height: 25% |
|
|
101
|
+
| `.pf-v6-u-h-33{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3) |
|
|
102
|
+
| `.pf-v6-u-h-50{-on-[breakpoint]}`| `*` | Sets height: 50% |
|
|
103
|
+
| `.pf-v6-u-h-66{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3 \* 2) |
|
|
104
|
+
| `.pf-v6-u-h-75{-on-[breakpoint]}`| `*` | Sets height: 75% |
|
|
105
|
+
| `.pf-v6-u-h-100{-on-[breakpoint]}` | `*` | Sets height: 100% |
|
|
106
106
|
|
|
107
107
|
### Height viewport units
|
|
108
108
|
|
|
@@ -134,12 +134,12 @@ section: utility-classes
|
|
|
134
134
|
|
|
135
135
|
| Class | Applied to | Outcome |
|
|
136
136
|
| -- | -- | -- |
|
|
137
|
-
| `.pf-
|
|
138
|
-
| `.pf-
|
|
139
|
-
| `.pf-
|
|
140
|
-
| `.pf-
|
|
141
|
-
| `.pf-
|
|
142
|
-
| `.pf-
|
|
137
|
+
| `.pf-v6-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
|
|
138
|
+
| `.pf-v6-u-h-33vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3) |
|
|
139
|
+
| `.pf-v6-u-h-50vh{-on-[breakpoint]}` | `*` | Sets height: 50vh |
|
|
140
|
+
| `.pf-v6-u-h-66vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3 \* 2) |
|
|
141
|
+
| `.pf-v6-u-h-75vh{-on-[breakpoint]}` | `*` | Sets height: 75vh |
|
|
142
|
+
| `.pf-v6-u-h-100vh{-on-[breakpoint]}` | `*` | Sets height: 100vh |
|
|
143
143
|
|
|
144
144
|
### Min width
|
|
145
145
|
|
|
@@ -185,15 +185,15 @@ section: utility-classes
|
|
|
185
185
|
|
|
186
186
|
| Class | Applied to | Outcome |
|
|
187
187
|
| -- | -- | -- |
|
|
188
|
-
| `.pf-
|
|
189
|
-
| `.pf-
|
|
188
|
+
| `.pf-v6-u-min-width` | `*` | Sets min-width: `var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})`. |
|
|
189
|
+
| `.pf-v6-u-max-width` | `*` | Sets min-width: `var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})`. |
|
|
190
190
|
|
|
191
|
-
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-
|
|
191
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-width--MinWidth-on-lg**
|
|
192
192
|
|
|
193
193
|
| Custom property | Applied to | Outcome |
|
|
194
194
|
| -- | -- | -- |
|
|
195
|
-
| `--pf-
|
|
196
|
-
| `--pf-
|
|
195
|
+
| `--pf-v6-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-v6-u-min-width` | Modifies the min width custom property. |
|
|
196
|
+
| `--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]}: {width}` | `.pf-v6-u-max-width` | Modifies the max width custom property. |
|
|
197
197
|
|
|
198
198
|
### Min height
|
|
199
199
|
|
|
@@ -230,7 +230,7 @@ section: utility-classes
|
|
|
230
230
|
```html
|
|
231
231
|
<div
|
|
232
232
|
class="pf-v5-u-min-height pf-v5-u-max-height"
|
|
233
|
-
style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-
|
|
233
|
+
style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
|
|
234
234
|
>Min-height 20ch, max-height 30ch, max-height-on-md 50ch, max-height-on-xl 70ch example</div>
|
|
235
235
|
|
|
236
236
|
```
|
|
@@ -239,12 +239,12 @@ section: utility-classes
|
|
|
239
239
|
|
|
240
240
|
| Class | Applied to | Outcome |
|
|
241
241
|
| -- | -- | -- |
|
|
242
|
-
| `.pf-
|
|
243
|
-
| `.pf-
|
|
242
|
+
| `.pf-v6-u-min-height` | `*` | Sets min-height: `var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})`. |
|
|
243
|
+
| `.pf-v6-u-max-height` | `*` | Sets max-height: `var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})`. |
|
|
244
244
|
|
|
245
|
-
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-
|
|
245
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-height--MinHeight-on-lg**
|
|
246
246
|
|
|
247
247
|
| Custom property | Applied to | Outcome |
|
|
248
248
|
| -- | -- | -- |
|
|
249
|
-
| `--pf-
|
|
250
|
-
| `--pf-
|
|
249
|
+
| `--pf-v6-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-v6-u-min-height` | Modifies the min height custom property. |
|
|
250
|
+
| `--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-v6-u-max-height` | Modifies the max height custom property. |
|
|
@@ -118,7 +118,7 @@ pf: 'test'
|
|
|
118
118
|
|
|
119
119
|
### Overview
|
|
120
120
|
|
|
121
|
-
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-
|
|
121
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-m-sm-on-lg**
|
|
122
122
|
|
|
123
123
|
### Margin properties
|
|
124
124
|
|
|
@@ -150,18 +150,18 @@ pf: 'test'
|
|
|
150
150
|
| -- | -- |
|
|
151
151
|
| `auto` | auto |
|
|
152
152
|
| `0` | 0 |
|
|
153
|
-
| `xs` | var(--pf-
|
|
154
|
-
| `sm` | var(--pf-
|
|
155
|
-
| `md` | var(--pf-
|
|
156
|
-
| `lg` | var(--pf-
|
|
157
|
-
| `xl` | var(--pf-
|
|
158
|
-
| `2xl` | var(--pf-
|
|
159
|
-
| `3xl` | var(--pf-
|
|
160
|
-
| `4xl` | var(--pf-
|
|
153
|
+
| `xs` | var(--pf-v6-global--spacer--xs) |
|
|
154
|
+
| `sm` | var(--pf-v6-global--spacer--sm) |
|
|
155
|
+
| `md` | var(--pf-v6-global--spacer--md) |
|
|
156
|
+
| `lg` | var(--pf-v6-global--spacer--lg) |
|
|
157
|
+
| `xl` | var(--pf-v6-global--spacer--xl) |
|
|
158
|
+
| `2xl` | var(--pf-v6-global--spacer--2xl) |
|
|
159
|
+
| `3xl` | var(--pf-v6-global--spacer--3xl) |
|
|
160
|
+
| `4xl` | var(--pf-v6-global--spacer--4xl) |
|
|
161
161
|
|
|
162
162
|
### Usage
|
|
163
163
|
|
|
164
164
|
| Class | Applied to | Outcome |
|
|
165
165
|
| -- | -- | -- |
|
|
166
|
-
| `.pf-
|
|
167
|
-
| `.pf-
|
|
166
|
+
| `.pf-v6-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}` | `*` | Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
|
|
167
|
+
| `.pf-v6-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}` | `*` | Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |
|
|
@@ -138,7 +138,7 @@ These colors are best used with the ["inverse" background colors](/utility-class
|
|
|
138
138
|
<h4>
|
|
139
139
|
<strong>Wrap</strong>
|
|
140
140
|
</h4>
|
|
141
|
-
<div class="pf-
|
|
141
|
+
<div class="pf-v6-u-text-wrap">
|
|
142
142
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.</p>
|
|
143
143
|
<br />
|
|
144
144
|
</div>
|
|
@@ -147,7 +147,7 @@ These colors are best used with the ["inverse" background colors](/utility-class
|
|
|
147
147
|
</h4>
|
|
148
148
|
<div>
|
|
149
149
|
<p
|
|
150
|
-
class="pf-
|
|
150
|
+
class="pf-v6-u-text-truncate"
|
|
151
151
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.</p>
|
|
152
152
|
</div>
|
|
153
153
|
|
|
@@ -161,34 +161,34 @@ These text utilities can be used to modify text within the PatternFly framework.
|
|
|
161
161
|
|
|
162
162
|
Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
|
|
163
163
|
|
|
164
|
-
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-
|
|
164
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-font-size-xl-on-lg**
|
|
165
165
|
|
|
166
166
|
### Usage
|
|
167
167
|
|
|
168
168
|
| Class | Applied to | Outcome |
|
|
169
169
|
| - | - | - |
|
|
170
|
-
| `.pf-
|
|
171
|
-
| `.pf-
|
|
172
|
-
| `.pf-
|
|
173
|
-
| `.pf-
|
|
174
|
-
| `.pf-
|
|
175
|
-
| `.pf-
|
|
176
|
-
| `.pf-
|
|
177
|
-
| `.pf-
|
|
178
|
-
| `.pf-
|
|
179
|
-
| `.pf-
|
|
180
|
-
| `.pf-
|
|
181
|
-
| `.pf-
|
|
182
|
-
| `.pf-
|
|
183
|
-
| `.pf-
|
|
184
|
-
| `.pf-
|
|
185
|
-
| `.pf-
|
|
186
|
-
| `.pf-
|
|
187
|
-
| `.pf-
|
|
188
|
-
| `.pf-
|
|
189
|
-
| `.pf-
|
|
190
|
-
| `.pf-
|
|
191
|
-
| `.pf-
|
|
192
|
-
| `.pf-
|
|
193
|
-
| `.pf-
|
|
194
|
-
| `.pf-
|
|
170
|
+
| `.pf-v6-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 |
|
|
171
|
+
| `.pf-v6-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
|
|
172
|
+
| `.pf-v6-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
|
|
173
|
+
| `.pf-v6-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
|
|
174
|
+
| `.pf-v6-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
|
|
175
|
+
| `.pf-v6-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
|
|
176
|
+
| `.pf-v6-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
|
|
177
|
+
| `.pf-v6-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
|
|
178
|
+
| `.pf-v6-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
|
|
179
|
+
| `.pf-v6-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
|
|
180
|
+
| `.pf-v6-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
|
|
181
|
+
| `.pf-v6-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
|
|
182
|
+
| `.pf-v6-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
|
|
183
|
+
| `.pf-v6-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
|
|
184
|
+
| `.pf-v6-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
|
|
185
|
+
| `.pf-v6-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
|
|
186
|
+
| `.pf-v6-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
|
|
187
|
+
| `.pf-v6-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
|
|
188
|
+
| `.pf-v6-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
|
|
189
|
+
| `.pf-v6-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
|
|
190
|
+
| `.pf-v6-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
|
|
191
|
+
| `.pf-v6-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
|
|
192
|
+
| `.pf-v6-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
|
|
193
|
+
| `.pf-v6-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
|
|
194
|
+
| `.pf-v6-u-text-truncate` | `*` | Truncates text field |
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.0.0-alpha.
|
|
4
|
+
"version": "6.0.0-alpha.99",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"a11y": "patternfly-a11y --config patternfly-a11y.config",
|
|
9
|
+
"backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
|
|
9
10
|
"backstop:test": "backstop test --config='backstop.js'",
|
|
10
11
|
"backstop:approve": "backstop approve --config='backstop.js'",
|
|
11
12
|
"build-patternfly": "gulp buildPatternfly",
|