@patternfly/patternfly 4.183.2 → 4.184.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.
Files changed (92) hide show
  1. package/components/Accordion/accordion.css +1 -0
  2. package/components/Accordion/accordion.scss +1 -0
  3. package/components/Menu/menu.css +1 -1
  4. package/components/Menu/menu.scss +2 -1
  5. package/components/MenuToggle/menu-toggle.css +18 -1
  6. package/components/MenuToggle/menu-toggle.scss +28 -1
  7. package/components/TextInputGroup/text-input-group.css +6 -0
  8. package/components/TextInputGroup/text-input-group.scss +11 -0
  9. package/docs/components/Accordion/examples/Accordion.md +16 -3
  10. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  11. package/docs/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +68 -9
  13. package/docs/components/ModalBox/examples/ModalBox.md +1 -0
  14. package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
  15. package/docs/components/Page/examples/Page.md +9 -8
  16. package/docs/components/Pagination/examples/Pagination.css +3 -0
  17. package/docs/components/Pagination/examples/Pagination.md +136 -158
  18. package/docs/components/Toolbar/examples/Toolbar.md +22 -26
  19. package/docs/components/Wizard/examples/Wizard.md +19 -18
  20. package/docs/demos/CardView/examples/CardView.md +22 -26
  21. package/docs/demos/DataList/examples/DataList.md +88 -104
  22. package/docs/demos/Form/examples/BasicForms.md +40 -8
  23. package/docs/demos/Modal/examples/Modal.md +7 -4
  24. package/docs/demos/Page/examples/Page.md +1 -0
  25. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  26. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +54 -89
  28. package/docs/demos/Table/examples/Table.md +227 -273
  29. package/docs/demos/Tabs/examples/Tabs.md +64 -88
  30. package/docs/demos/Toolbar/examples/Toolbar.md +88 -104
  31. package/docs/demos/Wizard/examples/Wizard.md +4 -4
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +26 -2
  34. package/patternfly.css +26 -2
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
  37. package/themes/dark/_patternfly-theme-dark.scss +118 -0
  38. package/themes/dark/_variables.scss +94 -0
  39. package/themes/dark/colors.scss +16 -0
  40. package/themes/dark/globals.scss +7 -0
  41. package/themes/dark/mixins.scss +5 -0
  42. package/themes/dark/placeholders.scss +30 -0
  43. package/themes/dark/scss-variables.scss +85 -0
  44. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  45. package/components/Accordion/themes/dark/accordion.css +0 -0
  46. package/components/Alert/themes/dark/alert.css +0 -0
  47. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  48. package/components/Badge/themes/dark/badge.css +0 -0
  49. package/components/Banner/themes/dark/banner.css +0 -0
  50. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  51. package/components/Button/themes/dark/button.css +0 -0
  52. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  53. package/components/Chip/themes/dark/chip.css +0 -0
  54. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  55. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  56. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  57. package/components/DataList/themes/dark/data-list.css +0 -0
  58. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  59. package/components/Drawer/themes/dark/drawer.css +0 -0
  60. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  61. package/components/Form/themes/dark/form.css +0 -0
  62. package/components/FormControl/themes/dark/form-control.css +0 -0
  63. package/components/HelperText/themes/dark/helper-text.css +0 -0
  64. package/components/Hint/themes/dark/hint.css +0 -0
  65. package/components/InputGroup/themes/dark/input-group.css +0 -0
  66. package/components/Label/themes/dark/label.css +0 -0
  67. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  68. package/components/Login/themes/dark/login.css +0 -0
  69. package/components/Masthead/themes/dark/masthead.css +0 -0
  70. package/components/Menu/themes/dark/menu.css +0 -0
  71. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  72. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  73. package/components/Nav/themes/dark/nav.css +0 -0
  74. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  75. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  76. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  77. package/components/Page/themes/dark/page.css +0 -0
  78. package/components/Pagination/themes/dark/pagination.css +0 -0
  79. package/components/Popover/themes/dark/popover.css +0 -0
  80. package/components/Progress/themes/dark/progress.css +0 -0
  81. package/components/SearchInput/themes/dark/search-input.css +0 -0
  82. package/components/Select/themes/dark/select.css +0 -0
  83. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  84. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  85. package/components/Switch/themes/dark/switch.css +0 -0
  86. package/components/Table/themes/dark/table.css +0 -0
  87. package/components/Tabs/themes/dark/tabs.css +0 -0
  88. package/components/Tile/themes/dark/tile.css +0 -0
  89. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  90. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  91. package/components/TreeView/themes/dark/tree-view.css +0 -0
  92. package/components/Wizard/themes/dark/wizard.css +0 -0
