@patternfly/patternfly 4.184.1 → 4.185.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.
Files changed (111) hide show
  1. package/assets/icons/iconUnicodes.json +1 -0
  2. package/assets/pficon/pficon.scss +6 -0
  3. package/assets/pficon/pficon.woff +0 -0
  4. package/assets/pficon/pficon.woff2 +0 -0
  5. package/base/patternfly-icons.css +5 -1
  6. package/base/patternfly-pf-icons.css +5 -1
  7. package/components/Masthead/masthead.css +1 -1
  8. package/components/Masthead/masthead.scss +1 -1
  9. package/components/Menu/menu.css +1 -0
  10. package/components/Menu/menu.scss +1 -0
  11. package/docs/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +17 -0
  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/AboutModal/examples/AboutModal.md +916 -1
  21. package/docs/demos/Alert/examples/Alert.md +2484 -490
  22. package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
  23. package/docs/demos/Banner/examples/Banner.md +2074 -1466
  24. package/docs/demos/Button/examples/Button.md +33 -21
  25. package/docs/demos/CardView/examples/CardView.md +1086 -285
  26. package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
  27. package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
  28. package/docs/demos/DataList/examples/DataList.md +3703 -1495
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
  30. package/docs/demos/Drawer/examples/Drawer.md +2554 -439
  31. package/docs/demos/Form/examples/BasicForms.md +40 -8
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -20
  34. package/docs/demos/Modal/examples/Modal.md +5525 -35
  35. package/docs/demos/Nav/examples/Nav.md +6453 -1201
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
  37. package/docs/demos/Page/examples/Page.md +15 -35
  38. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6829 -2373
  41. package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
  42. package/docs/demos/Table/examples/Table.md +253 -338
  43. package/docs/demos/Tabs/examples/Tabs.md +8171 -2943
  44. package/docs/demos/Toolbar/examples/Toolbar.md +885 -253
  45. package/docs/demos/Wizard/examples/Wizard.md +3422 -292
  46. package/docs/pages/icons.md +1 -0
  47. package/icons/pf-icons.json +1 -0
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +5 -1
  50. package/patternfly-base.css +5 -1
  51. package/patternfly-no-reset.css +7 -2
  52. package/patternfly-theme-dark.css +21 -21
  53. package/patternfly.css +7 -2
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
  56. package/themes/dark/_patternfly-theme-dark.scss +119 -0
  57. package/themes/dark/_variables.scss +94 -0
  58. package/themes/dark/colors.scss +16 -0
  59. package/themes/dark/globals.scss +7 -0
  60. package/themes/dark/mixins.scss +5 -0
  61. package/themes/dark/placeholders.scss +30 -0
  62. package/themes/dark/scss-variables.scss +85 -0
  63. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  64. package/components/Accordion/themes/dark/accordion.css +0 -0
  65. package/components/Alert/themes/dark/alert.css +0 -0
  66. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  67. package/components/Badge/themes/dark/badge.css +0 -0
  68. package/components/Banner/themes/dark/banner.css +0 -0
  69. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  70. package/components/Button/themes/dark/button.css +0 -0
  71. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  72. package/components/Chip/themes/dark/chip.css +0 -0
  73. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  74. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  75. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  76. package/components/DataList/themes/dark/data-list.css +0 -0
  77. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  78. package/components/Drawer/themes/dark/drawer.css +0 -0
  79. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  80. package/components/Form/themes/dark/form.css +0 -0
  81. package/components/FormControl/themes/dark/form-control.css +0 -0
  82. package/components/HelperText/themes/dark/helper-text.css +0 -0
  83. package/components/Hint/themes/dark/hint.css +0 -0
  84. package/components/InputGroup/themes/dark/input-group.css +0 -0
  85. package/components/Label/themes/dark/label.css +0 -0
  86. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  87. package/components/Login/themes/dark/login.css +0 -0
  88. package/components/Masthead/themes/dark/masthead.css +0 -0
  89. package/components/Menu/themes/dark/menu.css +0 -0
  90. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  91. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  92. package/components/Nav/themes/dark/nav.css +0 -0
  93. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  94. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  95. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  96. package/components/Page/themes/dark/page.css +0 -0
  97. package/components/Pagination/themes/dark/pagination.css +0 -0
  98. package/components/Popover/themes/dark/popover.css +0 -0
  99. package/components/Progress/themes/dark/progress.css +0 -0
  100. package/components/SearchInput/themes/dark/search-input.css +0 -0
  101. package/components/Select/themes/dark/select.css +0 -0
  102. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  103. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  104. package/components/Switch/themes/dark/switch.css +0 -0
  105. package/components/Table/themes/dark/table.css +0 -0
  106. package/components/Tabs/themes/dark/tabs.css +0 -0
  107. package/components/Tile/themes/dark/tile.css +0 -0
  108. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  109. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  110. package/components/TreeView/themes/dark/tree-view.css +0 -0
  111. package/components/Wizard/themes/dark/wizard.css +0 -0
