@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.34

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 (115) hide show
  1. package/RELEASE-NOTES.md +1 -1
  2. package/assets/pficon/pficon.scss +1 -2
  3. package/base/_fa-icons.scss +1 -2
  4. package/base/_fonts.scss +5 -10
  5. package/base/_globals.scss +91 -85
  6. package/base/_variables.scss +3 -3
  7. package/base/patternfly-fa-icons.css +1 -1
  8. package/base/patternfly-fonts.css +5 -5
  9. package/base/patternfly-globals.css +35 -41
  10. package/base/patternfly-icons.css +2 -2
  11. package/base/patternfly-pf-icons.css +1 -1
  12. package/base/patternfly-themes.css +0 -42
  13. package/base/patternfly-variables.css +3 -3
  14. package/components/AboutModalBox/about-modal-box.css +0 -38
  15. package/components/Alert/alert.css +14 -5
  16. package/components/Alert/alert.scss +18 -4
  17. package/components/Alert/themes/dark/alert.scss +1 -1
  18. package/components/Banner/banner.css +0 -38
  19. package/components/DatePicker/date-picker.css +0 -8
  20. package/components/DatePicker/date-picker.scss +0 -9
  21. package/components/HelperText/helper-text.css +4 -0
  22. package/components/HelperText/helper-text.scss +5 -0
  23. package/components/Icon/icon.css +3 -3
  24. package/components/Icon/icon.scss +3 -3
  25. package/components/Label/label.css +6 -6
  26. package/components/Label/label.scss +4 -4
  27. package/components/Label/themes/dark/label.scss +2 -2
  28. package/components/LogViewer/log-viewer.css +0 -38
  29. package/components/Login/login.css +0 -40
  30. package/components/Masthead/masthead.css +0 -38
  31. package/components/ModalBox/modal-box.css +3 -3
  32. package/components/ModalBox/modal-box.scss +3 -3
  33. package/components/NotificationDrawer/notification-drawer.css +5 -5
  34. package/components/NotificationDrawer/notification-drawer.scss +5 -5
  35. package/components/Page/page.css +0 -42
  36. package/components/Popover/popover.css +6 -6
  37. package/components/Popover/popover.scss +5 -5
  38. package/components/Popover/themes/dark/popover.scss +1 -1
  39. package/components/Wizard/wizard.css +0 -38
  40. package/docs/components/Alert/examples/Alert.md +15 -15
  41. package/docs/components/AlertGroup/examples/AlertGroup.md +6 -6
  42. package/docs/components/AppLauncher/examples/application-launcher.md +1 -0
  43. package/docs/components/Check/examples/Check.md +1 -0
  44. package/docs/components/ContextSelector/examples/context-selector.md +1 -0
  45. package/docs/components/DatePicker/examples/DatePicker.md +15 -3
  46. package/docs/components/Dropdown/examples/Dropdown.md +1 -0
  47. package/docs/components/FileUpload/examples/FileUpload.md +11 -6
  48. package/docs/components/Form/examples/Form.md +95 -73
  49. package/docs/components/FormControl/examples/FormControl.md +1 -0
  50. package/docs/components/HelperText/examples/HelperText.md +13 -24
  51. package/docs/components/Icon/examples/Icon.md +2 -2
  52. package/docs/components/Login/examples/Login.md +67 -30
  53. package/docs/components/Menu/examples/Menu.md +1 -0
  54. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -0
  55. package/docs/components/ModalBox/examples/ModalBox.md +8 -8
  56. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -1
  57. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +22 -22
  58. package/docs/components/OptionsMenu/examples/options-menu.md +1 -0
  59. package/docs/components/Popover/examples/Popover.md +9 -9
  60. package/docs/components/Progress/examples/Progress.md +1 -1
  61. package/docs/components/Radio/examples/Radio.md +1 -0
  62. package/docs/components/Select/examples/Select.md +1 -0
  63. package/docs/demos/Alert/examples/Alert.md +105 -58
  64. package/docs/demos/CardView/examples/CardView.md +1 -1
  65. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  66. package/docs/demos/Form/examples/BasicForms.md +130 -140
  67. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -30
  69. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  70. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +88 -54
  71. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1 -1
  72. package/docs/demos/Toolbar/examples/Toolbar.md +17 -5
  73. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  74. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  75. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  76. package/docs/utilities/BoxShadow/examples/box-shadow.md +1 -1
  77. package/docs/utilities/Display/examples/Display.md +1 -1
  78. package/docs/utilities/Flex/examples/Flex.md +1 -1
  79. package/docs/utilities/Float/examples/Float.md +1 -1
  80. package/docs/utilities/Sizing/examples/Sizing.md +1 -1
  81. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  82. package/docs/utilities/Text/examples/Text.md +5 -5
  83. package/package.json +2 -2
  84. package/patternfly-addons.css +48 -48
  85. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +10 -31
  86. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  87. package/patternfly-base.css +45 -72
  88. package/{patternfly-no-reset.css → patternfly-no-globals.css} +56 -1245
  89. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  90. package/patternfly.css +87 -1282
  91. package/patternfly.min.css +1 -1
  92. package/patternfly.min.css.map +1 -1
  93. package/sass-utilities/placeholders.scss +0 -23
  94. package/sass-utilities/scss-variables.scss +4 -5
  95. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  96. package/utilities/Text/text.css +48 -48
  97. package/utilities/Text/text.scss +6 -6
  98. package/utilities/Text/themes/dark/text.scss +2 -2
  99. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  100. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  101. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  102. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  103. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  104. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  105. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  106. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  107. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  108. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  109. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  110. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  111. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  112. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  113. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  114. package/assets/pficon/pficon.woff +0 -0
  115. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -1063,7 +1063,7 @@ section: components