package/components/Accordion/accordion.css CHANGED
@@ -121,6 +121,7 @@
121
121
  right: 0;
122
122
  bottom: 0;
123
123
  left: 0;
124
+ pointer-events: none;
124
125
  content: "";
125
126
  border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
126
127
  }
package/components/Accordion/accordion.scss CHANGED
@@ -140,6 +140,7 @@
140
140
  right: 0;
141
141
  bottom: 0;
142
142
  left: 0;
143
+ pointer-events: none;
143
144
  content: "";
144
145
  border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
145
146
  }
package/components/Menu/menu.css CHANGED
@@ -459,7 +459,7 @@
459
459
  --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
460
460
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
461
461
  }
462
- .pf-c-menu__list-item:focus-within {
462
+ .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
463
463
  --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
464
464
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
465
465
  }
package/components/Menu/menu.scss CHANGED
@@ -540,7 +540,8 @@
540
540
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
541
541
  }
542
542
 
543
- &:focus-within {
543
+ &:focus-within,
544
+ &.pf-m-focus {
544
545
  --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
545
546
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
546
547
  }
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -106,6 +106,11 @@
106
106
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
107
107
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
108
108
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
109
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
110
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
111
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
112
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
113
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
109
114
  position: relative;
110
115
  display: inline-flex;
111
116
  align-items: center;
@@ -114,6 +119,7 @@
114
119
  font-size: var(--pf-c-menu-toggle--FontSize);
115
120
  line-height: var(--pf-c-menu-toggle--LineHeight);
116
121
  color: var(--pf-c-menu-toggle--Color);
122
+ cursor: pointer;
117
123
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
118
124
  border: 0;
119
125
  border-radius: var(--pf-c-menu-toggle--BorderRadius);
@@ -195,7 +201,7 @@
195
201
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
196
202
  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
197
203
  }
198
- .pf-c-menu-toggle:focus {
204
+ .pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
199
205
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
200
206
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
201
207
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
@@ -236,6 +242,11 @@
236
242
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
237
243
  height: 100%;
238
244
  }
245
+ .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
246
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
247
+ flex: 1;
248
+ margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
249
+ }
239
250
  .pf-c-menu-toggle.pf-m-split-button {
240
251
  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
241
252
  padding: 0;
@@ -333,6 +344,12 @@
333
344
  color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
334
345
  background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
335
346
  }
347
+ .pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
348
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
349
+ }
350
+ .pf-c-menu-toggle.pf-m-full-width {
351
+ width: 100%;
352
+ }
336
353
 
337
354
  .pf-c-menu-toggle__button {
338
355
  color: inherit;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -150,6 +150,13 @@
150
150
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
151
151
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
152
152
 
153
+ // Typeahead
154
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
155
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
156
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
157
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
158
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
159
+
153
160
  position: relative;
154
161
  display: inline-flex;
155
162
  align-items: center;
@@ -158,6 +165,7 @@
158
165
  font-size: var(--pf-c-menu-toggle--FontSize);
159
166
  line-height: var(--pf-c-menu-toggle--LineHeight);
160
167
  color: var(--pf-c-menu-toggle--Color);
168
+ cursor: pointer;
161
169
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
162
170
  border: 0;
163
171
  border-radius: var(--pf-c-menu-toggle--BorderRadius);
@@ -259,7 +267,8 @@
259
267
  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
260
268
  }
261
269
 
