@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.11

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 (71) hide show
  1. package/RELEASE-NOTES.md +30 -0
  2. package/base/_common.scss +0 -22
  3. package/base/patternfly-common.css +0 -10
  4. package/components/Card/card.css +9 -12
  5. package/components/Card/card.scss +11 -17
  6. package/components/ChipGroup/chip-group.css +27 -17
  7. package/components/ChipGroup/chip-group.scss +36 -22
  8. package/components/Drawer/drawer.css +0 -1
  9. package/components/Drawer/drawer.scss +0 -1
  10. package/components/Dropdown/dropdown.css +15 -0
  11. package/components/Dropdown/dropdown.scss +20 -0
  12. package/components/EmptyState/empty-state.css +46 -52
  13. package/components/EmptyState/empty-state.scss +58 -57
  14. package/components/FormControl/form-control.css +1 -1
  15. package/components/FormControl/themes/dark/form-control.scss +1 -1
  16. package/components/InputGroup/input-group.css +14 -0
  17. package/components/InputGroup/input-group.scss +9 -0
  18. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  19. package/components/LabelGroup/label-group.css +26 -22
  20. package/components/LabelGroup/label-group.scss +31 -26
  21. package/components/Menu/menu.css +4 -0
  22. package/components/Menu/menu.scss +5 -0
  23. package/components/Pagination/pagination.css +228 -0
  24. package/components/Pagination/pagination.scss +30 -1
  25. package/components/Popover/popover.css +2 -7
  26. package/components/Popover/themes/dark/popover.scss +2 -8
  27. package/components/Slider/slider.css +0 -7
  28. package/components/Slider/slider.scss +0 -9
  29. package/components/Toolbar/toolbar.css +30 -2
  30. package/components/Toolbar/toolbar.scss +37 -3
  31. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  32. package/components/Tooltip/tooltip.css +7 -12
  33. package/components/Tooltip/tooltip.scss +6 -3
  34. package/docs/components/Card/examples/Card.md +61 -44
  35. package/docs/components/Check/examples/Check.md +2 -6
  36. package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
  37. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  38. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  39. package/docs/components/DataList/examples/DataList.md +104 -65
  40. package/docs/components/Dropdown/examples/Dropdown.md +263 -23
  41. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  42. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  43. package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
  44. package/docs/components/Menu/examples/Menu.md +1 -1
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
  46. package/docs/components/Pagination/examples/Pagination.md +129 -30
  47. package/docs/components/Slider/examples/Slider.md +6 -6
  48. package/docs/components/Table/examples/Table.md +1117 -700
  49. package/docs/components/Tabs/examples/Tabs.md +1 -1
  50. package/docs/components/Toolbar/examples/Toolbar.md +67 -46
  51. package/docs/components/Wizard/examples/Wizard.md +4 -7
  52. package/docs/demos/Banner/examples/Banner.md +2 -2
  53. package/docs/demos/Card/examples/Card.md +144 -109
  54. package/docs/demos/CardView/examples/CardView.md +9 -8
  55. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  56. package/docs/demos/DataList/examples/DataList.md +138 -89
  57. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  58. package/docs/demos/Nav/examples/Nav.md +671 -718
  59. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +17 -13
  60. package/docs/demos/Table/examples/Table.md +439 -297
  61. package/docs/demos/Tabs/examples/Tabs.md +90 -569
  62. package/docs/demos/Toolbar/examples/Toolbar.md +1773 -163
  63. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  64. package/package.json +5 -5
  65. package/patternfly-base-no-reset.css +0 -10
  66. package/patternfly-base.css +0 -10
  67. package/patternfly-no-reset.css +409 -143
  68. package/patternfly.css +409 -143
  69. package/patternfly.min.css +1 -1
  70. package/patternfly.min.css.map +1 -1
  71. package/sass-utilities/scss-variables.scss +0 -1
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -7576,7 +7576,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
7576
7576
  | `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
7577
7577
  | `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