1063
1063
  </li>
1064
1064
 
1065
1065
  <li
1066
- class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
1066
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
1067
1067
  >
1068
1068
  <div class="pf-c-notification-drawer__list-item-header">
1069
1069
  <span
@@ -1074,7 +1074,7 @@ section: components
1074
1074
  <h2
1075
1075
  class="pf-c-notification-drawer__list-item-header-title"
1076
1076
  >
1077
- <span class="pf-screen-reader">Default notification:</span>
1077
+ <span class="pf-screen-reader">Custom notification:</span>
1078
1078
  Read
1079
1079
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1080
1080
  </h2>
@@ -1138,7 +1138,7 @@ section: components
1138
1138
  </li>
1139
1139
 
1140
1140
  <li
1141
- class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
1141
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
1142
1142
  >
1143
1143
  <div class="pf-c-notification-drawer__list-item-header">
1144
1144
  <span
@@ -1149,7 +1149,7 @@ section: components
1149
1149
  <h2
1150
1150
  class="pf-c-notification-drawer__list-item-header-title"
1151
1151
  >
1152
- <span class="pf-screen-reader">Default notification:</span>
1152
+ <span class="pf-screen-reader">Custom notification:</span>
1153
1153
  Read
1154
1154
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1155
1155
  </h2>
@@ -2580,7 +2580,7 @@ section: components
2580
2580
  </li>
2581
2581
 
2582
2582
  <li
2583
- class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
2583
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
2584
2584
  >
2585
2585
  <div class="pf-c-notification-drawer__list-item-header">
2586
2586
  <span
@@ -2591,7 +2591,7 @@ section: components
2591
2591
  <h2
2592
2592
  class="pf-c-notification-drawer__list-item-header-title"
2593
2593
  >
2594
- <span class="pf-screen-reader">Default notification:</span>
2594
+ <span class="pf-screen-reader">Custom notification:</span>
2595
2595
  Read
2596
2596
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
2597
2597
  </h2>
@@ -2655,7 +2655,7 @@ section: components
2655
2655
  </li>
2656
2656
 
2657
2657
  <li
2658
- class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
2658
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-custom"
2659
2659
  >
2660
2660
  <div class="pf-c-notification-drawer__list-item-header">
2661
2661
  <span
@@ -2666,7 +2666,7 @@ section: components
2666
2666
  <h2
2667
2667
  class="pf-c-notification-drawer__list-item-header-title"
2668
2668
  >
2669
- <span class="pf-screen-reader">Default notification:</span>
2669
+ <span class="pf-screen-reader">Custom notification:</span>
2670
2670
  Read
2671
2671
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
2672
2672
  </h2>
@@ -4103,7 +4103,7 @@ section: components
4103
4103
  </li>
4104
4104
 
4105
4105
  <li
4106
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
4106
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
4107
4107
  tabindex="0"
4108
4108
  >
4109
4109
  <div class="pf-c-notification-drawer__list-item-header">
@@ -4115,7 +4115,7 @@ section: components
4115
4115
  <h2
4116
4116
  class="pf-c-notification-drawer__list-item-header-title"