package/assets/icons/iconUnicodes.json CHANGED
@@ -20,6 +20,7 @@
20
20
  "pf-icon-connected": "E938",
21
21
  "pf-icon-container-node": "E621",
22
22
  "pf-icon-cpu": "E927",
23
+ "pf-icon-critical-risk": "E976",
23
24
  "pf-icon-degraded": "E91B",
24
25
  "pf-icon-disconnected": "E955",
25
26
  "pf-icon-domain": "E919",
package/assets/pficon/pficon.scss CHANGED
@@ -86,6 +86,9 @@
86
86
  @if $filename == cpu {
87
87
  $char: '\E927';
88
88
  }
89
+ @if $filename == critical-risk {
90
+ $char: '\E976';
91
+ }
89
92
  @if $filename == degraded {
90
93
  $char: '\E91B';
91
94
  }
@@ -470,6 +473,9 @@
470
473
  .pf-icon-cpu {
471
474
  @include pf-icon(cpu);
472
475
  }
476
+ .pf-icon-critical-risk {
477
+ @include pf-icon(critical-risk);
478
+ }
473
479
  .pf-icon-degraded {
474
480
  @include pf-icon(degraded);
475
481
  }
package/assets/pficon/pficon.woff CHANGED
Binary file
package/assets/pficon/pficon.woff2 CHANGED
Binary file
package/base/patternfly-icons.css CHANGED
@@ -4190,7 +4190,7 @@
4190
4190
  font-family: "pficon";
4191
4191
  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
4192
4192
  }
4193
- .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
4193
+ .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
4194
4194
  font-family: "pficon";
4195
4195
  -webkit-font-smoothing: antialiased;
4196
4196
  -moz-osx-font-smoothing: grayscale;
@@ -4285,6 +4285,10 @@
4285
4285
  content: "\e927";
4286
4286
  }
4287
4287
 
4288
+ .pf-icon-critical-risk:before {
4289
+ content: "\e976";
4290
+ }
4291
+
4288
4292
  .pf-icon-degraded:before {
4289
4293
  content: "\e91b";
4290
4294
  }
package/base/patternfly-pf-icons.css CHANGED
@@ -2,7 +2,7 @@
2
2
  font-family: "pficon";
3
3
  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
4
4
  }
5
- .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
5
+ .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
6
6
  font-family: "pficon";
7
7
  -webkit-font-smoothing: antialiased;
8
8
  -moz-osx-font-smoothing: grayscale;
@@ -97,6 +97,10 @@
97
97
  content: "\e927";
98
98
  }
99
99
 
100
+ .pf-icon-critical-risk:before {
101
+ content: "\e976";
102
+ }
103
+
100
104
  .pf-icon-degraded:before {
101
105
  content: "\e91b";
102
106
  }
package/components/Masthead/masthead.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
57
57
  --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
58
58
  --pf-c-masthead--m-display-stack__content--GridColumn: 2;
59
- --pf-c-masthead--m-display-stack__content--MinHeight: 4.375rem;
59
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
60
60
  --pf-c-masthead--m-display-stack__content--Order: 1;
61
61
  --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
62
62
  --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
package/components/Masthead/masthead.scss CHANGED
@@ -62,7 +62,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
62
62
  --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
63
63
  --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
64
64
  --pf-c-masthead--m-display-stack__content--GridColumn: 2;
