@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.33
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.
- package/components/DatePicker/date-picker.css +0 -8
- package/components/DatePicker/date-picker.scss +0 -9
- package/components/HelperText/helper-text.css +4 -0
- package/components/HelperText/helper-text.scss +5 -0
- package/docs/components/DatePicker/examples/DatePicker.md +14 -3
- package/docs/components/FileUpload/examples/FileUpload.md +9 -5
- package/docs/components/Form/examples/Form.md +94 -73
- package/docs/components/HelperText/examples/HelperText.md +13 -24
- package/docs/components/Login/examples/Login.md +67 -30
- package/docs/components/Progress/examples/Progress.md +1 -1
- package/docs/demos/Alert/examples/Alert.md +105 -58
- package/docs/demos/Form/examples/BasicForms.md +129 -140
- package/docs/demos/HelperText/examples/HelperText.md +11 -8
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +87 -53
- package/docs/demos/Toolbar/examples/Toolbar.md +17 -5
- package/package.json +2 -2
- package/patternfly-no-reset.css +4 -8
- package/patternfly.css +4 -8
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -50,12 +50,18 @@ wrapperTag: div
|
|
|
50
50
|
</header>
|
|
51
51
|
<div class="pf-c-login__main-body">
|
|
52
52
|
<form class="pf-c-form" novalidate>
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
54
|
+
<div class="pf-c-helper-text pf-m-hidden">
|
|
55
|
+
<div class="pf-c-helper-text__item pf-m-error" id="-helper">
|
|
56
|
+
<span class="pf-c-helper-text__item-icon">
|
|
57
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
58
|
+
</span>
|
|
59
|
+
<span
|
|
60
|
+
class="pf-c-helper-text__item-text"
|
|
61
|
+
>Invalid login credentials.</span>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
59
65
|
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
60
66
|
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
61
67
|
|
|
@@ -266,12 +272,18 @@ wrapperTag: div
|
|
|
266
272
|
</header>
|
|
267
273
|
<div class="pf-c-login__main-body">
|
|
268
274
|
<form class="pf-c-form" novalidate>
|
|
269
|
-
<
|
|
270
|
-
<
|
|
271
|
-
<
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
276
|
+
<div class="pf-c-helper-text">
|
|
277
|
+
<div class="pf-c-helper-text__item pf-m-error" id="-helper">
|
|
278
|
+
<span class="pf-c-helper-text__item-icon">
|
|
279
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
280
|
+
</span>
|
|
281
|
+
<span
|
|
282
|
+
class="pf-c-helper-text__item-text"
|
|
283
|
+
>Invalid login credentials.</span>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
275
287
|
<div class="pf-c-form__group"><label
|
|
276
288
|
class="pf-c-form__label"
|
|
277
289
|
for="invalid-login-demo-form-username"
|
|
@@ -488,12 +500,18 @@ wrapperTag: div
|
|
|
488
500
|
</header>
|
|
489
501
|
<div class="pf-c-login__main-body">
|
|
490
502
|
<form class="pf-c-form" novalidate>
|
|
491
|
-
<
|
|
492
|
-
<
|
|
493
|
-
<
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
503
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
504
|
+
<div class="pf-c-helper-text pf-m-hidden">
|
|
505
|
+
<div class="pf-c-helper-text__item pf-m-error" id="-helper">
|
|
506
|
+
<span class="pf-c-helper-text__item-icon">
|
|
507
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
508
|
+
</span>
|
|
509
|
+
<span
|
|
510
|
+
class="pf-c-helper-text__item-text"
|
|
511
|
+
>Invalid login credentials.</span>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
497
515
|
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
498
516
|
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
499
517
|
|
|
@@ -715,12 +733,25 @@ wrapperTag: div
|
|
|
715
733
|
</header>
|
|
716
734
|
<div class="pf-c-login__main-body">
|
|
717
735
|
<form class="pf-c-form" novalidate>
|
|
718
|
-
<
|
|
719
|
-
<
|
|
720
|
-
<
|
|
721
|
-
|
|
736
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
737
|
+
<div class="pf-c-helper-text pf-m-hidden">
|
|
738
|
+
<div class="pf-c-helper-text__item pf-m-error" id="-helper">
|
|
739
|
+
<span class="pf-c-helper-text__item-icon">
|
|
740
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
741
|
+
</span>
|
|
742
|
+
<span
|
|
743
|
+
class="pf-c-helper-text__item-text"
|
|
744
|
+
>Invalid login credentials.</span>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
<div
|
|
749
|
+
class="pf-c-form__helper-text pf-m-error pf-m-hidden"
|
|
750
|
+
aria-live="polite"
|
|
751
|
+
>
|
|
752
|
+
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
722
753
|
Invalid login credentials.
|
|
723
|
-
</
|
|
754
|
+
</div>
|
|
724
755
|
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
725
756
|
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
726
757
|
|
|
@@ -988,12 +1019,18 @@ wrapperTag: div
|
|
|
988
1019
|
</header>
|
|
989
1020
|
<div class="pf-c-login__main-body">
|
|
990
1021
|
<form class="pf-c-form" novalidate>
|
|
991
|
-
<
|
|
992
|
-
<
|
|
993
|
-
<
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
1022
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1023
|
+
<div class="pf-c-helper-text pf-m-hidden">
|
|
1024
|
+
<div class="pf-c-helper-text__item pf-m-error" id="-helper">
|
|
1025
|
+
<span class="pf-c-helper-text__item-icon">
|
|
1026
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
1027
|
+
</span>
|
|
1028
|
+
<span
|
|
1029
|
+
class="pf-c-helper-text__item-text"
|
|
1030
|
+
>Invalid login credentials.</span>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
</div>
|
|
997
1034
|
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
998
1035
|
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
999
1036
|
|
|
@@ -1176,7 +1213,7 @@ wrapperTag: div
|
|
|
1176
1213
|
| `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
|
|
1177
1214
|
| `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
|
|
1178
1215
|
| `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
|
|
1179
|
-
| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text
|
|
1216
|
+
| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
|
|
1180
1217
|
| `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
|
|
1181
1218
|
| `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
|
|
1182
1219
|
| `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
|
|
@@ -589,7 +589,7 @@ cssPrefix: pf-c-progress
|
|
|
589
589
|
|
|
590
590
|
```
|
|
591
591
|
|
|
592
|
-
### Non-
|
|
592
|
+
### Non-percentage progress
|
|
593
593
|
|
|
594
594
|
If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.
|
|
595
595
|
|
|
@@ -1892,11 +1892,16 @@ section: components
|
|
|
1892
1892
|
aria-invalid="true"
|
|
1893
1893
|
aria-describedby="alert-horizontal-example-form-name-helper"
|
|
1894
1894
|
/>
|
|
1895
|
-
<
|
|
1896
|
-
class="pf-c-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
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
|
-
<
|
|
1938
|
-
class="pf-c-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
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-
|
|
1964
|
+
for="alert-horizontal-example-form-check-group"
|
|
1955
1965
|
>
|
|
1956
1966
|
<span class="pf-c-form__label-text">Your experience</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></span>
|
|
1957
1967
|
</div>
|
|
1958
1968
|
<div class="pf-c-form__group-control">
|
|
1959
|
-
<
|
|
1960
|
-
class="pf-c-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
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-
|
|
2921
|
+
for="alert-stacked-example-form-name"
|
|
2904
2922
|
>
|
|
2905
2923
|
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</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-
|
|
2913
|
-
name="alert-stacked-example-form-
|
|
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-
|
|
2933
|
+
aria-describedby="alert-stacked-example-form-helper"
|
|
2916
2934
|
/>
|
|
2917
|
-
<
|
|
2918
|
-
class="pf-c-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
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-
|
|
2950
|
+
for="alert-stacked-example-form-email"
|
|
2928
2951
|
>
|
|
2929
2952
|
<span class="pf-c-form__label-text">Email</span> <span class="pf-c-form__label-required" aria-hidden="true">*</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-
|
|
2937
|
-
name="alert-stacked-example-form-
|
|
2959
|
+
id="alert-stacked-example-form-email"
|
|
2960
|
+
name="alert-stacked-example-form-email"
|
|
2938
2961
|
required
|
|
2939
2962
|
/>
|
|
2940
2963
|
</div>
|
|
2941
|
-
<
|
|
2942
|
-
class="pf-c-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
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-
|
|
2980
|
+
for="alert-stacked-example-form-state"
|
|
2951
2981
|
>
|
|
2952
2982
|
<span class="pf-c-form__label-text">State of residence</span> <span class="pf-c-form__label-required" aria-hidden="true">*</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
|
-
<
|
|
2969
|
-
class="pf-c-form__helper-text
|
|
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
|
-
|
|
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-
|
|
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> <span class="pf-c-form__label-required" aria-hidden="true">*</span></span>
|
|
2987
|
-
<
|
|
2988
|
-
class="pf-c-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
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">
|