4117
4117
  >
4118
- <span class="pf-screen-reader">Default notification:</span>
4118
+ <span class="pf-screen-reader">Custom notification:</span>
4119
4119
  Unread
4120
4120
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
4121
4121
  </h2>
@@ -4179,7 +4179,7 @@ section: components
4179
4179
  </li>
4180
4180
 
4181
4181
  <li
4182
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
4182
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
4183
4183
  tabindex="0"
4184
4184
  >
4185
4185
  <div class="pf-c-notification-drawer__list-item-header">
@@ -4191,7 +4191,7 @@ section: components
4191
4191
  <h2
4192
4192
  class="pf-c-notification-drawer__list-item-header-title"
4193
4193
  >
4194
- <span class="pf-screen-reader">Default notification:</span>
4194
+ <span class="pf-screen-reader">Custom notification:</span>
4195
4195
  Unread
4196
4196
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
4197
4197
  </h2>
@@ -5703,7 +5703,7 @@ section: components
5703
5703
  </li>
5704
5704
 
5705
5705
  <li
5706
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
5706
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
5707
5707
  tabindex="0"
5708
5708
  >
5709
5709
  <div class="pf-c-notification-drawer__list-item-header">
@@ -5715,7 +5715,7 @@ section: components
5715
5715
  <h2
5716
5716
  class="pf-c-notification-drawer__list-item-header-title"
5717
5717
  >
5718
- <span class="pf-screen-reader">Default notification:</span>
5718
+ <span class="pf-screen-reader">Custom notification:</span>
5719
5719
  Unread
5720
5720
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
5721
5721
  </h2>
@@ -7181,7 +7181,7 @@ section: components
7181
7181
  </li>
7182
7182
 
7183
7183
  <li
7184
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
7184
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
7185
7185
  tabindex="0"
7186
7186
  >
7187
7187
  <div class="pf-c-notification-drawer__list-item-header">
@@ -7196,7 +7196,7 @@ section: components
7196
7196
  <h2
7197
7197
  class="pf-c-notification-drawer__list-item-header-title"
7198
7198
  >
7199
- <span class="pf-screen-reader">Default notification:</span>
7199
+ <span class="pf-screen-reader">Custom notification:</span>
7200
7200
  Unread
7201
7201
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
7202
7202
  </h2>
@@ -7263,7 +7263,7 @@ section: components
7263
7263
  </li>
7264
7264
 
7265
7265
  <li
7266
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
7266
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
7267
7267
  tabindex="0"
7268
7268
  >
7269
7269
  <div class="pf-c-notification-drawer__list-item-header">
@@ -7278,7 +7278,7 @@ section: components
7278
7278
  <h2
7279
7279
  class="pf-c-notification-drawer__list-item-header-title"
7280
7280
  >
7281
- <span class="pf-screen-reader">Default notification:</span>
7281
+ <span class="pf-screen-reader">Custom notification:</span>
7282
7282
  Unread
7283
7283
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
7284
7284
  </h2>
@@ -7757,7 +7757,7 @@ section: components
7757
7757
  </li>
7758
7758
 
7759
7759
  <li
7760
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
7760
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
7761
7761
  tabindex="0"
7762
7762
  >
7763
7763
  <div class="pf-c-notification-drawer__list-item-header">
@@ -7772,7 +7772,7 @@ section: components
7772
7772
  <h2
7773
7773
  class="pf-c-notification-drawer__list-item-header-title"
7774
7774
  >
7775
- <span class="pf-screen-reader">Default notification:</span>
7775
+ <span class="pf-screen-reader">Custom notification:</span>
7776
7776
  Unread
7777
7777
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
7778
7778
  </h2>
@@ -7839,7 +7839,7 @@ section: components
7839
7839
  </li>
7840
7840
 
7841
7841
  <li
7842
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
7842
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
7843
7843
  tabindex="0"
7844
7844
  >
7845
7845
  <div class="pf-c-notification-drawer__list-item-header">
@@ -7854,7 +7854,7 @@ section: components
7854
7854
  <h2
7855
7855
  class="pf-c-notification-drawer__list-item-header-title"
7856
7856
  >
7857
- <span class="pf-screen-reader">Default notification:</span>
7857
+ <span class="pf-screen-reader">Custom notification:</span>
7858
7858
  Unread
7859
7859
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
7860
7860
  </h2>
@@ -8335,7 +8335,7 @@ section: components
8335
8335
  </li>