65
- --pf-c-masthead--m-display-stack__content--MinHeight: #{pf-size-prem(70px)};
65
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
66
66
  --pf-c-masthead--m-display-stack__content--Order: 1;
67
67
  --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
68
68
  --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
package/components/Menu/menu.css CHANGED
@@ -279,6 +279,7 @@
279
279
  left: 100%;
280
280
  width: 100%;
281
281
  transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
282
+ transition: 2s;
282
283
  }
283
284
  .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
284
285
  transform: translateX(-100%);
package/components/Menu/menu.scss CHANGED
@@ -264,6 +264,7 @@
264
264
  left: 100%;
265
265
  width: 100%;
266
266
  transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
267
+ transition: 2s;
267
268
 
268
269
  // stylelint-disable selector-max-class
269
270
  &.pf-m-drilled-in {
package/docs/components/Form/examples/Form.md CHANGED
@@ -14,7 +14,11 @@ cssPrefix: pf-c-form
14
14
  <span class="pf-c-form__label-text">Name</span>
15
15
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
16
16
  </label>
17
- <button class="pf-c-form__group-label-help" aria-label="More info">
17
+ <button
18
+ class="pf-c-form__group-label-help"
19
+ aria-label="More information for name field"
20
+ aria-describedby="form-vertical-name"
21
+ >
18
22
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
19
23
  </button>
20
24
  </div>
@@ -58,7 +62,11 @@ cssPrefix: pf-c-form
58
62
  <label class="pf-c-form__label" for="form-horizontal-info">
59
63
  <span class="pf-c-form__label-text">Information</span>
60
64
  </label>
61
- <button class="pf-c-form__group-label-help" aria-label="More info">
65
+ <button
66
+ class="pf-c-form__group-label-help"
67
+ aria-label="More information for information field"
68
+ aria-describedby="form-horizontal-info"
69
+ >
62
70
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
63
71
  </button>
64
72
  </div>
@@ -84,7 +92,11 @@ cssPrefix: pf-c-form
84
92
  <span class="pf-c-form__label">
85
93
  <span class="pf-c-form__label-text">Label (no top padding)</span>
86
94
  </span>
87
- <button class="pf-c-form__group-label-help" aria-label="More info">
95
+ <button
96
+ class="pf-c-form__group-label-help"
97
+ aria-label="More information for label field"
98
+ aria-describedby="form-horizontal-checkbox-legend"
99
+ >
88
100
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
89
101
  </button>
90
102
  </div>
@@ -124,11 +136,18 @@ cssPrefix: pf-c-form
124
136
  <form novalidate class="pf-c-form pf-m-horizontal-on-sm">
125
137
  <div class="pf-c-form__group">
126
138
  <div class="pf-c-form__group-label">
127
- <label class="pf-c-form__label" for="form-horizontal-name">
139
+ <label
140
+ class="pf-c-form__label"
141
+ for="form-horizontal-custom-breakpoint-name"
142
+ >
128
143
  <span class="pf-c-form__label-text">Name</span>
129
144
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
130
145
  </label>
131
- <button class="pf-c-form__group-label-help" aria-label="More info">
146
+ <button
147
+ class="pf-c-form__group-label-help"
148
+ aria-label="More information for name field"
149
+ aria-describedby="form-horizontal-custom-breakpoint-name"
150
+ >
132
151
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
133
152
  </button>
134
153
  </div>
@@ -136,8 +155,8 @@ cssPrefix: pf-c-form
136
155
  <input
137
156
  class="pf-c-form-control"
138
157
  type="text"
139
- id="form-horizontal-name"
140
- name="form-horizontal-name"
158
+ id="form-horizontal-custom-breakpoint-name"
159
+ name="form-horizontal-custom-breakpoint-name"
141
160
  required
142
161
  />
143
162
  </div>
@@ -341,20 +360,20 @@ cssPrefix: pf-c-form
341
360
  </div>
342
361
  <div class="pf-c-form__group">
343
362
  <div class="pf-c-form__group-label">
344
- <label class="pf-c-form__label" for="form-help-textinfo">
363
+ <label class="pf-c-form__label" for="form-help-text-info">
345
364
  <span class="pf-c-form__label-text">Information</span>
346
365
  </label>
347
366
  </div>
348
367
  <textarea
349
368
  class="pf-c-form-control"
350
- id="form-help-textinfo"
351
- name="form-help-textinfo"
369
+ id="form-help-text-info"
370
+ name="form-help-text-info"
352
371
  aria-invalid="true"
353
- aria-describedby="form-help-textinfo-helper"
372
+ aria-describedby="form-help-text-info-helper"
354
373
  ></textarea>
355
374
  <p
356
375
  class="pf-c-form__helper-text pf-m-error"
357
- id="form-help-textinfo-helper"
376
+ id="form-help-text-info-helper"
358
377
  aria-live="polite"
359
378
  >
360
379
  <span class="pf-c-form__helper-text-icon">
@@ -378,7 +397,11 @@ cssPrefix: pf-c-form
378
397
  <span class="pf-c-form__label-text">Name</span>
379
398
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
380
399
  </label>
381
- <button class="pf-c-form__group-label-help" aria-label="More info">
400
+ <button
401
+ class="pf-c-form__group-label-help"
402
+ aria-label="More information for name field"
403
+ aria-describedby="form-additional-info-name"
404
+ >
382
405
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
383
406
  </button>
384
407
  </div>
@@ -423,7 +446,11 @@ cssPrefix: pf-c-form
423
446
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
424
447
  </label>
425
448
 
426
- <button class="pf-c-form__group-label-help" aria-label="More info">
449
+ <button
450
+ class="pf-c-form__group-label-help"
451
+ aria-label="More information for label 1 field"
452
+ aria-describedby="form-expandable-field-groups-label1"
453
+ >
427
454
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
428
455
  </button>
429
456
  </div>
@@ -444,7 +471,11 @@ cssPrefix: pf-c-form
444
471
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
445
472
  </label>
446
473
 
447
- <button class="pf-c-form__group-label-help" aria-label="More info">
474
+ <button
475
+ class="pf-c-form__group-label-help"
476
+ aria-label="More information for label 2 field"
477
+ aria-describedby="form-expandable-field-groups-label2"
478
+ >
448
479
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
449
480
  </button>
450
481
  </div>
@@ -553,7 +584,8 @@ cssPrefix: pf-c-form
553
584
 
554
585
  <button
555
586
  class="pf-c-form__group-label-help"
556
- aria-label="More info"
587
+ aria-label="More information for label 1 field"
588
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
557
589
  >
558
590
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
559
591
  </button>
@@ -580,7 +612,8 @@ cssPrefix: pf-c-form
580
612
 
581
613
  <button
582
614
  class="pf-c-form__group-label-help"
583
- aria-label="More info"
615
+ aria-label="More information for label 2 field"
616
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
584
617
  >
585
618
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
586
619
  </button>
@@ -692,7 +725,11 @@ cssPrefix: pf-c-form
692
725
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
693
726
  </label>
694
727
 
695
- <button class="pf-c-form__group-label-help" aria-label="More info">
728
+ <button
729
+ class="pf-c-form__group-label-help"
730
+ aria-label="More information for label 1 field"
731
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group1-label1"
732
+ >
696
733
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
697
734
  </button>
698
735
  </div>
@@ -716,7 +753,11 @@ cssPrefix: pf-c-form
716
753
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
717
754
  </label>
718
755
 
719
- <button class="pf-c-form__group-label-help" aria-label="More info">
756
+ <button
757
+ class="pf-c-form__group-label-help"
758
+ aria-label="More information for label 2 field"
759
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group1-label2"
760
+ >
720
761
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
721
762
  </button>
722
763
  </div>
@@ -816,7 +857,11 @@ cssPrefix: pf-c-form
816
857
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
817
858
  </label>
818
859
 
819
- <button class="pf-c-form__group-label-help" aria-label="More info">
860
+ <button
861
+ class="pf-c-form__group-label-help"
862
+ aria-label="More information for label 1 field"
863
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group6-label1"
864
+ >
820
865
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
821
866
  </button>
822
867
  </div>
@@ -840,7 +885,11 @@ cssPrefix: pf-c-form
840
885
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
841
886
  </label>
842
887
 
843
- <button class="pf-c-form__group-label-help" aria-label="More info">
888
+ <button
889
+ class="pf-c-form__group-label-help"
890
+ aria-label="More information for label 2 field"
891
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group6-label2"
892
+ >
844
893
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
845
894
  </button>
846
895
  </div>
@@ -882,7 +931,8 @@ cssPrefix: pf-c-form
882
931
 
883
932
  <button
884
933
  class="pf-c-form__group-label-help"
885
- aria-label="More info"
934
+ aria-label="More information for label 1 field"
935
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
886
936
  >
887
937
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
888
938
  </button>
@@ -909,7 +959,8 @@ cssPrefix: pf-c-form
909
959
 
910
960
  <button
911
961
  class="pf-c-form__group-label-help"
912
- aria-label="More info"
962
+ aria-label="More information for label 2 field"
963
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
913
964
  >
914
965
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
915
966
  </button>
@@ -957,7 +1008,8 @@ cssPrefix: pf-c-form
957
1008
 
958
1009
  <button
959
1010
  class="pf-c-form__group-label-help"
960
- aria-label="More info"
1011
+ aria-label="More information for label 1 field"
1012
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group8-label1"
961
1013
  >
962
1014
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
963
1015
  </button>
@@ -984,7 +1036,8 @@ cssPrefix: pf-c-form
984
1036
 
985
1037
  <button
986
1038
  class="pf-c-form__group-label-help"
987
- aria-label="More info"
1039
+ aria-label="More information for label 2 field"
1040
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group8-label2"
988
1041
  >
989
1042
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
990
1043
  </button>
@@ -1036,7 +1089,11 @@ cssPrefix: pf-c-form
1036
1089
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1037
1090
  </label>
1038
1091
 
1039
- <button class="pf-c-form__group-label-help" aria-label="More info">
1092
+ <button
1093
+ class="pf-c-form__group-label-help"
1094
+ aria-label="More information for label 1 field"
1095
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
1096
+ >
1040
1097
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
1041
1098
  </button>
1042
1099
  </div>
@@ -1060,7 +1117,11 @@ cssPrefix: pf-c-form
1060
1117
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1061
1118
  </label>
1062
1119
 
1063
- <button class="pf-c-form__group-label-help" aria-label="More info">
1120
+ <button
1121
+ class="pf-c-form__group-label-help"
1122
+ aria-label="More information for label 2 field"
1123
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
1124
+ >
1064
1125
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
1065
1126
  </button>
1066
1127
  </div>
@@ -1083,7 +1144,11 @@ cssPrefix: pf-c-form
1083
1144
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1084
1145
  </label>
1085
1146
 
1086
- <button class="pf-c-form__group-label-help" aria-label="More info">
1147
+ <button
1148
+ class="pf-c-form__group-label-help"
1149
+ aria-label="More information for label 3 field"
1150
+ aria-describedby="form-expandable-field-groups-label3"
1151
+ >
1087
1152
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
1088
1153
  </button>
1089
1154
  </div>
@@ -1104,7 +1169,11 @@ cssPrefix: pf-c-form
1104
1169
  <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1105
1170
  </label>
1106
1171
 
1107
- <button class="pf-c-form__group-label-help" aria-label="More info">
1172
+ <button
1173
+ class="pf-c-form__group-label-help"
1174
+ aria-label="More information for label 4 field"
1175
+ aria-describedby="form-expandable-field-groups-label4"
1176
+ >
1108
1177
  <i class="pficon pf-icon-help" aria-hidden="true"></i>
1109
1178
  </button>
1110
1179
  </div>
@@ -1126,24 +1195,26 @@ cssPrefix: pf-c-form
1126
1195
 
1127
1196
  ### Accessibility
1128
1197
 
1129
- | Attribute | Applied to | Outcome | |
1130
- | --------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
1131
- | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** | |
1132
- | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** | |
1133
- | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. | |
1134
- | `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. | |
1135
- | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. | |
1136
- | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. | |
1137
- | `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. | |
1138
- | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** | |
1139
- | `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** | |
1140
- | `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. | |
1141
- | `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. | |
1142
- | `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. | |
1143
- | `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. | **Required for form groups, form sections, and form field groups that contain labels.** |
1144
- | `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. | |
1145
- | `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. | |
1146
- | `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. | |
1198
+ | Attribute | Applied to | Outcome |
1199
+ | -------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1200
+ | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
1201
+ | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
1202
+ | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
1203
+ | `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. |
1204
+ | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
1205
+ | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
1206
+ | `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
1207
+ | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
1208
+ | `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
1209
+ | `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
1210
+ | `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
1211
+ | `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
1212
+ | `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
1213
+ | `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
1214
+ | `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
1215
+ | `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
1216
+ | `id="{form_label_id}"` | `.pf-c-form__label` | Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`. |
1217
+ | `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help` | Provides an accessible label on a button that provides additional information for a form element. |
1147
1218
 
1148
1219
  ### Usage
1149
1220
 
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -150,6 +150,23 @@ cssPrefix: pf-c-menu-toggle
150
150
  </span>
151
151
  </button>
152
152
 
153
+ &nbsp;
154
+ <button
155
+ class="pf-c-menu-toggle pf-m-secondary"
156
+ type="button"
157
+ aria-expanded="false"
158
+ >
159
+ <span class="pf-c-menu-toggle__icon">
160
+ <i class="fas fa-cog" aria-hidden="true"></i>
161
+ </span>
162
+ <span class="pf-c-menu-toggle__text">Icon</span>
163
+ <span class="pf-c-menu-toggle__controls">
164
+ <span class="pf-c-menu-toggle__toggle-icon">
165
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
166
+ </span>
167
+ </span>
168
+ </button>
169
+
153
170
  &nbsp;
154
171
  <button
155
172
  class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -451,6 +451,7 @@ A modal box is a generic rectangular container that can be used to build modals.
451
451
  | `aria-label="Close"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
452
452
  | `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
453
453
  | `form="[id of form in modal body]"` | `.pf-c-modal-box__footer .pf-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
454
+ | `tabindex="0"` | `.pf-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
454
455
 
455
456
  ### Usage
456
457
 
package/docs/components/OptionsMenu/examples/options-menu.md CHANGED
@@ -747,7 +747,7 @@ _Note:_ The attribute `aria-selected="true"` should be set programmatically to t
747
747
  | `.pf-m-top` | `.pf-c-options-menu` | Modifies to display the menu above the toggle. |
748
748
  | `.pf-m-align-right` | `.pf-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
749
749
  | `.pf-m-expanded` | `.pf-c-options-menu` | Modifies for the expanded state. |
750
- | `.pf-m-plain` | `.pf-c-options-menu__toggle` | Modifies to display the toggle with no border. |
750
+ | `.pf-m-plain` | `.pf-c-options-menu__toggle` | Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
751
751
  | `.pf-m-disabled` | `.pf-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-c-options-menu__toggle` |
752
752
  | `.pf-m-text` | `.pf-c-options-menu__toggle` | For use when the `.pf-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-c-options-menu__toggle-button` to toggle the options menu. |
753
753
  | `.pf-m-active` | `.pf-c-options-menu__toggle` | Forces display of the active state of the toggle. |
package/docs/components/Page/examples/Page.md CHANGED
@@ -173,14 +173,15 @@ This component provides the basic chrome for a page, including sidebar, header,
173
173
 
174
174
  ### Accessibility
175
175
 
176
- | Attribute | Applied to | Outcome |
177
- | ----------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
178
- | `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region. |
179
- | `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region. |
180
- | `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
181
- | `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required** |
182
- | `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
183
- | `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required** |
176
+ | Attribute | Applied to | Outcome |
177
+ | ----------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
178
+ | `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region. |
179
+ | `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region. |
180
+ | `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
181
+ | `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required** |
182
+ | `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
183
+ | `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required** |
184
+ | `tabindex="0"` | `.pf-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
184
185
 
185
186
  ### Usage
186
187
 
package/docs/components/Pagination/examples/Pagination.css ADDED
@@ -0,0 +1,3 @@
1
+ #ws-core-c-pagination-top-expanded {
2
+ height: 220px;
3
+ }