@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.1

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -2811,6 +2811,588 @@ wrapperTag: div
2811
2811
 
2812
2812
  ```
2813
2813
 
2814
+ ### Warning on step
2815
+
2816
+ ```html isFullscreen
2817
+ <div class="pf-v6-c-wizard">
2818
+ <div class="pf-v6-c-wizard__header">
2819
+ <div class="pf-v6-c-wizard__close">
2820
+ <button
2821
+ class="pf-v6-c-button pf-m-plain"
2822
+ type="button"
2823
+ aria-label="Close"
2824
+ >
2825
+ <span class="pf-v6-c-button__icon">
2826
+ <i class="fas fa-times" aria-hidden="true"></i>
2827
+ </span>
2828
+ </button>
2829
+ </div>
2830
+ <div class="pf-v6-c-wizard__title">
2831
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
2832
+ </div>
2833
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
2834
+ </div>
2835
+ <button
2836
+ aria-label="Wizard Header Toggle"
2837
+ class="pf-v6-c-wizard__toggle"
2838
+ aria-expanded="false"
2839
+ >
2840
+ <span class="pf-v6-c-wizard__toggle-list">
2841
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-warning">
2842
+ <span class="pf-v6-c-wizard__toggle-status-icon">
2843
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2844
+ </span>
2845
+ Configuration
2846
+ <i
2847
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2848
+ aria-hidden="true"
2849
+ ></i>
2850
+ </span>
2851
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2852
+ </span>
2853
+ <span class="pf-v6-c-wizard__toggle-icon">
2854
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2855
+ </span>
2856
+ </button>
2857
+ <div class="pf-v6-c-wizard__outer-wrap">
2858
+ <div class="pf-v6-c-wizard__inner-wrap">
2859
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
2860
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2861
+ <li class="pf-v6-c-wizard__nav-item">
2862
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2863
+ <span class="pf-v6-c-wizard__nav-link-main">
2864
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
2865
+ </span>
2866
+ </button>
2867
+ </li>
2868
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
2869
+ <button
2870
+ class="pf-v6-c-wizard__nav-link pf-m-warning pf-m-current"
2871
+ type="button"
2872
+ aria-expanded="true"
2873
+ >
2874
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
2875
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2876
+ </span>
2877
+ <span class="pf-v6-c-wizard__nav-link-main">
2878
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2879
+ <span class="pf-v6-c-wizard__nav-link-toggle">
2880
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2881
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2882
+ </span>
2883
+ </span>
2884
+ </span>
2885
+ </button>
2886
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2887
+ <li class="pf-v6-c-wizard__nav-item">
2888
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2889
+ <span class="pf-v6-c-wizard__nav-link-main">
2890
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
2891
+ </span>
2892
+ </button>
2893
+ </li>
2894
+ <li class="pf-v6-c-wizard__nav-item">
2895
+ <button
2896
+ class="pf-v6-c-wizard__nav-link pf-m-current"
2897
+ type="button"
2898
+ aria-current="page"
2899
+ >
2900
+ <span class="pf-v6-c-wizard__nav-link-main">
2901
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
2902
+ </span>
2903
+ </button>
2904
+ </li>
2905
+ <li class="pf-v6-c-wizard__nav-item">
2906
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2907
+ <span class="pf-v6-c-wizard__nav-link-main">
2908
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
2909
+ </span>
2910
+ </button>
2911
+ </li>
2912
+ </ol>
2913
+ </li>
2914
+ <li class="pf-v6-c-wizard__nav-item">
2915
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2916
+ <span class="pf-v6-c-wizard__nav-link-main">
2917
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
2918
+ </span>
2919
+ </button>
2920
+ </li>
2921
+ <li class="pf-v6-c-wizard__nav-item">
2922
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
2923
+ <span class="pf-v6-c-wizard__nav-link-main">
2924
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
2925
+ </span>
2926
+ </button>
2927
+ </li>
2928
+ </ol>
2929
+ </nav>
2930
+ <main class="pf-v6-c-wizard__main" tabindex="0">
2931
+ <div class="pf-v6-c-wizard__main-body">
2932
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
2933
+ <div class="pf-v6-c-form__group">
2934
+ <div class="pf-v6-c-form__group-label"><label
2935
+ class="pf-v6-c-form__label"
2936
+ for="wizard-warning-on-step-example-form-field1"
2937
+ >
2938
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
2939
+ class="pf-v6-c-form__label-required"
2940
+ aria-hidden="true"
2941
+ >&#42;</span></label>
2942
+ </div>
2943
+ <div class="pf-v6-c-form__group-control">
2944
+ <span class="pf-v6-c-form-control">
2945
+ <input
2946
+ type="text"
2947
+ id="wizard-warning-on-step-example-form-field1"
2948
+ name="wizard-warning-on-step-example-form-field1"
2949
+ />
2950
+ </span>
2951
+ </div>
2952
+ </div>
2953
+ <div class="pf-v6-c-form__group">
2954
+ <div class="pf-v6-c-form__group-label"><label
2955
+ class="pf-v6-c-form__label"
2956
+ for="wizard-warning-on-step-example-form-field2"
2957
+ >
2958
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
2959
+ class="pf-v6-c-form__label-required"
2960
+ aria-hidden="true"
2961
+ >&#42;</span></label>
2962
+ </div>
2963
+ <div class="pf-v6-c-form__group-control">
2964
+ <span class="pf-v6-c-form-control">
2965
+ <input
2966
+ type="text"
2967
+ id="wizard-warning-on-step-example-form-field2"
2968
+ name="wizard-warning-on-step-example-form-field2"
2969
+ />
2970
+ </span>
2971
+ </div>
2972
+ </div>
2973
+ <div class="pf-v6-c-form__group">
2974
+ <div class="pf-v6-c-form__group-label"><label
2975
+ class="pf-v6-c-form__label"
2976
+ for="wizard-warning-on-step-example-form-field3"
2977
+ >
2978
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
2979
+ class="pf-v6-c-form__label-required"
2980
+ aria-hidden="true"
2981
+ >&#42;</span></label>
2982
+ </div>
2983
+ <div class="pf-v6-c-form__group-control">
2984
+ <span class="pf-v6-c-form-control">
2985
+ <input
2986
+ type="text"
2987
+ id="wizard-warning-on-step-example-form-field3"
2988
+ name="wizard-warning-on-step-example-form-field3"
2989
+ />
2990
+ </span>
2991
+ </div>
2992
+ </div>
2993
+ <div class="pf-v6-c-form__group">
2994
+ <div class="pf-v6-c-form__group-label"><label
2995
+ class="pf-v6-c-form__label"
2996
+ for="wizard-warning-on-step-example-form-field4"
2997
+ >
2998
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
2999
+ class="pf-v6-c-form__label-required"
3000
+ aria-hidden="true"
3001
+ >&#42;</span></label>
3002
+ </div>
3003
+ <div class="pf-v6-c-form__group-control">
3004
+ <span class="pf-v6-c-form-control">
3005
+ <input
3006
+ type="text"
3007
+ id="wizard-warning-on-step-example-form-field4"
3008
+ name="wizard-warning-on-step-example-form-field4"
3009
+ />
3010
+ </span>
3011
+ </div>
3012
+ </div>
3013
+ <div class="pf-v6-c-form__group">
3014
+ <div class="pf-v6-c-form__group-label"><label
3015
+ class="pf-v6-c-form__label"
3016
+ for="wizard-warning-on-step-example-form-field5"
3017
+ >
3018
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3019
+ class="pf-v6-c-form__label-required"
3020
+ aria-hidden="true"
3021
+ >&#42;</span></label>
3022
+ </div>
3023
+ <div class="pf-v6-c-form__group-control">
3024
+ <span class="pf-v6-c-form-control">
3025
+ <input
3026
+ type="text"
3027
+ id="wizard-warning-on-step-example-form-field5"
3028
+ name="wizard-warning-on-step-example-form-field5"
3029
+ />
3030
+ </span>
3031
+ </div>
3032
+ </div>
3033
+ <div class="pf-v6-c-form__group">
3034
+ <div class="pf-v6-c-form__group-label"><label
3035
+ class="pf-v6-c-form__label"
3036
+ for="wizard-warning-on-step-example-form-field6"
3037
+ >
3038
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3039
+ class="pf-v6-c-form__label-required"
3040
+ aria-hidden="true"
3041
+ >&#42;</span></label>
3042
+ </div>
3043
+ <div class="pf-v6-c-form__group-control">
3044
+ <span class="pf-v6-c-form-control">
3045
+ <input
3046
+ type="text"
3047
+ id="wizard-warning-on-step-example-form-field6"
3048
+ name="wizard-warning-on-step-example-form-field6"
3049
+ />
3050
+ </span>
3051
+ </div>
3052
+ </div>
3053
+ <div class="pf-v6-c-form__group">
3054
+ <div class="pf-v6-c-form__group-label"><label
3055
+ class="pf-v6-c-form__label"
3056
+ for="wizard-warning-on-step-example-form-field7"
3057
+ >
3058
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3059
+ class="pf-v6-c-form__label-required"
3060
+ aria-hidden="true"
3061
+ >&#42;</span></label>
3062
+ </div>
3063
+ <div class="pf-v6-c-form__group-control">
3064
+ <span class="pf-v6-c-form-control">
3065
+ <input
3066
+ type="text"
3067
+ id="wizard-warning-on-step-example-form-field7"
3068
+ name="wizard-warning-on-step-example-form-field7"
3069
+ />
3070
+ </span>
3071
+ </div>
3072
+ </div>
3073
+ </form>
3074
+ </div>
3075
+ </main>
3076
+ </div>
3077
+ <footer class="pf-v6-c-wizard__footer">
3078
+ <div class="pf-v6-c-action-list">
3079
+ <div class="pf-v6-c-action-list__group">
3080
+ <div class="pf-v6-c-action-list__item">
3081
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
3082
+ <span class="pf-v6-c-button__text">Back</span>
3083
+ </button>
3084
+ </div>
3085
+ <div class="pf-v6-c-action-list__item">
3086
+ <button class="pf-v6-c-button pf-m-primary" type="button">
3087
+ <span class="pf-v6-c-button__text">Next</span>
3088
+ </button>
3089
+ </div>
3090
+ </div>
3091
+ <div class="pf-v6-c-action-list__group">
3092
+ <div class="pf-v6-c-action-list__item">
3093
+ <button class="pf-v6-c-button pf-m-link" type="button">
3094
+ <span class="pf-v6-c-button__text">Cancel</span>
3095
+ </button>
3096
+ </div>
3097
+ </div>
3098
+ </div>
3099
+ </footer>
3100
+ </div>
3101
+ </div>
3102
+
3103
+ ```
3104
+
3105
+ ### Nav expanded with warning (mobile)
3106
+
3107
+ ```html isFullscreen
3108
+ <div class="pf-v6-c-wizard">
3109
+ <div class="pf-v6-c-wizard__header">
3110
+ <div class="pf-v6-c-wizard__close">
3111
+ <button
3112
+ class="pf-v6-c-button pf-m-plain"
3113
+ type="button"
3114
+ aria-label="Close"
3115
+ >
3116
+ <span class="pf-v6-c-button__icon">
3117
+ <i class="fas fa-times" aria-hidden="true"></i>
3118
+ </span>
3119
+ </button>
3120
+ </div>
3121
+ <div class="pf-v6-c-wizard__title">
3122
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
3123
+ </div>
3124
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
3125
+ </div>
3126
+ <button
3127
+ aria-label="Wizard Header Toggle"
3128
+ class="pf-v6-c-wizard__toggle pf-m-expanded"
3129
+ aria-expanded="true"
3130
+ >
3131
+ <span class="pf-v6-c-wizard__toggle-list">
3132
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-warning">
3133
+ <span class="pf-v6-c-wizard__toggle-status-icon">
3134
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
3135
+ </span>
3136
+ Configuration
3137
+ <i
3138
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3139
+ aria-hidden="true"
3140
+ ></i>
3141
+ </span>
3142
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3143
+ </span>
3144
+ <span class="pf-v6-c-wizard__toggle-icon">
3145
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3146
+ </span>
3147
+ </button>
3148
+ <div class="pf-v6-c-wizard__outer-wrap">
3149
+ <div class="pf-v6-c-wizard__inner-wrap">
3150
+ <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
3151
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3152
+ <li class="pf-v6-c-wizard__nav-item">
3153
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3154
+ <span class="pf-v6-c-wizard__nav-link-main">
3155
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
3156
+ </span>
3157
+ </button>
3158
+ </li>
3159
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
3160
+ <button
3161
+ class="pf-v6-c-wizard__nav-link pf-m-warning pf-m-current"
3162
+ type="button"
3163
+ aria-expanded="true"
3164
+ >
3165
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
3166
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
3167
+ </span>
3168
+ <span class="pf-v6-c-wizard__nav-link-main">
3169
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3170
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3171
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3172
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3173
+ </span>
3174
+ </span>
3175
+ </span>
3176
+ </button>
3177
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3178
+ <li class="pf-v6-c-wizard__nav-item">
3179
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3180
+ <span class="pf-v6-c-wizard__nav-link-main">
3181
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
3182
+ </span>
3183
+ </button>
3184
+ </li>
3185
+ <li class="pf-v6-c-wizard__nav-item">
3186
+ <button
3187
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3188
+ type="button"
3189
+ aria-current="page"
3190
+ >
3191
+ <span class="pf-v6-c-wizard__nav-link-main">
3192
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
3193
+ </span>
3194
+ </button>
3195
+ </li>
3196
+ <li class="pf-v6-c-wizard__nav-item">
3197
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3198
+ <span class="pf-v6-c-wizard__nav-link-main">
3199
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
3200
+ </span>
3201
+ </button>
3202
+ </li>
3203
+ </ol>
3204
+ </li>
3205
+ <li class="pf-v6-c-wizard__nav-item">
3206
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3207
+ <span class="pf-v6-c-wizard__nav-link-main">
3208
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
3209
+ </span>
3210
+ </button>
3211
+ </li>
3212
+ <li class="pf-v6-c-wizard__nav-item">
3213
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
3214
+ <span class="pf-v6-c-wizard__nav-link-main">
3215
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
3216
+ </span>
3217
+ </button>
3218
+ </li>
3219
+ </ol>
3220
+ </nav>
3221
+ <main class="pf-v6-c-wizard__main" tabindex="0">
3222
+ <div class="pf-v6-c-wizard__main-body">
3223
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3224
+ <div class="pf-v6-c-form__group">
3225
+ <div class="pf-v6-c-form__group-label"><label
3226
+ class="pf-v6-c-form__label"
3227
+ for="wizard-warning-on-step-nav-expanded-example-form-field1"
3228
+ >
3229
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3230
+ class="pf-v6-c-form__label-required"
3231
+ aria-hidden="true"
3232
+ >&#42;</span></label>
3233
+ </div>
3234
+ <div class="pf-v6-c-form__group-control">
3235
+ <span class="pf-v6-c-form-control">
3236
+ <input
3237
+ type="text"
3238
+ id="wizard-warning-on-step-nav-expanded-example-form-field1"
3239
+ name="wizard-warning-on-step-nav-expanded-example-form-field1"
3240
+ />
3241
+ </span>
3242
+ </div>
3243
+ </div>
3244
+ <div class="pf-v6-c-form__group">
3245
+ <div class="pf-v6-c-form__group-label"><label
3246
+ class="pf-v6-c-form__label"
3247
+ for="wizard-warning-on-step-nav-expanded-example-form-field2"
3248
+ >
3249
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3250
+ class="pf-v6-c-form__label-required"
3251
+ aria-hidden="true"
3252
+ >&#42;</span></label>
3253
+ </div>
3254
+ <div class="pf-v6-c-form__group-control">
3255
+ <span class="pf-v6-c-form-control">
3256
+ <input
3257
+ type="text"
3258
+ id="wizard-warning-on-step-nav-expanded-example-form-field2"
3259
+ name="wizard-warning-on-step-nav-expanded-example-form-field2"
3260
+ />
3261
+ </span>
3262
+ </div>
3263
+ </div>
3264
+ <div class="pf-v6-c-form__group">
3265
+ <div class="pf-v6-c-form__group-label"><label
3266
+ class="pf-v6-c-form__label"
3267
+ for="wizard-warning-on-step-nav-expanded-example-form-field3"
3268
+ >
3269
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
3270
+ class="pf-v6-c-form__label-required"
3271
+ aria-hidden="true"
3272
+ >&#42;</span></label>
3273
+ </div>
3274
+ <div class="pf-v6-c-form__group-control">
3275
+ <span class="pf-v6-c-form-control">
3276
+ <input
3277
+ type="text"
3278
+ id="wizard-warning-on-step-nav-expanded-example-form-field3"
3279
+ name="wizard-warning-on-step-nav-expanded-example-form-field3"
3280
+ />
3281
+ </span>
3282
+ </div>
3283
+ </div>
3284
+ <div class="pf-v6-c-form__group">
3285
+ <div class="pf-v6-c-form__group-label"><label
3286
+ class="pf-v6-c-form__label"
3287
+ for="wizard-warning-on-step-nav-expanded-example-form-field4"
3288
+ >
3289
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
3290
+ class="pf-v6-c-form__label-required"
3291
+ aria-hidden="true"
3292
+ >&#42;</span></label>
3293
+ </div>
3294
+ <div class="pf-v6-c-form__group-control">
3295
+ <span class="pf-v6-c-form-control">
3296
+ <input
3297
+ type="text"
3298
+ id="wizard-warning-on-step-nav-expanded-example-form-field4"
3299
+ name="wizard-warning-on-step-nav-expanded-example-form-field4"
3300
+ />
3301
+ </span>
3302
+ </div>
3303
+ </div>
3304
+ <div class="pf-v6-c-form__group">
3305
+ <div class="pf-v6-c-form__group-label"><label
3306
+ class="pf-v6-c-form__label"
3307
+ for="wizard-warning-on-step-nav-expanded-example-form-field5"
3308
+ >
3309
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3310
+ class="pf-v6-c-form__label-required"
3311
+ aria-hidden="true"
3312
+ >&#42;</span></label>
3313
+ </div>
3314
+ <div class="pf-v6-c-form__group-control">
3315
+ <span class="pf-v6-c-form-control">
3316
+ <input
3317
+ type="text"
3318
+ id="wizard-warning-on-step-nav-expanded-example-form-field5"
3319
+ name="wizard-warning-on-step-nav-expanded-example-form-field5"
3320
+ />
3321
+ </span>
3322
+ </div>
3323
+ </div>
3324
+ <div class="pf-v6-c-form__group">
3325
+ <div class="pf-v6-c-form__group-label"><label
3326
+ class="pf-v6-c-form__label"
3327
+ for="wizard-warning-on-step-nav-expanded-example-form-field6"
3328
+ >
3329
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3330
+ class="pf-v6-c-form__label-required"
3331
+ aria-hidden="true"
3332
+ >&#42;</span></label>
3333
+ </div>
3334
+ <div class="pf-v6-c-form__group-control">
3335
+ <span class="pf-v6-c-form-control">
3336
+ <input
3337
+ type="text"
3338
+ id="wizard-warning-on-step-nav-expanded-example-form-field6"
3339
+ name="wizard-warning-on-step-nav-expanded-example-form-field6"
3340
+ />
3341
+ </span>
3342
+ </div>
3343
+ </div>
3344
+ <div class="pf-v6-c-form__group">
3345
+ <div class="pf-v6-c-form__group-label"><label
3346
+ class="pf-v6-c-form__label"
3347
+ for="wizard-warning-on-step-nav-expanded-example-form-field7"
3348
+ >
3349
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3350
+ class="pf-v6-c-form__label-required"
3351
+ aria-hidden="true"
3352
+ >&#42;</span></label>
3353
+ </div>
3354
+ <div class="pf-v6-c-form__group-control">
3355
+ <span class="pf-v6-c-form-control">
3356
+ <input
3357
+ type="text"
3358
+ id="wizard-warning-on-step-nav-expanded-example-form-field7"
3359
+ name="wizard-warning-on-step-nav-expanded-example-form-field7"
3360
+ />
3361
+ </span>
3362
+ </div>
3363
+ </div>
3364
+ </form>
3365
+ </div>
3366
+ </main>
3367
+ </div>
3368
+ <footer class="pf-v6-c-wizard__footer">
3369
+ <div class="pf-v6-c-action-list">
3370
+ <div class="pf-v6-c-action-list__group">
3371
+ <div class="pf-v6-c-action-list__item">
3372
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
3373
+ <span class="pf-v6-c-button__text">Back</span>
3374
+ </button>
3375
+ </div>
3376
+ <div class="pf-v6-c-action-list__item">
3377
+ <button class="pf-v6-c-button pf-m-primary" type="button">
3378
+ <span class="pf-v6-c-button__text">Next</span>
3379
+ </button>
3380
+ </div>
3381
+ </div>
3382
+ <div class="pf-v6-c-action-list__group">
3383
+ <div class="pf-v6-c-action-list__item">
3384
+ <button class="pf-v6-c-button pf-m-link" type="button">
3385
+ <span class="pf-v6-c-button__text">Cancel</span>
3386
+ </button>
3387
+ </div>
3388
+ </div>
3389
+ </div>
3390
+ </footer>
3391
+ </div>
3392
+ </div>
3393
+
3394
+ ```
3395
+
2814
3396
  ## Documentation
2815
3397
 
2816
3398
  ### Accessibility
@@ -2868,5 +3450,6 @@ wrapperTag: div
2868
3450
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
2869
3451
  | `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. |
2870
3452
  | `.pf-m-success` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate success status. |
3453
+ | `.pf-m-warning` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate warning status. |
2871
3454
  | `.pf-m-danger` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate danger status. |
2872
3455
  | `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. |