@patternfly/patternfly 6.0.0-alpha.160 → 6.0.0-alpha.162

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 (24) hide show
  1. package/components/Nav/nav.css +1 -0
  2. package/components/Nav/nav.scss +1 -0
  3. package/components/Page/page.css +38 -54
  4. package/components/Page/page.scss +19 -32
  5. package/components/Toolbar/toolbar.css +1 -0
  6. package/components/Toolbar/toolbar.scss +1 -0
  7. package/components/_index.css +40 -54
  8. package/docs/components/Page/examples/Page.css +5 -9
  9. package/docs/components/Page/examples/Page.md +71 -32
  10. package/docs/demos/Alert/examples/Alert.md +393 -374
  11. package/docs/demos/CardView/examples/CardView.md +717 -708
  12. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  13. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  15. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  16. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  17. package/docs/demos/Table/examples/Table.md +9458 -9105
  18. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  19. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +40 -54
  22. package/patternfly.css +40 -54
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -683,207 +683,219 @@ section: components
683
683
  </div>
684
684
  </section>
685
685
  <section class="pf-v6-c-page__main-section pf-m-light">
686
- <form class="pf-v6-c-form pf-m-limit-width pf-m-horizontal" novalidate>
687
- <div class="pf-v6-c-form__alert">
688
- <div
689
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
690
- aria-label="Inline danger alert"
691
- >
692
- <div class="pf-v6-c-alert__icon">
693
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
694
- </div>
695
- <p class="pf-v6-c-alert__title">
696
- <span class="pf-v6-screen-reader">Danger alert:</span>
697
- Fill out all required fields before continuing.
698
- </p>
699
- </div>
700
- </div>
701
- <div class="pf-v6-c-form__group">
702
- <div class="pf-v6-c-form__group-label"><label
703
- class="pf-v6-c-form__label"
704
- for="alert-horizontal-example-form-name"
686
+ <div class="pf-v6-c-page__main-body">
687
+ <form
688
+ class="pf-v6-c-form pf-m-limit-width pf-m-horizontal"
689
+ novalidate
690
+ >
691
+ <div class="pf-v6-c-form__alert">
692
+ <div
693
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
694
+ aria-label="Inline danger alert"
705
695
  >
706
- <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
707
- class="pf-v6-c-form__label-required"
708
- aria-hidden="true"
709
- >&#42;</span></label>
696
+ <div class="pf-v6-c-alert__icon">
697
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
698
+ </div>
699
+ <p class="pf-v6-c-alert__title">
700
+ <span class="pf-v6-screen-reader">Danger alert:</span>
701
+ Fill out all required fields before continuing.
702
+ </p>
703
+ </div>
710
704
  </div>
711
- <div class="pf-v6-c-form__group-control">
712
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
713
- <input
714
- required
715
- type="text"
716
- id="alert-horizontal-example-form-name"
717
- name="alert-horizontal-example-form-name"
718
- aria-invalid="true"
719
- aria-describedby="alert-horizontal-example-form-name-helper"
720
- />
721
- <span class="pf-v6-c-form-control__utilities">
722
- <span class="pf-v6-c-form-control__icon pf-m-status">
723
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
705
+ <div class="pf-v6-c-form__group">
706
+ <div class="pf-v6-c-form__group-label"><label
707
+ class="pf-v6-c-form__label"
708
+ for="alert-horizontal-example-form-name"
709
+ >
710
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
711
+ class="pf-v6-c-form__label-required"
712
+ aria-hidden="true"
713
+ >&#42;</span></label>
714
+ </div>
715
+ <div class="pf-v6-c-form__group-control">
716
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
717
+ <input
718
+ required
719
+ type="text"
720
+ id="alert-horizontal-example-form-name"
721
+ name="alert-horizontal-example-form-name"
722
+ aria-invalid="true"
723
+ aria-describedby="alert-horizontal-example-form-name-helper"
724
+ />
725
+ <span class="pf-v6-c-form-control__utilities">
726
+ <span class="pf-v6-c-form-control__icon pf-m-status">
727
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
728
+ </span>
724
729
  </span>