8336
8336
 
8337
8337
  <li
8338
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
8338
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
8339
8339
  tabindex="0"
8340
8340
  >
8341
8341
  <div class="pf-c-notification-drawer__list-item-header">
@@ -8350,7 +8350,7 @@ section: components
8350
8350
  <h2
8351
8351
  class="pf-c-notification-drawer__list-item-header-title"
8352
8352
  >
8353
- <span class="pf-screen-reader">Default notification:</span>
8353
+ <span class="pf-screen-reader">Custom notification:</span>
8354
8354
  Unread
8355
8355
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
8356
8356
  </h2>
@@ -8417,7 +8417,7 @@ section: components
8417
8417
  </li>
8418
8418
 
8419
8419
  <li
8420
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
8420
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
8421
8421
  tabindex="0"
8422
8422
  >
8423
8423
  <div class="pf-c-notification-drawer__list-item-header">
@@ -8432,7 +8432,7 @@ section: components
8432
8432
  <h2
8433
8433
  class="pf-c-notification-drawer__list-item-header-title"
8434
8434
  >
8435
- <span class="pf-screen-reader">Default notification:</span>
8435
+ <span class="pf-screen-reader">Custom notification:</span>
8436
8436
  Unread
8437
8437
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
8438
8438
  </h2>
@@ -8913,7 +8913,7 @@ section: components
8913
8913
  </li>
8914
8914
 
8915
8915
  <li
8916
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
8916
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
8917
8917
  tabindex="0"
8918
8918
  >
8919
8919
  <div class="pf-c-notification-drawer__list-item-header">
@@ -8928,7 +8928,7 @@ section: components
8928
8928
  <h2
8929
8929
  class="pf-c-notification-drawer__list-item-header-title"
8930
8930
  >
8931
- <span class="pf-screen-reader">Default notification:</span>
8931
+ <span class="pf-screen-reader">Custom notification:</span>
8932
8932
  Unread
8933
8933
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
8934
8934
  </h2>
@@ -8995,7 +8995,7 @@ section: components
8995
8995
  </li>
8996
8996
 
8997
8997
  <li
8998
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
8998
+ class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
8999
8999
  tabindex="0"
9000
9000
  >
9001
9001
  <div class="pf-c-notification-drawer__list-item-header">
@@ -9010,7 +9010,7 @@ section: components
9010
9010
  <h2
9011
9011
  class="pf-c-notification-drawer__list-item-header-title"
9012
9012
  >
9013
- <span class="pf-screen-reader">Default notification:</span>
9013
+ <span class="pf-screen-reader">Custom notification:</span>
9014
9014
  Unread
9015
9015
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
9016
9016
  </h2>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: 'Password generator'
3
- section: demos
3
+ section: components
4
4
  ---## Examples
5
5
 
6
6
  ### Provide a generated password
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: 'Password strength'
3
- section: demos
3
+ section: components
4
4
  ---## Examples
5
5
 
6
6
  ### Initial state
@@ -48,9 +48,9 @@ section: demos
48
48
  </button>
49
49
  </div>
50
50
  </div>
51
- <div class="pf-c-form__helper-text">
51
+ <div class="pf-c-form__helper-text" aria-live="polite">
52
52
  <div class="pf-c-helper-text">
53
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
53
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
54
54
  <span class="pf-c-helper-text__item-icon">
55
55
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
56
56
  </span>
@@ -58,7 +58,7 @@ section: demos
58
58
  class="pf-c-helper-text__item-text"
59
59
  >Must be at least 14 characters</span>
60
60
  </div>
61
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
61
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
62
62
  <span class="pf-c-helper-text__item-icon">
63
63
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
64
64
  </span>
@@ -66,7 +66,7 @@ section: demos
66
66
  class="pf-c-helper-text__item-text"
67
67
  >Cannot contain the word "redhat"</span>
68
68
  </div>
69
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
69
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
70
70
  <span class="pf-c-helper-text__item-icon">
71
71
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
72
72
  </span>
@@ -84,47 +84,81 @@ section: demos
84
84
 
85
85
  ### Invalid password
86
86
 