262
- &:focus {
270
+ &:focus,
271
+ &:focus-within {
263
272
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
264
273
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
265
274
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
@@ -314,6 +323,15 @@
314
323
  height: 100%;
315
324
  }
316
325
 
326
+ &.pf-m-typeahead {
327
+ .pf-c-text-input-group {
328
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
329
+
330
+ flex: 1;
331
+ margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
332
+ }
333
+ }
334
+
317
335
  &.pf-m-split-button {
318
336
  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
319
337
 
@@ -462,6 +480,15 @@
462
480
  background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
463
481
  }
464
482
  }
483
+
484
+ &.pf-m-typeahead,
485
+ &.pf-m-split-button {
486
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
487
+ }
488
+
489
+ &.pf-m-full-width {
490
+ width: 100%;
491
+ }
465
492
  }
466
493
 
467
494
  .pf-c-menu-toggle__button {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -43,6 +43,12 @@
43
43
  --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
44
44
  pointer-events: none;
45
45
  }
46
+ .pf-c-text-input-group.pf-m-plain {
47
+ --pf-c-text-input-group--BackgroundColor: transparent;
48
+ }
49
+ .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::before, .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::after {
50
+ border: 0;
51
+ }
46
52
 
47
53
  .pf-c-text-input-group__main {
48
54
  display: flex;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -61,6 +61,17 @@
61
61
 
62
62
  pointer-events: none;
63
63
  }
64
+
65
+ &.pf-m-plain {
66
+ --pf-c-text-input-group--BackgroundColor: transparent;
67
+
68
+ .pf-c-text-input-group__text {
69
+ &::before,
70
+ &::after {
71
+ border: 0;
72
+ }
73
+ }
74
+ }
64
75
  }
65
76
 
66
77
  .pf-c-text-input-group__main {
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -275,9 +275,9 @@ cssPrefix: pf-c-accordion
275
275
  </button>
276
276
  </h3>
277
277
  <div class="pf-c-accordion__expanded-content pf-m-expanded">
278
- <div
279
- class="pf-c-accordion__expanded-content-body"
280
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
278
+ <div class="pf-c-accordion__expanded-content-body">
279
+ <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
280
+ </div>
281
281
  </div>
282
282
 
283
283
  <h3>
@@ -293,6 +293,19 @@ cssPrefix: pf-c-accordion
293
293
  <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
294
294
  </div>
295
295
 
296
+ <h3>
297
+ <button class="pf-c-accordion__toggle" type="button" aria-expanded="false">
298
+ <span class="pf-c-accordion__toggle-text">Item four</span>
299
+
300
+ <span class="pf-c-accordion__toggle-icon">
301
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
302
+ </span>
303
+ </button>
304
+ </h3>
305
+ <div class="pf-c-accordion__expanded-content" hidden>
306
+ <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
307
+ </div>
308
+
296
309
  <h3>
297
310
  <button class="pf-c-accordion__toggle" type="button" aria-expanded="false">
298
311
  <span class="pf-c-accordion__toggle-text">Item five</span>
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -1264,25 +1264,25 @@ Column fill will modify the default placement of description list groups to fill
1264
1264
 
1265
1265
  ### Usage
1266
1266
 
1267
- | Class | Applied to | Outcome |
1268
- | ------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1269
- | `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
1270
- | `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
1271
- | `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1272
- | `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1273
- | `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
1274
- | `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1275
- | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1276
- | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1277
- | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1278
- | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
1279
- | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
1280
- | `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
1281
- | `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
1282
- | `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
1283
- | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
1284
- | `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1285
- | `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1267
+ | Class | Applied to | Outcome |
1268
+ | ------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1269
+ | `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
1270
+ | `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
1271
+ | `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
1272
+ | `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
1273
+ | `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
1274
+ | `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
1275
+ | `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
1276
+ | `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
1277
+ | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1278
+ | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
1279
+ | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
1280
+ | `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
1281
+ | `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
1282
+ | `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
1283
+ | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
1284
+ | `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1285
+ | `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1286
1286
 
1287
1287
  <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
1288
1288
  | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |