@patternfly/patternfly 6.3.0-prerelease.44 → 6.3.0-prerelease.45
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/Wizard/wizard.css +9 -1
- package/components/Wizard/wizard.scss +11 -1
- package/components/_index.css +9 -1
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/package.json +2 -2
- package/patternfly-no-globals.css +9 -1
- package/patternfly.css +9 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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> <span
|
|
2939
|
+
class="pf-v6-c-form__label-required"
|
|
2940
|
+
aria-hidden="true"
|
|
2941
|
+
>*</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> <span
|
|
2959
|
+
class="pf-v6-c-form__label-required"
|
|
2960
|
+
aria-hidden="true"
|
|
2961
|
+
>*</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> <span
|
|
2979
|
+
class="pf-v6-c-form__label-required"
|
|
2980
|
+
aria-hidden="true"
|
|
2981
|
+
>*</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> <span
|
|
2999
|
+
class="pf-v6-c-form__label-required"
|
|
3000
|
+
aria-hidden="true"
|
|
3001
|
+
>*</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> <span
|
|
3019
|
+
class="pf-v6-c-form__label-required"
|
|
3020
|
+
aria-hidden="true"
|
|
3021
|
+
>*</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> <span
|
|
3039
|
+
class="pf-v6-c-form__label-required"
|
|
3040
|
+
aria-hidden="true"
|
|
3041
|
+
>*</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> <span
|
|
3059
|
+
class="pf-v6-c-form__label-required"
|
|
3060
|
+
aria-hidden="true"
|
|
3061
|
+
>*</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> <span
|
|
3230
|
+
class="pf-v6-c-form__label-required"
|
|
3231
|
+
aria-hidden="true"
|
|
3232
|
+
>*</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> <span
|
|
3250
|
+
class="pf-v6-c-form__label-required"
|
|
3251
|
+
aria-hidden="true"
|
|
3252
|
+
>*</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> <span
|
|
3270
|
+
class="pf-v6-c-form__label-required"
|
|
3271
|
+
aria-hidden="true"
|
|
3272
|
+
>*</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> <span
|
|
3290
|
+
class="pf-v6-c-form__label-required"
|
|
3291
|
+
aria-hidden="true"
|
|
3292
|
+
>*</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> <span
|
|
3310
|
+
class="pf-v6-c-form__label-required"
|
|
3311
|
+
aria-hidden="true"
|
|
3312
|
+
>*</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> <span
|
|
3330
|
+
class="pf-v6-c-form__label-required"
|
|
3331
|
+
aria-hidden="true"
|
|
3332
|
+
>*</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> <span
|
|
3350
|
+
class="pf-v6-c-form__label-required"
|
|
3351
|
+
aria-hidden="true"
|
|
3352
|
+
>*</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. |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.3.0-prerelease.
|
|
4
|
+
"version": "6.3.0-prerelease.45",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@commitlint/config-conventional": "^19.1.0",
|
|
48
48
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
49
49
|
"@octokit/rest": "^20.1.0",
|
|
50
|
-
"@patternfly/documentation-framework": "6.
|
|
50
|
+
"@patternfly/documentation-framework": "6.17.0",
|
|
51
51
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
52
52
|
"@patternfly/react-code-editor": "6.3.0",
|
|
53
53
|
"@patternfly/react-core": "6.3.0",
|
|
@@ -30753,6 +30753,7 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
30753
30753
|
--pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
|
|
30754
30754
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
30755
30755
|
--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
30756
|
+
--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
30756
30757
|
--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
30757
30758
|
--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
|
|
30758
30759
|
--pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -30771,6 +30772,7 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
30771
30772
|
--pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
|
|
30772
30773
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
30773
30774
|
--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
30775
|
+
--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
30774
30776
|
--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
30775
30777
|
--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
|
|
30776
30778
|
--pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -30931,6 +30933,9 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
30931
30933
|
.pf-v6-c-wizard__toggle-list-item.pf-m-danger {
|
|
30932
30934
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
|
|
30933
30935
|
}
|
|
30936
|
+
.pf-v6-c-wizard__toggle-list-item.pf-m-warning {
|
|
30937
|
+
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
|
|
30938
|
+
}
|
|
30934
30939
|
.pf-v6-c-wizard__toggle-list-item.pf-m-success {
|
|
30935
30940
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
|
|
30936
30941
|
}
|
|
@@ -31089,12 +31094,15 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
31089
31094
|
--pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
|
|
31090
31095
|
}
|
|
31091
31096
|
|
|
31092
|
-
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
|
|
31097
|
+
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
|
|
31093
31098
|
display: none;
|
|
31094
31099
|
}
|
|
31095
31100
|
.pf-v6-c-wizard__nav-link.pf-m-success {
|
|
31096
31101
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
|
|
31097
31102
|
}
|
|
31103
|
+
.pf-v6-c-wizard__nav-link.pf-m-warning {
|
|
31104
|
+
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
|
|
31105
|
+
}
|
|
31098
31106
|
.pf-v6-c-wizard__nav-link.pf-m-danger {
|
|
31099
31107
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
|
|
31100
31108
|
}
|