725
730
  </span>
726
- </span>
727
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
728
- <div class="pf-v6-c-helper-text">
729
- <div
730
- class="pf-v6-c-helper-text__item pf-m-error"
731
- id="alert-horizontal-example-form-name-helper"
732
- >
733
- <span class="pf-v6-c-helper-text__item-icon">
734
- <i
735
- class="fas fa-fw fa-exclamation-circle"
736
- aria-hidden="true"
737
- ></i>
738
- </span>
739
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
731
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
732
+ <div class="pf-v6-c-helper-text">
733
+ <div
734
+ class="pf-v6-c-helper-text__item pf-m-error"
735
+ id="alert-horizontal-example-form-name-helper"
736
+ >
737
+ <span class="pf-v6-c-helper-text__item-icon">
738
+ <i
739
+ class="fas fa-fw fa-exclamation-circle"
740
+ aria-hidden="true"
741
+ ></i>
742
+ </span>
743
+ <span
744
+ class="pf-v6-c-helper-text__item-text"
745
+ >Required field</span>
746
+ </div>
740
747
  </div>
741
748
  </div>
742
749
  </div>
743
750
  </div>
744
- </div>
745
- <div class="pf-v6-c-form__group">
746
- <div class="pf-v6-c-form__group-label"><label
747
- class="pf-v6-c-form__label"
748
- for="alert-horizontal-example-form-email"
749
- >
750
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
751
- class="pf-v6-c-form__label-required"
752
- aria-hidden="true"
753
- >&#42;</span></label>
754
- </div>
755
- <div class="pf-v6-c-form__group-control">
756
- <span class="pf-v6-c-form-control pf-m-required">
757
- <input
758
- required
759
- type="text"
760
- value="patternfly@patternfly.com"
761
- id="alert-horizontal-example-form-email"
762
- name="alert-horizontal-example-form-email"
763
- />
764
- </span>
765
- </div>
766
- </div>
767
- <div class="pf-v6-c-form__group">
768
- <div class="pf-v6-c-form__group-label"><label
769
- class="pf-v6-c-form__label"
770
- for="alert-horizontal-example-form-phone"
771
- >
772
- <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
773
- class="pf-v6-c-form__label-required"
774
- aria-hidden="true"
775
- >&#42;</span></label>
751
+ <div class="pf-v6-c-form__group">
752
+ <div class="pf-v6-c-form__group-label"><label
753
+ class="pf-v6-c-form__label"
754
+ for="alert-horizontal-example-form-email"
755
+ >
756
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
757
+ class="pf-v6-c-form__label-required"
758
+ aria-hidden="true"
759
+ >&#42;</span></label>
760
+ </div>
761
+ <div class="pf-v6-c-form__group-control">
762
+ <span class="pf-v6-c-form-control pf-m-required">
763
+ <input
764
+ required
765
+ type="text"
766
+ value="patternfly@patternfly.com"
767
+ id="alert-horizontal-example-form-email"
768
+ name="alert-horizontal-example-form-email"
769
+ />
770
+ </span>
771
+ </div>
776
772
  </div>
