@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/Alert/examples/Alert.md CHANGED
@@ -1892,11 +1892,16 @@ section: components
1892
1892
  aria-invalid="true"
1893
1893
  aria-describedby="alert-horizontal-example-form-name-helper"
1894
1894
  />
1895
- <p
1896
- class="pf-c-form__helper-text pf-m-error"
1897
- id="alert-horizontal-example-form-name-helper"
1898
- aria-live="polite"
1899
- >Required field</p>
1895
+ <div class="pf-c-form__helper-text" aria-live="polite">
1896
+ <div class="pf-c-helper-text">
1897
+ <div
1898
+ class="pf-c-helper-text__item pf-m-error"
1899
+ id="alert-horizontal-example-form-name-helper"
1900
+ >
1901
+ <span class="pf-c-helper-text__item-text">Required field</span>
1902
+ </div>
1903
+ </div>
1904
+ </div>
1900
1905
  </div>
1901
1906
  </div>
1902
1907
  <div class="pf-c-form__group">
@@ -1934,38 +1939,51 @@ section: components
1934
1939
  aria-invalid="true"
1935
1940
  aria-describedby="alert-horizontal-example-form-phone-helper"
1936
1941
  />
1937
- <p
1938
- class="pf-c-form__helper-text pf-m-error"
1939
- id="alert-horizontal-example-form-phone-helper"
1940
- aria-live="polite"
1941
- >Required field</p>
1942
+ <div class="pf-c-form__helper-text" aria-live="polite">
1943
+ <div class="pf-c-helper-text">
1944
+ <div
1945
+ class="pf-c-helper-text__item pf-m-error"
1946
+ id="alert-horizontal-example-form-phone-helper"
1947
+ >
1948
+ <span class="pf-c-helper-text__item-text">Required field</span>
1949
+ </div>
1950
+ </div>
1951
+ </div>
1942
1952
  </div>
1943
1953
  </div>
1944
1954
  <div
1945
1955
  class="pf-c-form__group"
1946
1956
  role="group"
1947
- aria-labelledby="alert-horizontal-example-form-check-group-legend"
1957
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1948
1958
  >
1949
1959
  <div
1950
1960
  class="pf-c-form__group-label pf-m-no-padding-top"
1951
- id="alert-horizontal-example-form-check-group-legend"
1961
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1952
1962
  ><span
1953
1963
  class="pf-c-form__label"
1954
- for="alert-horizontal-example-form-experience"
1964
+ for="alert-horizontal-example-form-check-group"
1955
1965
  >
1956
1966
  <span class="pf-c-form__label-text">Your experience</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
1957
1967
  </div>
1958
1968
  <div class="pf-c-form__group-control">
1959
- <p
1960
- class="pf-c-form__helper-text pf-m-error"
1961
- id="alert-horizontal-example-form-simple-info-helper"
1962
- aria-live="polite"
1963
- >
1964
- <span class="pf-c-form__helper-text-icon">
1965
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1966
- </span>
1967
- This is a requied field
1968
- </p>
1969
+ <div class="pf-c-form__helper-text" aria-live="polite">
1970
+ <div class="pf-c-helper-text">
1971
+ <div
1972
+ class="pf-c-helper-text__item pf-m-error"
1973
+ id="alert-horizontal-example-form-check-group-helper"
1974
+ >
1975
+ <span class="pf-c-helper-text__item-icon">
1976
+ <i
1977
+ class="fas fa-fw fa-exclamation-circle"
1978
+ aria-hidden="true"
1979
+ ></i>
1980
+ </span>
1981
+ <span
1982
+ class="pf-c-helper-text__item-text"
1983
+ >This is a required field</span>
1984
+ </div>
1985
+ </div>
1986
+ </div>
1969
1987
  <div class="pf-c-check">
1970
1988
  <input
1971
1989
  class="pf-c-check__input"
@@ -2900,7 +2918,7 @@ section: components
2900
2918
  <div class="pf-c-form__group">
2901
2919
  <div class="pf-c-form__group-label"><label
2902
2920
  class="pf-c-form__label"
2903
- for="alert-stacked-example-form-form-name"
2921
+ for="alert-stacked-example-form-name"
2904
2922
  >
2905
2923
  <span class="pf-c-form__label-text">Full name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2906
2924
  </div>
@@ -2909,22 +2927,27 @@ section: components
2909
2927
  class="pf-c-form-control"
2910
2928
  required
2911
2929
  type="text"
2912
- id="alert-stacked-example-form-form-name"
2913
- name="alert-stacked-example-form-form-name"
2930
+ id="alert-stacked-example-form-name"
2931
+ name="alert-stacked-example-form-name"
2914
2932
  aria-invalid="true"
2915
- aria-describedby="alert-stacked-example-form-form-name-helper"
2933
+ aria-describedby="alert-stacked-example-form-helper"
2916
2934
  />
2917
- <p
2918
- class="pf-c-form__helper-text pf-m-error"
2919
- id="alert-stacked-example-form-form-name-helper-name"
2920
- aria-live="polite"
2921
- >Required field</p>
2935
+ <div class="pf-c-form__helper-text" aria-live="polite">
2936
+ <div class="pf-c-helper-text">
2937
+ <div
2938
+ class="pf-c-helper-text__item pf-m-error"
2939
+ id="alert-stacked-example-form-name-helper"
2940
+ >
2941
+ <span class="pf-c-helper-text__item-text">Required field</span>
2942
+ </div>
2943
+ </div>
2944
+ </div>
2922
2945
  </div>