87
- ```hbs
88
- {{#> form form--id="password-strength-demo--invalid"}}
89
- {{#> form-group form-group--id="-password"}}
90
- {{#> form-group-label form-group-label-info="true"}}
91
- {{#> form-group-label-main}}
92
- {{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Password{{/form-label}}
93
- {{> form-group-label-help form-group-label-help--aria-label="More information for password field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
94
- {{/form-group-label-main}}
95
- {{#> form-group-label-info}}
96
- {{/form-group-label-info}}
97
- {{/form-group-label}}
98
- {{#> form-group-control}}
99
- {{#> input-group}}
100
- {{#> input-group-item input-group-item--IsFill=true}}
101
- {{> form-control controlType="input" input="true" form-control--attribute=(concat 'required type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" aria-label="Password input" value="Marie$RedHat78" placeholder="Password"')}}
102
- {{/input-group-item}}
103
- {{#> input-group-item}}
104
- {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Show password"'}}
105
- {{/input-group-item}}
106
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
107
- {{/button}}
108
- {{/input-group}}
109
- {{#> form-helper-text form-helper-text--type="div"}}
110
- {{#> helper-text helper-text--type="ul" helper-text-item--type="li"}}
111
- {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-success"}}
112
- {{> helper-text-item-icon helper-text-item-icon--type="check-circle"}}
113
- {{#> helper-text-item-text}}Must be at least 14 characters{{/helper-text-item-text}}
114
- {{/helper-text-item}}
115
- {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-error"}}
116
- {{> helper-text-item-icon helper-text-item-icon--type="exclamation-circle"}}
117
- {{#> helper-text-item-text}}Cannot contain the word "redhat"{{/helper-text-item-text}}
118
- {{/helper-text-item}}
119
- {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-success"}}
120
- {{> helper-text-item-icon helper-text-item-icon--type="check-circle"}}
121
- {{#> helper-text-item-text}}Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols{{/helper-text-item-text}}
122
- {{/helper-text-item}}
123
- {{/helper-text}}
124
- {{/form-helper-text}}
125
- {{/form-group-control}}
126
- {{/form-group}}
127
- {{/form}}
87
+ ```html
88
+ <form class="pf-c-form" novalidate>
89
+ <div class="pf-c-form__group">
90
+ <div class="pf-c-form__group-label pf-m-info">
91
+ <div class="pf-c-form__group-label-main"><label
92
+ class="pf-c-form__label"
93
+ for="password-strength-demo--invalid-password"
94
+ >
95
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
96
+ class="pf-c-form__group-label-help"
97
+ aria-label="More information for password field"
98
+ aria-describedby="password-strength-demo--invalid-password"
99
+ role="button"
100
+ type="button"
101
+ tabindex="0"
102
+ ><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
103
+ </div>
104
+ <div class="pf-c-form__group-label-info"></div>
105
+ </div>
106
+ <div class="pf-c-form__group-control">
107
+ <div class="pf-c-input-group">
108
+ <div class="pf-c-input-group__item pf-m-fill">
109
+ <input
110
+ class="pf-c-form-control"
111
+ required
112
+ type="text"
113
+ id="password-strength-demo--invalid-password"
114
+ name="password-strength-demo--invalid-password"
115
+ aria-label="Password input"
116
+ value="Marie$RedHat78"
117
+ placeholder="Password"
118
+ />
119
+ </div>
120
+ <div class="pf-c-input-group__item">
121
+ <button
122
+ class="pf-c-button pf-m-control"
123
+ type="button"
124
+ aria-label="Show password"
125
+ >
126
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+ <div class="pf-c-form__helper-text" aria-live="polite">
131
+ <div class="pf-c-helper-text">
132
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
133
+ <span class="pf-c-helper-text__item-icon">
134
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
135
+ </span>
136
+ <span
137
+ class="pf-c-helper-text__item-text"
138
+ >Must be at least 14 characters</span>
139
+ </div>
140
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
141
+ <span class="pf-c-helper-text__item-icon">
142
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
143
+ </span>
144
+ <span
145
+ class="pf-c-helper-text__item-text"
146
+ >Cannot contain the word "redhat"</span>
147
+ </div>
148
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
149
+ <span class="pf-c-helper-text__item-icon">
150
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
151
+ </span>
152
+ <span
153
+ class="pf-c-helper-text__item-text"
154
+ >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </form>
161
+
128
162
  ```
129
163
 
130
164
  ### Valid, weak password
@@ -181,9 +215,9 @@ section: demos
181
215
  </button>
182
216
  </div>
183
217
  </div>
184
- <div class="pf-c-form__helper-text">
218
+ <div class="pf-c-form__helper-text" aria-live="polite">
185
219
  <div class="pf-c-helper-text">
186
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
220
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
187
221
  <span class="pf-c-helper-text__item-icon">
188
222
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
189
223
  </span>
@@ -191,7 +225,7 @@ section: demos
191
225
  class="pf-c-helper-text__item-text"
192
226
  >Must be at least 14 characters</span>
193
227
  </div>
194
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
228
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
195
229
  <span class="pf-c-helper-text__item-icon">
196
230
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
197
231
  </span>
@@ -199,7 +233,7 @@ section: demos
199
233
  class="pf-c-helper-text__item-text"
200
234
  >Cannot contain the word "redhat"</span>
201
235
  </div>
202
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
236
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
203
237
  <span class="pf-c-helper-text__item-icon">
204
238
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
205
239
  </span>
@@ -269,9 +303,9 @@ section: demos
269
303
  </button>
270
304
  </div>
271
305
  </div>
272
- <div class="pf-c-form__helper-text">
306
+ <div class="pf-c-form__helper-text" aria-live="polite">
273
307
  <div class="pf-c-helper-text">
274
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
308
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
275
309
  <span class="pf-c-helper-text__item-icon">
276
310
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
277
311
  </span>
@@ -279,7 +313,7 @@ section: demos
279
313
  class="pf-c-helper-text__item-text"
280
314
  >Must be at least 14 characters</span>
281
315
  </div>
282
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
316
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
283
317
  <span class="pf-c-helper-text__item-icon">
284
318
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
285
319
  </span>
@@ -287,7 +321,7 @@ section: demos
287
321
  class="pf-c-helper-text__item-text"
288
322
  >Cannot contain the word "redhat"</span>
289
323
  </div>
290
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
324
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
291
325
  <span class="pf-c-helper-text__item-icon">
292
326
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
293
327
  </span>
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Primary-detail
3
- section: demos
3
+ section: patterns
4
4
  wrapperTag: div
5
5
  ---## Demos
6
6
 
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -1233,7 +1233,13 @@ section: components
1233
1233
  </button>
1234
1234
  </div>
1235
1235
  </div>
1236
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1236
+ <div class="pf-c-date-picker__helper-text">
1237
+ <div class="pf-c-helper-text">
1238
+ <div class="pf-c-helper-text__item">
1239
+ <span class="pf-c-helper-text__item-text">MM/DD/YYYY</span>
1240
+ </div>
1241
+ </div>
1242
+ </div>
1237
1243
  </div>
1238
1244
  <div class="pf-c-date-picker">
1239
1245
  <div class="pf-c-date-picker__input">
@@ -1259,11 +1265,17 @@ section: components
1259
1265
  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1260
1266
  </button>
1261
1267
  </div>
1262
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1268
+ <div class="pf-c-date-picker__helper-text"></div>
1269
+ </div>
1270
+ <div class="pf-c-date-picker__helper-text">
1271
+ <div class="pf-c-helper-text">
1272
+ <div class="pf-c-helper-text__item">
1273
+ <span
1274
+ class="pf-c-helper-text__item-text"
1275
+ >Max: 08/10/2022</span>
1276
+ </div>
1277
+ </div>
1263
1278
  </div>
1264
- <div
1265
- class="pf-c-date-picker__helper-text pf-m-error"
1266
- >Max: 08/10/2022</div>
1267
1279
  </div>
1268
1280
  </div>
1269
1281
  </div>
package/docs/utilities/Accessibility/examples/Accessibility.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Accessibility
3
- section: utilities
3
+ section: utility-classes
4
4
  ---## Examples
5
5
 
6
6
  ### Screen reader only
package/docs/utilities/Alignment/examples/Alignment.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Alignment
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Alignment.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/BackgroundColor/examples/BackgroundColor.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Background color
3
- section: utilities
3
+ section: utility-classes
4
4
  ---## Examples
5
5
 
6
6
  ### Standard background colors
package/docs/utilities/BoxShadow/examples/box-shadow.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Box shadow
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './box-shadow.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/Display/examples/Display.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Display
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Display.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/Flex/examples/Flex.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Flex
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Flex.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/Float/examples/Float.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Float
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Float.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/Sizing/examples/Sizing.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Sizing
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Sizing.css'
5
5
 
6
6
  ## Examples
package/docs/utilities/Spacing/examples/Spacing.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Spacing
3
- section: utilities
3
+ section: utility-classes
4
4
  ---import './Spacing.css'
5
5
 
6
6
  ## Examples