777
- <div class="pf-v6-c-form__group-control">
778
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
779
- <input
780
- required
781
- type="text"
782
- id="alert-horizontal-example-form-phone"
783
- name="alert-horizontal-example-form-phone"
784
- aria-invalid="true"
785
- aria-describedby="alert-horizontal-example-form-phone-helper"
786
- />
787
- <span class="pf-v6-c-form-control__utilities">
788
- <span class="pf-v6-c-form-control__icon pf-m-status">
789
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
773
+ <div class="pf-v6-c-form__group">
774
+ <div class="pf-v6-c-form__group-label"><label
775
+ class="pf-v6-c-form__label"
776
+ for="alert-horizontal-example-form-phone"
777
+ >
778
+ <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
779
+ class="pf-v6-c-form__label-required"
780
+ aria-hidden="true"
781
+ >&#42;</span></label>
782
+ </div>
783
+ <div class="pf-v6-c-form__group-control">
784
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
785
+ <input
786
+ required
787
+ type="text"
788
+ id="alert-horizontal-example-form-phone"
789
+ name="alert-horizontal-example-form-phone"
790
+ aria-invalid="true"
791
+ aria-describedby="alert-horizontal-example-form-phone-helper"
792
+ />
793
+ <span class="pf-v6-c-form-control__utilities">
794
+ <span class="pf-v6-c-form-control__icon pf-m-status">
795
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
796
+ </span>
790
797
  </span>
791
798
  </span>
792
- </span>
793
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
794
- <div class="pf-v6-c-helper-text">
795
- <div
796
- class="pf-v6-c-helper-text__item pf-m-error"
797
- id="alert-horizontal-example-form-phone-helper"
798
- >
799
- <span class="pf-v6-c-helper-text__item-icon">
800
- <i
801
- class="fas fa-fw fa-exclamation-circle"
802
- aria-hidden="true"
803
- ></i>
804
- </span>
805
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
799
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
800
+ <div class="pf-v6-c-helper-text">
801
+ <div
802
+ class="pf-v6-c-helper-text__item pf-m-error"
803
+ id="alert-horizontal-example-form-phone-helper"
804
+ >
805
+ <span class="pf-v6-c-helper-text__item-icon">
806
+ <i
807
+ class="fas fa-fw fa-exclamation-circle"
808
+ aria-hidden="true"
809
+ ></i>
810
+ </span>
811
+ <span
812
+ class="pf-v6-c-helper-text__item-text"
813
+ >Required field</span>
814
+ </div>
806
815
  </div>
807
816
  </div>
808
817
  </div>
809
818
  </div>
810
- </div>
811
- <div
812
- class="pf-v6-c-form__group"
813
- role="group"
814
- aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
815
- >
816
819
  <div
817
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
818
- id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
819
- ><span
820
- class="pf-v6-c-form__label"
821
- for="alert-horizontal-example-form-check-group"
822
- >
823
- <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
824
- class="pf-v6-c-form__label-required"
825
- aria-hidden="true"
826
- >&#42;</span></span>
827
- </div>
828
- <div class="pf-v6-c-form__group-control">
829
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
830
- <div class="pf-v6-c-helper-text">
831
- <div
832
- class="pf-v6-c-helper-text__item pf-m-error"
833
- id="alert-horizontal-example-form-check-group-helper"
834
- >
835
- <span class="pf-v6-c-helper-text__item-icon">
836
- <i
837
- class="fas fa-fw fa-exclamation-circle"
838
- aria-hidden="true"
839
- ></i>
840
- </span>
841
- <span
842
- class="pf-v6-c-helper-text__item-text"
843
- >This is a required field</span>
820
+ class="pf-v6-c-form__group"
821
+ role="group"
822
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
823
+ >
824
+ <div
825
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
826
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
827
+ ><span
828
+ class="pf-v6-c-form__label"
829
+ for="alert-horizontal-example-form-check-group"
830
+ >
831
+ <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
832
+ class="pf-v6-c-form__label-required"
833
+ aria-hidden="true"
834
+ >&#42;</span></span>
835
+ </div>
836
+ <div class="pf-v6-c-form__group-control">
837
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
838
+ <div class="pf-v6-c-helper-text">
839
+ <div
840
+ class="pf-v6-c-helper-text__item pf-m-error"
841
+ id="alert-horizontal-example-form-check-group-helper"
842
+ >
843
+ <span class="pf-v6-c-helper-text__item-icon">
844
+ <i
845
+ class="fas fa-fw fa-exclamation-circle"
846
+ aria-hidden="true"
847
+ ></i>
848
+ </span>
849
+ <span
850
+ class="pf-v6-c-helper-text__item-text"
851
+ >This is a required field</span>
852
+ </div>
844
853
  </div>
