@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.54
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/Card/card.css +20 -8
- package/components/Card/card.scss +26 -7
- package/components/Wizard/wizard.css +20 -2
- package/components/Wizard/wizard.scss +22 -2
- package/components/_index.css +40 -10
- package/docs/components/Wizard/examples/Wizard.md +323 -0
- package/docs/demos/Card/examples/Card.md +564 -86
- package/docs/demos/CardView/examples/CardView.md +15 -1
- package/docs/demos/Compass/examples/Compass.md +393 -82
- package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
- package/package.json +1 -1
- package/patternfly-no-globals.css +40 -10
- package/patternfly.css +40 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -3813,6 +3813,327 @@ wrapperTag: div
|
|
|
3813
3813
|
|
|
3814
3814
|
```
|
|
3815
3815
|
|
|
3816
|
+
### Plain
|
|
3817
|
+
|
|
3818
|
+
```html isFullscreen
|
|
3819
|
+
<div class="pf-v6-c-wizard pf-m-plain">
|
|
3820
|
+
<div class="pf-v6-c-wizard__header">
|
|
3821
|
+
<div class="pf-v6-c-wizard__close">
|
|
3822
|
+
<button
|
|
3823
|
+
class="pf-v6-c-button pf-m-plain"
|
|
3824
|
+
type="button"
|
|
3825
|
+
aria-label="Close"
|
|
3826
|
+
>
|
|
3827
|
+
<span class="pf-v6-c-button__icon">
|
|
3828
|
+
<svg
|
|
3829
|
+
class="pf-v6-svg"
|
|
3830
|
+
viewBox="0 0 20 20"
|
|
3831
|
+
fill="currentColor"
|
|
3832
|
+
aria-hidden="true"
|
|
3833
|
+
role="img"
|
|
3834
|
+
width="1em"
|
|
3835
|
+
height="1em"
|
|
3836
|
+
>
|
|
3837
|
+
<path
|
|
3838
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
3839
|
+
/>
|
|
3840
|
+
</svg>
|
|
3841
|
+
</span>
|
|
3842
|
+
</button>
|
|
3843
|
+
</div>
|
|
3844
|
+
<div class="pf-v6-c-wizard__title">
|
|
3845
|
+
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
|
|
3846
|
+
</div>
|
|
3847
|
+
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
|
|
3848
|
+
</div>
|
|
3849
|
+
<button
|
|
3850
|
+
aria-label="Wizard Header Toggle"
|
|
3851
|
+
class="pf-v6-c-wizard__toggle"
|
|
3852
|
+
aria-expanded="false"
|
|
3853
|
+
>
|
|
3854
|
+
<span class="pf-v6-c-wizard__toggle-list">
|
|
3855
|
+
<span class="pf-v6-c-wizard__toggle-list-item">
|
|
3856
|
+
<span class="pf-v6-c-wizard__toggle-num">2</span>
|
|
3857
|
+
Configuration
|
|
3858
|
+
<span class="pf-v6-c-wizard__toggle-separator">
|
|
3859
|
+
<svg
|
|
3860
|
+
class="pf-v6-svg"
|
|
3861
|
+
viewBox="0 0 20 20"
|
|
3862
|
+
fill="currentColor"
|
|
3863
|
+
aria-hidden="true"
|
|
3864
|
+
role="img"
|
|
3865
|
+
width="1em"
|
|
3866
|
+
height="1em"
|
|
3867
|
+
>
|
|
3868
|
+
<path
|
|
3869
|
+
d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
|
|
3870
|
+
/>
|
|
3871
|
+
</svg>
|
|
3872
|
+
</span>
|
|
3873
|
+
</span>
|
|
3874
|
+
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
|
|
3875
|
+
</span>
|
|
3876
|
+
<span class="pf-v6-c-wizard__toggle-icon">
|
|
3877
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3878
|
+
</span>
|
|
3879
|
+
</button>
|
|
3880
|
+
<div class="pf-v6-c-wizard__outer-wrap">
|
|
3881
|
+
<div class="pf-v6-c-wizard__inner-wrap">
|
|
3882
|
+
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
|
|
3883
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
3884
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3885
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
3886
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3887
|
+
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
|
|
3888
|
+
</span>
|
|
3889
|
+
</button>
|
|
3890
|
+
</li>
|
|
3891
|
+
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
|
|
3892
|
+
<button
|
|
3893
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
3894
|
+
type="button"
|
|
3895
|
+
aria-expanded="true"
|
|
3896
|
+
>
|
|
3897
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3898
|
+
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
|
|
3899
|
+
<span class="pf-v6-c-wizard__nav-link-toggle">
|
|
3900
|
+
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
|
|
3901
|
+
<svg
|
|
3902
|
+
class="pf-v6-svg"
|
|
3903
|
+
viewBox="0 0 20 20"
|
|
3904
|
+
fill="currentColor"
|
|
3905
|
+
aria-hidden="true"
|
|
3906
|
+
role="img"
|
|
3907
|
+
width="1em"
|
|
3908
|
+
height="1em"
|
|
3909
|
+
>
|
|
3910
|
+
<path
|
|
3911
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
3912
|
+
/>
|
|
3913
|
+
</svg>
|
|
3914
|
+
</span>
|
|
3915
|
+
</span>
|
|
3916
|
+
</span>
|
|
3917
|
+
</button>
|
|
3918
|
+
<ol class="pf-v6-c-wizard__nav-list" role="list">
|
|
3919
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3920
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
3921
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3922
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
|
|
3923
|
+
</span>
|
|
3924
|
+
</button>
|
|
3925
|
+
</li>
|
|
3926
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3927
|
+
<button
|
|
3928
|
+
class="pf-v6-c-wizard__nav-link pf-m-current"
|
|
3929
|
+
type="button"
|
|
3930
|
+
aria-current="page"
|
|
3931
|
+
>
|
|
3932
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3933
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
|
|
3934
|
+
</span>
|
|
3935
|
+
</button>
|
|
3936
|
+
</li>
|
|
3937
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3938
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
3939
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3940
|
+
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
|
|
3941
|
+
</span>
|
|
3942
|
+
</button>
|
|
3943
|
+
</li>
|
|
3944
|
+
</ol>
|
|
3945
|
+
</li>
|
|
3946
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3947
|
+
<button class="pf-v6-c-wizard__nav-link" type="button">
|
|
3948
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3949
|
+
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
|
|
3950
|
+
</span>
|
|
3951
|
+
</button>
|
|
3952
|
+
</li>
|
|
3953
|
+
<li class="pf-v6-c-wizard__nav-item">
|
|
3954
|
+
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
|
|
3955
|
+
<span class="pf-v6-c-wizard__nav-link-main">
|
|
3956
|
+
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
|
|
3957
|
+
</span>
|
|
3958
|
+
</button>
|
|
3959
|
+
</li>
|
|
3960
|
+
</ol>
|
|
3961
|
+
</nav>
|
|
3962
|
+
<main class="pf-v6-c-wizard__main" tabindex="0">
|
|
3963
|
+
<div class="pf-v6-c-wizard__main-body">
|
|
3964
|
+
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
|
|
3965
|
+
<div class="pf-v6-c-form__group">
|
|
3966
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
3967
|
+
class="pf-v6-c-form__label"
|
|
3968
|
+
for="wizard-plain-header-form-field1"
|
|
3969
|
+
>
|
|
3970
|
+
<span class="pf-v6-c-form__label-text">Field 1</span> <span
|
|
3971
|
+
class="pf-v6-c-form__label-required"
|
|
3972
|
+
aria-hidden="true"
|
|
3973
|
+
>*</span></label>
|
|
3974
|
+
</div>
|
|
3975
|
+
<div class="pf-v6-c-form__group-control">
|
|
3976
|
+
<span class="pf-v6-c-form-control">
|
|
3977
|
+
<input
|
|
3978
|
+
type="text"
|
|
3979
|
+
id="wizard-plain-header-form-field1"
|
|
3980
|
+
name="wizard-plain-header-form-field1"
|
|
3981
|
+
/>
|
|
3982
|
+
</span>
|
|
3983
|
+
</div>
|
|
3984
|
+
</div>
|
|
3985
|
+
<div class="pf-v6-c-form__group">
|
|
3986
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
3987
|
+
class="pf-v6-c-form__label"
|
|
3988
|
+
for="wizard-plain-header-form-field2"
|
|
3989
|
+
>
|
|
3990
|
+
<span class="pf-v6-c-form__label-text">Field 2</span> <span
|
|
3991
|
+
class="pf-v6-c-form__label-required"
|
|
3992
|
+
aria-hidden="true"
|
|
3993
|
+
>*</span></label>
|
|
3994
|
+
</div>
|
|
3995
|
+
<div class="pf-v6-c-form__group-control">
|
|
3996
|
+
<span class="pf-v6-c-form-control">
|
|
3997
|
+
<input
|
|
3998
|
+
type="text"
|
|
3999
|
+
id="wizard-plain-header-form-field2"
|
|
4000
|
+
name="wizard-plain-header-form-field2"
|
|
4001
|
+
/>
|
|
4002
|
+
</span>
|
|
4003
|
+
</div>
|
|
4004
|
+
</div>
|
|
4005
|
+
<div class="pf-v6-c-form__group">
|
|
4006
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
4007
|
+
class="pf-v6-c-form__label"
|
|
4008
|
+
for="wizard-plain-header-form-field3"
|
|
4009
|
+
>
|
|
4010
|
+
<span class="pf-v6-c-form__label-text">Field 3</span> <span
|
|
4011
|
+
class="pf-v6-c-form__label-required"
|
|
4012
|
+
aria-hidden="true"
|
|
4013
|
+
>*</span></label>
|
|
4014
|
+
</div>
|
|
4015
|
+
<div class="pf-v6-c-form__group-control">
|
|
4016
|
+
<span class="pf-v6-c-form-control">
|
|
4017
|
+
<input
|
|
4018
|
+
type="text"
|
|
4019
|
+
id="wizard-plain-header-form-field3"
|
|
4020
|
+
name="wizard-plain-header-form-field3"
|
|
4021
|
+
/>
|
|
4022
|
+
</span>
|
|
4023
|
+
</div>
|
|
4024
|
+
</div>
|
|
4025
|
+
<div class="pf-v6-c-form__group">
|
|
4026
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
4027
|
+
class="pf-v6-c-form__label"
|
|
4028
|
+
for="wizard-plain-header-form-field4"
|
|
4029
|
+
>
|
|
4030
|
+
<span class="pf-v6-c-form__label-text">Field 4</span> <span
|
|
4031
|
+
class="pf-v6-c-form__label-required"
|
|
4032
|
+
aria-hidden="true"
|
|
4033
|
+
>*</span></label>
|
|
4034
|
+
</div>
|
|
4035
|
+
<div class="pf-v6-c-form__group-control">
|
|
4036
|
+
<span class="pf-v6-c-form-control">
|
|
4037
|
+
<input
|
|
4038
|
+
type="text"
|
|
4039
|
+
id="wizard-plain-header-form-field4"
|
|
4040
|
+
name="wizard-plain-header-form-field4"
|
|
4041
|
+
/>
|
|
4042
|
+
</span>
|
|
4043
|
+
</div>
|
|
4044
|
+
</div>
|
|
4045
|
+
<div class="pf-v6-c-form__group">
|
|
4046
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
4047
|
+
class="pf-v6-c-form__label"
|
|
4048
|
+
for="wizard-plain-header-form-field5"
|
|
4049
|
+
>
|
|
4050
|
+
<span class="pf-v6-c-form__label-text">Field 5</span> <span
|
|
4051
|
+
class="pf-v6-c-form__label-required"
|
|
4052
|
+
aria-hidden="true"
|
|
4053
|
+
>*</span></label>
|
|
4054
|
+
</div>
|
|
4055
|
+
<div class="pf-v6-c-form__group-control">
|
|
4056
|
+
<span class="pf-v6-c-form-control">
|
|
4057
|
+
<input
|
|
4058
|
+
type="text"
|
|
4059
|
+
id="wizard-plain-header-form-field5"
|
|
4060
|
+
name="wizard-plain-header-form-field5"
|
|
4061
|
+
/>
|
|
4062
|
+
</span>
|
|
4063
|
+
</div>
|
|
4064
|
+
</div>
|
|
4065
|
+
<div class="pf-v6-c-form__group">
|
|
4066
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
4067
|
+
class="pf-v6-c-form__label"
|
|
4068
|
+
for="wizard-plain-header-form-field6"
|
|
4069
|
+
>
|
|
4070
|
+
<span class="pf-v6-c-form__label-text">Field 6</span> <span
|
|
4071
|
+
class="pf-v6-c-form__label-required"
|
|
4072
|
+
aria-hidden="true"
|
|
4073
|
+
>*</span></label>
|
|
4074
|
+
</div>
|
|
4075
|
+
<div class="pf-v6-c-form__group-control">
|
|
4076
|
+
<span class="pf-v6-c-form-control">
|
|
4077
|
+
<input
|
|
4078
|
+
type="text"
|
|
4079
|
+
id="wizard-plain-header-form-field6"
|
|
4080
|
+
name="wizard-plain-header-form-field6"
|
|
4081
|
+
/>
|
|
4082
|
+
</span>
|
|
4083
|
+
</div>
|
|
4084
|
+
</div>
|
|
4085
|
+
<div class="pf-v6-c-form__group">
|
|
4086
|
+
<div class="pf-v6-c-form__group-label"><label
|
|
4087
|
+
class="pf-v6-c-form__label"
|
|
4088
|
+
for="wizard-plain-header-form-field7"
|
|
4089
|
+
>
|
|
4090
|
+
<span class="pf-v6-c-form__label-text">Field 7</span> <span
|
|
4091
|
+
class="pf-v6-c-form__label-required"
|
|
4092
|
+
aria-hidden="true"
|
|
4093
|
+
>*</span></label>
|
|
4094
|
+
</div>
|
|
4095
|
+
<div class="pf-v6-c-form__group-control">
|
|
4096
|
+
<span class="pf-v6-c-form-control">
|
|
4097
|
+
<input
|
|
4098
|
+
type="text"
|
|
4099
|
+
id="wizard-plain-header-form-field7"
|
|
4100
|
+
name="wizard-plain-header-form-field7"
|
|
4101
|
+
/>
|
|
4102
|
+
</span>
|
|
4103
|
+
</div>
|
|
4104
|
+
</div>
|
|
4105
|
+
</form>
|
|
4106
|
+
</div>
|
|
4107
|
+
</main>
|
|
4108
|
+
</div>
|
|
4109
|
+
<footer class="pf-v6-c-wizard__footer">
|
|
4110
|
+
<div class="pf-v6-c-action-list">
|
|
4111
|
+
<div class="pf-v6-c-action-list__group">
|
|
4112
|
+
<div class="pf-v6-c-action-list__item">
|
|
4113
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">
|
|
4114
|
+
<span class="pf-v6-c-button__text">Back</span>
|
|
4115
|
+
</button>
|
|
4116
|
+
</div>
|
|
4117
|
+
<div class="pf-v6-c-action-list__item">
|
|
4118
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
4119
|
+
<span class="pf-v6-c-button__text">Next</span>
|
|
4120
|
+
</button>
|
|
4121
|
+
</div>
|
|
4122
|
+
</div>
|
|
4123
|
+
<div class="pf-v6-c-action-list__group">
|
|
4124
|
+
<div class="pf-v6-c-action-list__item">
|
|
4125
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
4126
|
+
<span class="pf-v6-c-button__text">Cancel</span>
|
|
4127
|
+
</button>
|
|
4128
|
+
</div>
|
|
4129
|
+
</div>
|
|
4130
|
+
</div>
|
|
4131
|
+
</footer>
|
|
4132
|
+
</div>
|
|
4133
|
+
</div>
|
|
4134
|
+
|
|
4135
|
+
```
|
|
4136
|
+
|
|
3816
4137
|
## Documentation
|
|
3817
4138
|
|
|
3818
4139
|
### Accessibility
|
|
@@ -3865,6 +4186,8 @@ wrapperTag: div
|
|
|
3865
4186
|
| `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
|
|
3866
4187
|
| `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
|
|
3867
4188
|
| `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
|
|
4189
|
+
| `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
|
|
4190
|
+
| `.pf-m-no-plain` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
|
|
3868
4191
|
| `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
|
|
3869
4192
|
| `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
|
|
3870
4193
|
| `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
|