7578
7578
  | `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
7579
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
7579
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7580
7580
  | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
7581
7581
  | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
7582
7582
  | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -26,12 +26,16 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
29
+ | Class | Applied to | Outcome |
30
+ | ------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
36
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
37
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
38
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
35
39
 
36
40
  ### Special notes
37
41
 
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
489
493
  role="listbox"
490
494
  aria-labelledby="toolbar-toggle-group-example-select-name-label"
491
495
  hidden
492
- style="width: 175px"
493
496
  >
494
497
  <li role="presentation">
495
498
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
520
523
  </li>
521
524
  </ul>
522
525
  </div>
523
- <div class="pf-c-text-input-group">
526
+ <div class="pf-c-text-input-group" style="width: auto">
524
527
  <div class="pf-c-text-input-group__main pf-m-icon">
525
528
  <span class="pf-c-text-input-group__text">
526
529
  <span class="pf-c-text-input-group__icon">
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
810
813
  role="listbox"
811
814
  aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
812
815
  hidden
813
- style="width: 175px"
814
816
  >
815
817
  <li role="presentation">
816
818
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
841
843
  </li>
842
844
  </ul>
843
845
  </div>
844
- <div class="pf-c-text-input-group">
846
+ <div class="pf-c-text-input-group" style="width: auto">
845
847
  <div class="pf-c-text-input-group__main pf-m-icon">
846
848
  <span class="pf-c-text-input-group__text">
847
849
  <span class="pf-c-text-input-group__icon">
@@ -1115,11 +1117,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1115
1117
  class="pf-c-dropdown__toggle-check"
1116
1118
  for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1117
1119
  >
1118
- <input
1119
- type="checkbox"
1120
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1121
- aria-label="Select all"
1122
- />
1120
+ <div class="pf-c-check pf-m-standalone">
1121
+ <input
1122
+ class="pf-c-check__input"
1123
+ type="checkbox"
1124
+ id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1125
+ aria-label="Select all"
1126
+ />
1127
+ </div>
1123
1128
  </label>
1124
1129
 
1125
1130
  <button
@@ -1192,7 +1197,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1192
1197
  role="listbox"
1193
1198
  aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1194
1199
  hidden
1195
- style="width: 175px"
1196
1200
  >
1197
1201
  <li role="presentation">
1198
1202
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1223,7 +1227,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1223
1227
  </li>
1224
1228
  </ul>
1225
1229
  </div>
1226
- <div class="pf-c-text-input-group">
1230
+ <div class="pf-c-text-input-group" style="width: auto">
1227
1231
  <div class="pf-c-text-input-group__main pf-m-icon">
1228
1232
  <span class="pf-c-text-input-group__text">
1229
1233
  <span class="pf-c-text-input-group__icon">
@@ -1656,11 +1660,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1656
1660
  class="pf-c-dropdown__toggle-check"
1657
1661
  for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1658
1662
  >
1659
- <input
1660
- type="checkbox"
1661
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1662
- aria-label="Select all"
1663
- />
1663
+ <div class="pf-c-check pf-m-standalone">
1664
+ <input
1665
+ class="pf-c-check__input"
1666
+ type="checkbox"
1667
+ id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1668
+ aria-label="Select all"
1669
+ />
1670
+ </div>
1664
1671
  </label>
1665
1672
 
1666
1673
  <button
@@ -1774,7 +1781,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1774
1781
  role="listbox"
1775
1782
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1776
1783
  hidden
1777
- style="width: 175px"
1778
1784
  >
1779
1785
  <li role="presentation">
1780
1786
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1805,7 +1811,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1805
1811
  </li>
1806
1812
  </ul>
1807
1813
  </div>
1808
- <div class="pf-c-text-input-group">
1814
+ <div class="pf-c-text-input-group" style="width: auto">
1809
1815
  <div class="pf-c-text-input-group__main pf-m-icon">
1810
1816
  <span class="pf-c-text-input-group__text">
1811
1817
  <span class="pf-c-text-input-group__icon">
@@ -2192,11 +2198,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2192
2198
  class="pf-c-dropdown__toggle-check"
2193
2199
  for="toolbar-selected-filters-example-bulk-select-toggle-check"
2194
2200
  >
2195
- <input
2196
- type="checkbox"
2197
- id="toolbar-selected-filters-example-bulk-select-toggle-check"
2198
- aria-label="Select all"
2199
- />
2201
+ <div class="pf-c-check pf-m-standalone">
2202
+ <input
2203
+ class="pf-c-check__input"
2204
+ type="checkbox"
2205
+ id="toolbar-selected-filters-example-bulk-select-toggle-check"
2206
+ aria-label="Select all"
2207
+ />
2208
+ </div>
2200
2209
  </label>
2201
2210
 
2202
2211
  <button
@@ -3104,11 +3113,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3104
3113
  class="pf-c-dropdown__toggle-check"
3105
3114
  for="toolbar-stacked-example-bulk-select-toggle-check"
3106
3115
  >
3107
- <input
3108
- type="checkbox"
3109
- id="toolbar-stacked-example-bulk-select-toggle-check"
3110
- aria-label="Select all"
3111
- />
3116
+ <div class="pf-c-check pf-m-standalone">
3117
+ <input
3118
+ class="pf-c-check__input"
3119
+ type="checkbox"
3120
+ id="toolbar-stacked-example-bulk-select-toggle-check"
3121
+ aria-label="Select all"
3122
+ />
3123
+ </div>
3112
3124
  </label>
3113
3125
 
3114
3126
  <button
@@ -3617,11 +3629,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3617
3629
  class="pf-c-dropdown__toggle-check"
3618
3630
  for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3619
3631
  >
3620
- <input
3621
- type="checkbox"
3622
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3623
- aria-label="Select all"
3624
- />
3632
+ <div class="pf-c-check pf-m-standalone">
3633
+ <input
3634
+ class="pf-c-check__input"
3635
+ type="checkbox"
3636
+ id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3637
+ aria-label="Select all"
3638
+ />
3639
+ </div>
3625
3640
  </label>
3626
3641
 
3627
3642
  <button
@@ -3765,11 +3780,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3765
3780
  class="pf-c-dropdown__toggle-check"
3766
3781
  for="toolbar-expanded-elements-example-bulk-select-toggle-check"
3767
3782
  >
3768
- <input
3769
- type="checkbox"
3770
- id="toolbar-expanded-elements-example-bulk-select-toggle-check"
3771
- aria-label="Select all"
3772
- />
3783
+ <div class="pf-c-check pf-m-standalone">
3784
+ <input
3785
+ class="pf-c-check__input"
3786
+ type="checkbox"
3787
+ id="toolbar-expanded-elements-example-bulk-select-toggle-check"
3788
+ aria-label="Select all"
3789
+ />
3790
+ </div>
3773
3791
  </label>
3774
3792
 
3775
3793
  <button
@@ -3842,7 +3860,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3842
3860
  role="listbox"
3843
3861
  aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3844
3862
  hidden
3845
- style="width: 175px"
3846
3863
  >
3847
3864
  <li role="presentation">
3848
3865
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -3873,7 +3890,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3873
3890
  </li>
3874
3891
  </ul>
3875
3892
  </div>
3876
- <div class="pf-c-text-input-group">
3893
+ <div class="pf-c-text-input-group" style="width: auto">
3877
3894
  <div class="pf-c-text-input-group__main pf-m-icon">
3878
3895
  <span class="pf-c-text-input-group__text">
3879
3896
  <span class="pf-c-text-input-group__icon">
@@ -4219,6 +4236,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4219
4236
  | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4220
4237
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
4238
  | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4239
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
4240
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
4241
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
4242
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
4222
4243
  | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4223
4244
  | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4224
4245
  | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -1214,10 +1214,9 @@ wrapperTag: div
1214
1214
  <div class="pf-l-bullseye">
1215
1215
  <div class="pf-c-empty-state pf-m-lg">
1216
1216
  <div class="pf-c-empty-state__content">
1217
- <i
1218
- class="fas fa- fa-cogs pf-c-empty-state__icon"
1219
- aria-hidden="true"
1220
- ></i>
1217
+ <div class="pf-c-empty-state__icon">
1218
+ <i class="fas fa- fa-cogs" aria-hidden="true"></i>
1219
+ </div>
1221
1220
 
1222
1221
  <h1
1223
1222
  class="pf-c-title pf-m-lg"
@@ -1251,9 +1250,7 @@ wrapperTag: div
1251
1250
  <div
1252
1251
  class="pf-c-empty-state__body"
1253
1252
  >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
1254
- <div class="pf-c-empty-state__secondary">
1255
- <button class="pf-c-button pf-m-link" type="button">Cancel</button>
1256
- </div>
1253
+ <button class="pf-c-button pf-m-link" type="button">Cancel</button>
1257
1254
  </div>
1258
1255
  </div>
1259
1256
  </div>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -892,7 +892,7 @@ wrapperTag: div
892
892
  </div>
893
893
  </div>
894
894
  </section>
895
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
895
+ <section class="pf-c-page__main-section pf-m-limit-width">
896
896
  <div class="pf-c-page__main-body">
897
897
  <div class="pf-l-gallery pf-m-gutter">
898
898
  <div class="pf-c-card">
@@ -2009,7 +2009,7 @@ wrapperTag: div
2009
2009
  </div>
2010
2010
  </div>
2011
2011
  </section>
2012
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
2012
+ <section class="pf-c-page__main-section pf-m-limit-width">
2013
2013
  <div class="pf-c-page__main-body">
2014
2014
  <div class="pf-l-gallery pf-m-gutter">
2015
2015
  <div class="pf-c-card">