845
854
  </div>
846
- </div>
847
- <div class="pf-v6-c-check">
848
- <input
849
- class="pf-v6-c-check__input"
850
- type="checkbox"
851
- id="alt-checkbox1"
852
- name="alt-checkbox1"
853
- />
855
+ <div class="pf-v6-c-check">
856
+ <input
857
+ class="pf-v6-c-check__input"
858
+ type="checkbox"
859
+ id="alt-checkbox1"
860
+ name="alt-checkbox1"
861
+ />
854
862
 
855
- <label
856
- class="pf-v6-c-check__label"
857
- for="alt-checkbox1"
858
- >Follow up via email.</label>
859
- </div>
860
- <div class="pf-v6-c-check">
861
- <input
862
- class="pf-v6-c-check__input"
863
- type="checkbox"
864
- id="alt-checkbox2"
865
- name="alt-checkbox2"
866
- />
863
+ <label
864
+ class="pf-v6-c-check__label"
865
+ for="alt-checkbox1"
866
+ >Follow up via email.</label>
867
+ </div>
868
+ <div class="pf-v6-c-check">
869
+ <input
870
+ class="pf-v6-c-check__input"
871
+ type="checkbox"
872
+ id="alt-checkbox2"
873
+ name="alt-checkbox2"
874
+ />
867
875
 
868
- <label
869
- class="pf-v6-c-check__label"
870
- for="alt-checkbox2"
871
- >Remember my password for 30 days.</label>
876
+ <label
877
+ class="pf-v6-c-check__label"
878
+ for="alt-checkbox2"
879
+ >Remember my password for 30 days.</label>
880
+ </div>
872
881
  </div>
873
882
  </div>
874
- </div>
875
- <div class="pf-v6-c-form__group pf-m-action">
876
- <div class="pf-v6-c-form__group-control">
877
- <div class="pf-v6-c-form__actions">
878
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
879
- <button
880
- class="pf-v6-c-button pf-m-secondary"
881
- type="reset"
882
- >Cancel</button>
883
+ <div class="pf-v6-c-form__group pf-m-action">
884
+ <div class="pf-v6-c-form__group-control">
885
+ <div class="pf-v6-c-form__actions">
886
+ <button
887
+ class="pf-v6-c-button pf-m-primary"
888
+ type="submit"
889
+ >Submit</button>
890
+ <button
891
+ class="pf-v6-c-button pf-m-secondary"
892
+ type="reset"
893
+ >Cancel</button>
894
+ </div>
883
895
  </div>
884
896
  </div>
885
- </div>
886
- </form>
897
+ </form>
898
+ </div>
887
899
  </section>
888
900
  </main>
889
901
  </div>
@@ -1175,52 +1187,94 @@ section: components
1175
1187
  </div>
1176
1188
  </section>
1177
1189
  <section class="pf-v6-c-page__main-section pf-m-light">
1178
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1179
- <div class="pf-v6-c-form__alert">
1180
- <div
1181
- class="pf-v6-c-alert pf-m-danger pf-m-inline"
1182
- aria-label="Inline danger alert"
1183
- >
1184
- <div class="pf-v6-c-alert__icon">
1185
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1186
- </div>
1187
- <p class="pf-v6-c-alert__title">
1188
- <span class="pf-v6-screen-reader">Danger alert:</span>
1189
- Fill out all required fields before continuing.
1190
- </p>
1191
- </div>
1192
- </div>
1193
- <div class="pf-v6-c-form__group">
1194
- <div class="pf-v6-c-form__group-label"><label
1195
- class="pf-v6-c-form__label"
1196
- for="alert-stacked-example-form-name"
1190
+ <div class="pf-v6-c-page__main-body">
1191
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1192
+ <div class="pf-v6-c-form__alert">
1193
+ <div
1194
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
1195
+ aria-label="Inline danger alert"
1197
1196
  >