2923
2946
  </div>
2924
2947
  <div class="pf-c-form__group">
2925
2948
  <div class="pf-c-form__group-label"><label
2926
2949
  class="pf-c-form__label"
2927
- for="alert-stacked-example-form-form-email"
2950
+ for="alert-stacked-example-form-email"
2928
2951
  >
2929
2952
  <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2930
2953
  </div>
@@ -2933,21 +2956,28 @@ section: components
2933
2956
  class="pf-c-form-control"
2934
2957
  type="text"
2935
2958
  value="patternfly.com"
2936
- id="alert-stacked-example-form-form-email"
2937
- name="alert-stacked-example-form-form-email"
2959
+ id="alert-stacked-example-form-email"
2960
+ name="alert-stacked-example-form-email"
2938
2961
  required
2939
2962
  />
2940
2963
  </div>
2941
- <p
2942
- class="pf-c-form__helper-text pf-m-error"
2943
- id="alert-stacked-example-form-form-email-helper-email"
2944
- aria-live="polite"
2945
- >Enter a valid email address: example@gmail.com</p>
2964
+ <div class="pf-c-form__helper-text" aria-live="polite">
2965
+ <div class="pf-c-helper-text">
2966
+ <div
2967
+ class="pf-c-helper-text__item pf-m-error"
2968
+ id="alert-stacked-example-form-email-helper"
2969
+ >
2970
+ <span
2971
+ class="pf-c-helper-text__item-text"
2972
+ >Enter a valid email address: example@gmail.com</span>
2973
+ </div>
2974
+ </div>
2975
+ </div>
2946
2976
  </div>
2947
2977
  <div class="pf-c-form__group">
2948
2978
  <div class="pf-c-form__group-label"><label
2949
2979
  class="pf-c-form__label"
2950
- for="alert-stacked-example-form-form-state"
2980
+ for="alert-stacked-example-form-state"
2951
2981
  >
2952
2982
  <span class="pf-c-form__label-text">State of residence</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2953
2983
  </div>
@@ -2965,35 +2995,52 @@ section: components
2965
2995
  <option value="Option 3">MA</option>
2966
2996
  <option value="Option 4">NY</option>
2967
2997
  </select>
2968
- <p
2969
- class="pf-c-form__helper-text pf-m-error"
2970
- id="alert-stacked-example-form-form-email-helper-state"
2998
+ <div
2999
+ class="pf-c-form__helper-text"
2971
3000
  aria-live="polite"
2972
- >Required field</p>
3001
+ id="alert-stacked-example-form-state-form-email-helper-state"
3002
+ >
3003
+ <div class="pf-c-helper-text">
3004
+ <div
3005
+ class="pf-c-helper-text__item pf-m-error"
3006
+ id="alert-stacked-example-form-state-helper"
3007
+ >
3008
+ <span class="pf-c-helper-text__item-text">Required field</span>
3009
+ </div>
3010
+ </div>
3011
+ </div>
2973
3012
  </div>
2974
3013
  <div
2975
3014
  class="pf-c-form__group"
2976
3015
  role="group"
2977
- aria-labelledby="alert-stacked-example-form-check-group-legend"
3016
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2978
3017
  >
2979
3018
  <div
2980
3019
  class="pf-c-form__group-label pf-m-no-padding-top"
2981
- id="alert-stacked-example-form-check-group-legend"
3020
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2982
3021
  ><span
2983
3022
  class="pf-c-form__label"
2984
- for="alert-stacked-example-form-form-experience"
3023
+ for="alert-stacked-example-form-check-group"
2985
3024
  >
2986
3025
  <span class="pf-c-form__label-text">How can we contact you?</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
2987
- <p
2988
- class="pf-c-form__helper-text pf-m-error"
2989
- id="alert-stacked-example-form-simple-form-info-helper-contact"
2990
- aria-live="polite"
2991
- >
2992
- <span class="pf-c-form__helper-text-icon">
2993
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2994
- </span>
2995
- This is a requied field
2996
- </p>
3026
+ <div class="pf-c-form__helper-text" aria-live="polite">
3027
+ <div class="pf-c-helper-text">
3028
+ <div
3029
+ class="pf-c-helper-text__item pf-m-error"
3030
+ id="alert-stacked-example-form-check-group-helper"
3031
+ >
3032
+ <span class="pf-c-helper-text__item-icon">
3033
+ <i
3034
+ class="fas fa-fw fa-exclamation-circle"
3035
+ aria-hidden="true"
3036
+ ></i>
3037
+ </span>
3038
+ <span
3039
+ class="pf-c-helper-text__item-text"
3040
+ >This is a required field</span>
3041
+ </div>
3042
+ </div>
3043
+ </div>
2997
3044
  </div>
2998
3045
  <div class="pf-c-form__group-control pf-m-inline">
2999
3046
  <div class="pf-c-check">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: 'Card view'
3
- section: demos
3
+ section: patterns
4
4
  ---## Examples
5
5
 
6
6
  ### Card view
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: 'Dashboard'
3
3
  beta: true
4
- section: demos
4
+ section: patterns
5
5
  cssPrefix: pf-d-dashboard
6
6
  ---## Examples
7
7