1198
- <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1199
- class="pf-v6-c-form__label-required"
1200
- aria-hidden="true"
1201
- >&#42;</span></label>
1197
+ <div class="pf-v6-c-alert__icon">
1198
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1199
+ </div>
1200
+ <p class="pf-v6-c-alert__title">
1201
+ <span class="pf-v6-screen-reader">Danger alert:</span>
1202
+ Fill out all required fields before continuing.
1203
+ </p>
1204
+ </div>
1202
1205
  </div>
1203
- <div class="pf-v6-c-form__group-control">
1204
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1205
- <input
1206
- required
1207
- type="text"
1208
- id="alert-stacked-example-form-name"
1209
- name="alert-stacked-example-form-name"
1210
- aria-invalid="true"
1211
- aria-describedby="alert-stacked-example-form-helper"
1212
- />
1213
- <span class="pf-v6-c-form-control__utilities">
1214
- <span class="pf-v6-c-form-control__icon pf-m-status">
1215
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1206
+ <div class="pf-v6-c-form__group">
1207
+ <div class="pf-v6-c-form__group-label"><label
1208
+ class="pf-v6-c-form__label"
1209
+ for="alert-stacked-example-form-name"
1210
+ >
1211
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1212
+ class="pf-v6-c-form__label-required"
1213
+ aria-hidden="true"
1214
+ >&#42;</span></label>
1215
+ </div>
1216
+ <div class="pf-v6-c-form__group-control">
1217
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1218
+ <input
1219
+ required
1220
+ type="text"
1221
+ id="alert-stacked-example-form-name"
1222
+ name="alert-stacked-example-form-name"
1223
+ aria-invalid="true"
1224
+ aria-describedby="alert-stacked-example-form-helper"
1225
+ />
1226
+ <span class="pf-v6-c-form-control__utilities">
1227
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1228
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1229
+ </span>
1216
1230
  </span>
1217
1231
  </span>
1218
- </span>
1232
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1233
+ <div class="pf-v6-c-helper-text">
1234
+ <div
1235
+ class="pf-v6-c-helper-text__item pf-m-error"
1236
+ id="alert-stacked-example-form-name-helper"
1237
+ >
1238
+ <span class="pf-v6-c-helper-text__item-icon">
1239
+ <i
1240
+ class="fas fa-fw fa-exclamation-circle"
1241
+ aria-hidden="true"
1242
+ ></i>
1243
+ </span>
1244
+ <span
1245
+ class="pf-v6-c-helper-text__item-text"
1246
+ >Required field</span>
1247
+ </div>
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+ </div>
1252
+ <div class="pf-v6-c-form__group">
1253
+ <div class="pf-v6-c-form__group-label"><label
1254
+ class="pf-v6-c-form__label"
1255
+ for="alert-stacked-example-form-email"
1256
+ >
1257
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1258
+ class="pf-v6-c-form__label-required"
1259
+ aria-hidden="true"
1260
+ >&#42;</span></label>
1261
+ </div>
1262
+ <div class="pf-v6-c-form__group-control">
1263
+ <span class="pf-v6-c-form-control pf-m-required">
1264
+ <input
1265
+ required
1266
+ type="text"
1267
+ value="patternfly.com"
1268
+ id="alert-stacked-example-form-email"
1269
+ name="alert-stacked-example-form-email"
1270
+ />
1271
+ </span>
1272
+ </div>
1219
1273
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
1220
1274
  <div class="pf-v6-c-helper-text">
1221
1275
  <div
1222
1276
  class="pf-v6-c-helper-text__item pf-m-error"
1223
- id="alert-stacked-example-form-name-helper"
1277
+ id="alert-stacked-example-form-email-helper"
1224
1278
  >
1225
1279
  <span class="pf-v6-c-helper-text__item-icon">
1226
1280
  <i
@@ -1228,128 +1282,56 @@ section: components
1228
1282
  aria-hidden="true"
1229
1283
  ></i>
1230
1284
  </span>
1231
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1285
+ <span
1286
+ class="pf-v6-c-helper-text__item-text"
1287
+ >Enter a valid email address: example@gmail.com</span>
1232
1288
  </div>
1233
1289
  </div>
1234
1290
  </div>
1235
1291
  </div>
1236
- </div>
1237
- <div class="pf-v6-c-form__group">
1238
- <div class="pf-v6-c-form__group-label"><label
1239
- class="pf-v6-c-form__label"
1240
- for="alert-stacked-example-form-email"
1241
- >
1242
- <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1243
- class="pf-v6-c-form__label-required"
1244
- aria-hidden="true"
1245
- >&#42;</span></label>
1246
- </div>
1247
- <div class="pf-v6-c-form__group-control">
1248
- <span class="pf-v6-c-form-control pf-m-required">
1249
- <input
1292
+ <div class="pf-v6-c-form__group">
1293
+ <div class="pf-v6-c-form__group-label"><label
1294
+ class="pf-v6-c-form__label"
1295
+ for="alert-stacked-example-form-state"
1296
+ >
1297
+ <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1298
+ class="pf-v6-c-form__label-required"
1299
+ aria-hidden="true"
1300
+ >&#42;</span></label>
1301
+ </div>
1302
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1303
+ <select
1304
+ class
1250
1305
  required
1251
- type="text"
1252
- value="patternfly.com"
1253
- id="alert-stacked-example-form-email"
1254
- name="alert-stacked-example-form-email"
1255
- />
1256
- </span>
1257
- </div>
1258
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1259
- <div class="pf-v6-c-helper-text">
1260
- <div
1261
- class="pf-v6-c-helper-text__item pf-m-error"
1262
- id="alert-stacked-example-form-email-helper"
1306
+ aria-invalid="true"
1307
+ id="select-group-error"
1308
+ name="select-group-error"
1309
+ aria-label="Error state select group example"
1263
1310
  >
1264
- <span class="pf-v6-c-helper-text__item-icon">
1265
- <i
1266
- class="fas fa-fw fa-exclamation-circle"
1267
- aria-hidden="true"
1268
- ></i>
1311
+ <option value>Select a state</option>
1312
+ <option value="Option 1">CA</option>
1313
+ <option value="Option 2">FL</option>
1314
+ <option value="Option 3">MA</option>
1315
+ <option value="Option 4">NY</option>
1316
+ </select>
1317
+ <span class="pf-v6-c-form-control__utilities">
1318
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1319
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1320
+ </span>
1321
+ <span class="pf-v6-c-form-control__toggle-icon">
1322
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1269
1323
  </span>
1270
- <span
1271
- class="pf-v6-c-helper-text__item-text"
1272
- >Enter a valid email address: example@gmail.com</span>
1273
- </div>
1274
- </div>
1275
- </div>
1276
- </div>
1277
- <div class="pf-v6-c-form__group">
1278
- <div class="pf-v6-c-form__group-label"><label
1279
- class="pf-v6-c-form__label"
1280
- for="alert-stacked-example-form-state"
1281
- >
1282
- <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1283
- class="pf-v6-c-form__label-required"
1284
- aria-hidden="true"
1285
- >&#42;</span></label>
1286
- </div>
1287
- <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1288
- <select
1289
- class
1290
- required
1291
- aria-invalid="true"
1292
- id="select-group-error"
1293
- name="select-group-error"
1294
- aria-label="Error state select group example"
1295
- >
1296
- <option value>Select a state</option>
1297
- <option value="Option 1">CA</option>
1298
- <option value="Option 2">FL</option>
1299
- <option value="Option 3">MA</option>
1300
- <option value="Option 4">NY</option>
1301
- </select>
1302
- <span class="pf-v6-c-form-control__utilities">
1303
- <span class="pf-v6-c-form-control__icon pf-m-status">
1304
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1305
- </span>
1306
- <span class="pf-v6-c-form-control__toggle-icon">
1307
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1308
1324
  </span>
1309
1325
  </span>
1310
- </span>
1311
- <div
1312
- class="pf-v6-c-form__helper-text"
1313
- aria-live="polite"
1314
- id="alert-stacked-example-form-state-form-email-helper-state"
1315
- >
1316
- <div class="pf-v6-c-helper-text">
1317
- <div
1318
- class="pf-v6-c-helper-text__item pf-m-error"
1319
- id="alert-stacked-example-form-state-helper"
1320
- >
1321
- <span class="pf-v6-c-helper-text__item-icon">
1322
- <i
1323
- class="fas fa-fw fa-exclamation-circle"
1324
- aria-hidden="true"
1325
- ></i>
1326
- </span>
1327
- <span class="pf-v6-c-helper-text__item-text">Required field</span>
1328
- </div>
1329
- </div>
1330
- </div>
1331
- </div>
1332
- <div
1333
- class="pf-v6-c-form__group"
1334
- role="group"
1335
- aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1336
- >
1337
- <div
1338
- class="pf-v6-c-form__group-label pf-m-no-padding-top"
1339
- id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1340
- ><span
1341
- class="pf-v6-c-form__label"
1342
- for="alert-stacked-example-form-check-group"
1326
+ <div
1327
+ class="pf-v6-c-form__helper-text"
1328
+ aria-live="polite"
1329
+ id="alert-stacked-example-form-state-form-email-helper-state"
1343
1330
  >
1344
- <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1345
- class="pf-v6-c-form__label-required"
1346
- aria-hidden="true"
1347
- >&#42;</span></span>
1348
- <div class="pf-v6-c-form__helper-text" aria-live="polite">
1349
1331
  <div class="pf-v6-c-helper-text">
1350
1332
  <div
1351
1333
  class="pf-v6-c-helper-text__item pf-m-error"
1352
- id="alert-stacked-example-form-check-group-helper"
1334
+ id="alert-stacked-example-form-state-helper"
1353
1335
  >
1354
1336
  <span class="pf-v6-c-helper-text__item-icon">
1355
1337
  <i
@@ -1357,67 +1339,104 @@ section: components
1357
1339
  aria-hidden="true"
1358
1340
  ></i>
1359
1341
  </span>
1360
- <span
1361
- class="pf-v6-c-helper-text__item-text"
1362
- >This is a required field</span>
1342
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1363
1343
  </div>
1364
1344
  </div>
1365
1345
  </div>
1366
1346
  </div>
1367
- <div class="pf-v6-c-form__group-control pf-m-inline">
1368
- <div class="pf-v6-c-check">
1369
- <input
1370
- class="pf-v6-c-check__input"
1371
- type="checkbox"
1372
- id="alt-form-checkbox1"
1373
- name="alt-form-checkbox1"
1374
- />
1375
-
1376
- <label
1377
- class="pf-v6-c-check__label"
1378
- for="alt-form-checkbox1"
1379
- >Email</label>
1347
+ <div
1348
+ class="pf-v6-c-form__group"
1349
+ role="group"
1350
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1351
+ >
1352
+ <div
1353
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
1354
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1355
+ ><span
1356
+ class="pf-v6-c-form__label"
1357
+ for="alert-stacked-example-form-check-group"
1358
+ >
1359
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1360
+ class="pf-v6-c-form__label-required"
1361
+ aria-hidden="true"
1362
+ >&#42;</span></span>
1363
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1364
+ <div class="pf-v6-c-helper-text">
1365
+ <div
1366
+ class="pf-v6-c-helper-text__item pf-m-error"
1367
+ id="alert-stacked-example-form-check-group-helper"
1368
+ >
1369
+ <span class="pf-v6-c-helper-text__item-icon">
1370
+ <i
1371
+ class="fas fa-fw fa-exclamation-circle"
1372
+ aria-hidden="true"
1373
+ ></i>
1374
+ </span>
1375
+ <span
1376
+ class="pf-v6-c-helper-text__item-text"
1377
+ >This is a required field</span>
1378
+ </div>
1379
+ </div>
1380
+ </div>
1380
1381
  </div>
1381
- <div class="pf-v6-c-check">
1382
- <input
1383
- class="pf-v6-c-check__input"
1384
- type="checkbox"
1385
- id="alt-form-checkbox2"
1386
- name="alt-form-checkbox2"
1387
- />
1382
+ <div class="pf-v6-c-form__group-control pf-m-inline">
1383
+ <div class="pf-v6-c-check">
1384
+ <input
1385
+ class="pf-v6-c-check__input"
1386
+ type="checkbox"
1387
+ id="alt-form-checkbox1"
1388
+ name="alt-form-checkbox1"
1389
+ />
1388
1390
 
1389
- <label
1390
- class="pf-v6-c-check__label"
1391
- for="alt-form-checkbox2"
1392
- >Phone</label>
1393
- </div>
1394
- <div class="pf-v6-c-check">
1395
- <input
1396
- class="pf-v6-c-check__input"
1397
- type="checkbox"
1398
- id="alt-form-checkbox3"
1399
- name="alt-form-checkbox3"
1400
- />
1391
+ <label
1392
+ class="pf-v6-c-check__label"
1393
+ for="alt-form-checkbox1"
1394
+ >Email</label>
1395
+ </div>
1396
+ <div class="pf-v6-c-check">
1397
+ <input
1398
+ class="pf-v6-c-check__input"
1399
+ type="checkbox"
1400
+ id="alt-form-checkbox2"
1401
+ name="alt-form-checkbox2"
1402
+ />
1403
+
1404
+ <label
1405
+ class="pf-v6-c-check__label"
1406
+ for="alt-form-checkbox2"
1407
+ >Phone</label>
1408
+ </div>
1409
+ <div class="pf-v6-c-check">
1410
+ <input
1411
+ class="pf-v6-c-check__input"
1412
+ type="checkbox"
1413
+ id="alt-form-checkbox3"
1414
+ name="alt-form-checkbox3"
1415
+ />
1401
1416
 
1402
- <label
1403
- class="pf-v6-c-check__label"
1404
- for="alt-form-checkbox3"
1405
- >Mail</label>
1417
+ <label
1418
+ class="pf-v6-c-check__label"
1419
+ for="alt-form-checkbox3"
1420
+ >Mail</label>
1421
+ </div>
1406
1422
  </div>
1407
1423
  </div>
1408
- </div>
1409
- <div class="pf-v6-c-form__group pf-m-action">
1410
- <div class="pf-v6-c-form__group-control">
1411
- <div class="pf-v6-c-form__actions">
1412
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1413
- <button
1414
- class="pf-v6-c-button pf-m-secondary"
1415
- type="reset"
1416
- >Cancel</button>
1424
+ <div class="pf-v6-c-form__group pf-m-action">
1425
+ <div class="pf-v6-c-form__group-control">
1426
+ <div class="pf-v6-c-form__actions">
1427
+ <button
1428
+ class="pf-v6-c-button pf-m-primary"
1429
+ type="submit"
1430
+ >Submit</button>
1431
+ <button
1432
+ class="pf-v6-c-button pf-m-secondary"
1433
+ type="reset"
1434
+ >Cancel</button>
1435
+ </div>
1417
1436
  </div>
1418
1437
  </div>
1419
- </div>
1420
- </form>
1438
+ </form>
1439
+ </div>
1421
1440
  </section>
1422
1441
  </main>
1423
1442
  </div>