@patternfly/react-core 4.241.4 → 4.242.0

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/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.242.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.241.4...@patternfly/react-core@4.242.0) (2022-09-21)
7
+
8
+
9
+ ### Features
10
+
11
+ * **ProgressStepper:** updating description prop to ReactNode ([#8017](https://github.com/patternfly/patternfly-react/issues/8017)) ([30b1112](https://github.com/patternfly/patternfly-react/commit/30b1112216d6c8801b9d2bdcbf52c1cb9e9634cd))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [4.241.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.241.3...@patternfly/react-core@4.241.4) (2022-09-20)
7
18
 
8
19
  **Note:** Version bump only for package @patternfly/react-core
@@ -11,7 +11,7 @@ export interface ProgressStepProps extends React.DetailedHTMLProps<React.LiHTMLA
11
11
  /** Custom icon of a progress step. Will override default icons provided by the variant. */
12
12
  icon?: React.ReactNode;
13
13
  /** Description text of a progress step. */
14
- description?: string;
14
+ description?: React.ReactNode;
15
15
  /** ID of the title of the progress step. */
16
16
  titleId?: string;
17
17
  /** Accessible label for the progress step. Should communicate all information being communicated by the progress
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressStepper/ProgressStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5E,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;sEACkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE;AAoBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAqDnE,CAAC"}
1
+ {"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressStepper/ProgressStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5E,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;sEACkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE;AAoBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAqDnE,CAAC"}
@@ -11,7 +11,7 @@ export interface ProgressStepProps extends React.DetailedHTMLProps<React.LiHTMLA
11
11
  /** Custom icon of a progress step. Will override default icons provided by the variant. */
12
12
  icon?: React.ReactNode;
13
13
  /** Description text of a progress step. */
14
- description?: string;
14
+ description?: React.ReactNode;
15
15
  /** ID of the title of the progress step. */
16
16
  titleId?: string;
17
17
  /** Accessible label for the progress step. Should communicate all information being communicated by the progress
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressStepper/ProgressStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5E,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;sEACkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE;AAoBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAqDnE,CAAC"}
1
+ {"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressStepper/ProgressStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5E,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;sEACkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE;AAoBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAqDnE,CAAC"}
@@ -21,6 +21,251 @@
21
21
  overflow: hidden;
22
22
  }
23
23
 
24
+ .pf-c-accordion {
25
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
26
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
27
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
28
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
29
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
30
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
31
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
32
+ }
33
+
34
+ .pf-c-accordion {
35
+ --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
36
+ --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
37
+ --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
38
+ --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
39
+ --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
40
+ --pf-c-accordion__toggle--before--BackgroundColor: transparent;
41
+ --pf-c-accordion__toggle--before--Top: 0;
42
+ --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
43
+ --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
44
+ --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
45
+ --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
46
+ --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
47
+ --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
48
+ --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
49
+ --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
50
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
51
+ --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
52
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
53
+ --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
54
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
55
+ --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
56
+ --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
57
+ --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
58
+ --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
59
+ --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
60
+ --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
61
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
62
+ --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
63
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
64
+ --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
65
+ --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
66
+ --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
67
+ --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
68
+ --pf-c-accordion__expanded-content-body--before--Top: 0;
69
+ --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
70
+ --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
71
+ --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
72
+ --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
73
+ --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
74
+ --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
75
+ --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
76
+ --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
77
+ --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
78
+ --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
79
+ --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
80
+ --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
81
+ --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
82
+ --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
83
+ --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
84
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
85
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
86
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
87
+ --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
88
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
89
+ --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
90
+ --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
91
+ --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
92
+ --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
93
+ --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
94
+ --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
95
+ --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
96
+ --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
97
+ color: var(--pf-global--Color--100);
98
+ background-color: var(--pf-c-accordion--BackgroundColor);
99
+ }
100
+
101
+ .pf-c-accordion.pf-m-display-lg {
102
+ --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
103
+ --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
104
+ --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
105
+ --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
106
+ --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
107
+ --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
108
+ --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
109
+ --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
110
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
111
+ --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
112
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
113
+ --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
114
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
115
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
116
+ --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
117
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
118
+ --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
119
+ --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
120
+ --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
121
+ }
122
+
123
+ .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
124
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
125
+ }
126
+
127
+ .pf-c-accordion.pf-m-bordered {
128
+ --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
129
+ border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
130
+ }
131
+
132
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
133
+ position: absolute;
134
+ top: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ left: 0;
138
+ content: "";
139
+ border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
140
+ border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
141
+ }
142
+
143
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
144
+ --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
145
+ }
146
+
147
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
148
+ position: absolute;
149
+ top: 0;
150
+ right: 0;
151
+ bottom: 0;
152
+ left: 0;
153
+ pointer-events: none;
154
+ content: "";
155
+ border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
156
+ }
157
+
158
+ .pf-c-accordion__toggle {
159
+ position: relative;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: space-between;
163
+ width: 100%;
164
+ padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
165
+ font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
166
+ font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
167
+ border: 0;
168
+ }
169
+
170
+ .pf-c-accordion__toggle::after {
171
+ position: absolute;
172
+ top: var(--pf-c-accordion__toggle--before--Top);
173
+ bottom: 0;
174
+ left: 0;
175
+ width: var(--pf-c-accordion__toggle--before--Width);
176
+ content: "";
177
+ background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
178
+ }
179
+
180
+ .pf-c-accordion__toggle.pf-m-expanded {
181
+ --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
182
+ }
183
+
184
+ .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
185
+ font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
186
+ color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
187
+ }
188
+
189
+ .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
190
+ transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
191
+ }
192
+
193
+ .pf-c-accordion__toggle:hover {
194
+ background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
195
+ }
196
+
197
+ .pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
198
+ color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
199
+ }
200
+
201
+ .pf-c-accordion__toggle:focus {
202
+ background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
203
+ }
204
+
205
+ .pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
206
+ font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
207
+ color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
208
+ }
209
+
210
+ .pf-c-accordion__toggle:active {
211
+ background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
212
+ }
213
+
214
+ .pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
215
+ font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
216
+ color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
217
+ }
218
+
219
+ .pf-c-accordion__toggle-text {
220
+ overflow: hidden;
221
+ text-overflow: ellipsis;
222
+ white-space: nowrap;
223
+ max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
224
+ }
225
+
226
+ .pf-c-accordion__toggle-icon {
227
+ transition: var(--pf-c-accordion__toggle-icon--Transition);
228
+ }
229
+
230
+ .pf-c-accordion__expanded-content {
231
+ font-size: var(--pf-c-accordion__expanded-content--FontSize);
232
+ color: var(--pf-c-accordion__expanded-content--Color);
233
+ }
234
+
235
+ .pf-c-accordion__expanded-content.pf-m-fixed {
236
+ max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
237
+ overflow-y: auto;
238
+ }
239
+
240
+ .pf-c-accordion__expanded-content.pf-m-expanded {
241
+ --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
242
+ }
243
+
244
+ .pf-c-accordion__expanded-content-body {
245
+ position: relative;
246
+ padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
247
+ }
248
+
249
+ .pf-c-accordion__expanded-content-body::after {
250
+ position: absolute;
251
+ top: 0;
252
+ bottom: 0;
253
+ left: 0;
254
+ width: var(--pf-c-accordion__expanded-content-body--before--Width);
255
+ content: "";
256
+ background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
257
+ }
258
+
259
+ .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
260
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
261
+ }
262
+
263
+ :where(.pf-theme-dark) .pf-c-accordion {
264
+ --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
265
+ --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
266
+ --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
267
+ }
268
+
24
269
  .pf-c-action-list {
25
270
  --pf-c-action-list--m-icon--spacer: 0;
26
271
  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
@@ -1230,326 +1475,81 @@ textarea.pf-c-form-control {
1230
1475
  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
1231
1476
  }
1232
1477
  }
1233
- @media (min-width: 768px) {
1234
- .pf-c-avatar.pf-m-lg {
1235
- --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
1236
- }
1237
- }
1238
- @media (min-width: 992px) {
1239
- .pf-c-avatar.pf-m-lg {
1240
- --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
1241
- }
1242
- }
1243
- @media (min-width: 1200px) {
1244
- .pf-c-avatar.pf-m-lg {
1245
- --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
1246
- }
1247
- }
1248
- @media (min-width: 1450px) {
1249
- .pf-c-avatar.pf-m-lg {
1250
- --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
1251
- }
1252
- }
1253
- .pf-c-avatar.pf-m-xl {
1254
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
1255
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
1256
- }
1257
-
1258
- @media (min-width: 576px) {
1259
- .pf-c-avatar.pf-m-xl {
1260
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
1261
- }
1262
- }
1263
- @media (min-width: 768px) {
1264
- .pf-c-avatar.pf-m-xl {
1265
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
1266
- }
1267
- }
1268
- @media (min-width: 992px) {
1269
- .pf-c-avatar.pf-m-xl {
1270
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
1271
- }
1272
- }
1273
- @media (min-width: 1200px) {
1274
- .pf-c-avatar.pf-m-xl {
1275
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
1276
- }
1277
- }
1278
- @media (min-width: 1450px) {
1279
- .pf-c-avatar.pf-m-xl {
1280
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
1281
- }
1282
- }
1283
- @media (min-width: 576px) {
1284
- .pf-c-avatar.pf-m-xl {
1285
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
1286
- }
1287
- }
1288
- @media (min-width: 768px) {
1289
- .pf-c-avatar.pf-m-xl {
1290
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
1291
- }
1292
- }
1293
- @media (min-width: 992px) {
1294
- .pf-c-avatar.pf-m-xl {
1295
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
1296
- }
1297
- }
1298
- @media (min-width: 1200px) {
1299
- .pf-c-avatar.pf-m-xl {
1300
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
1301
- }
1302
- }
1303
- @media (min-width: 1450px) {
1304
- .pf-c-avatar.pf-m-xl {
1305
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1306
- }
1307
- }
1308
- .pf-c-accordion {
1309
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
1310
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
1311
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
1312
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
1313
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
1314
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
1315
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
1316
- }
1317
-
1318
- .pf-c-accordion {
1319
- --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
1320
- --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
1321
- --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
1322
- --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
1323
- --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
1324
- --pf-c-accordion__toggle--before--BackgroundColor: transparent;
1325
- --pf-c-accordion__toggle--before--Top: 0;
1326
- --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
1327
- --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
1328
- --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
1329
- --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
1330
- --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
1331
- --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
1332
- --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
1333
- --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
1334
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
1335
- --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
1336
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
1337
- --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
1338
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
1339
- --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
1340
- --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
1341
- --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
1342
- --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
1343
- --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
1344
- --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
1345
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
1346
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
1347
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
1348
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
1349
- --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
1350
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
1351
- --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
1352
- --pf-c-accordion__expanded-content-body--before--Top: 0;
1353
- --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
1354
- --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
1355
- --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
1356
- --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
1357
- --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
1358
- --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
1359
- --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
1360
- --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
1361
- --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
1362
- --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
1363
- --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
1364
- --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
1365
- --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
1366
- --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
1367
- --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
1368
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
1369
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
1370
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
1371
- --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
1372
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
1373
- --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
1374
- --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
1375
- --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
1376
- --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
1377
- --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
1378
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
1379
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
1380
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
1381
- color: var(--pf-global--Color--100);
1382
- background-color: var(--pf-c-accordion--BackgroundColor);
1383
- }
1384
-
1385
- .pf-c-accordion.pf-m-display-lg {
1386
- --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
1387
- --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
1388
- --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
1389
- --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
1390
- --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
1391
- --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
1392
- --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
1393
- --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
1394
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
1395
- --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
1396
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
1397
- --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
1398
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
1399
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
1400
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
1401
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
1402
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
1403
- --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
1404
- --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
1405
- }
1406
-
1407
- .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
1408
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
1409
- }
1410
-
1411
- .pf-c-accordion.pf-m-bordered {
1412
- --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
1413
- border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
1414
- }
1415
-
1416
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
1417
- position: absolute;
1418
- top: 0;
1419
- right: 0;
1420
- bottom: 0;
1421
- left: 0;
1422
- content: "";
1423
- border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
1424
- border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
1425
- }
1426
-
1427
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
1428
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
1429
- }
1430
-
1431
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
1432
- position: absolute;
1433
- top: 0;
1434
- right: 0;
1435
- bottom: 0;
1436
- left: 0;
1437
- pointer-events: none;
1438
- content: "";
1439
- border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
1440
- }
1441
-
1442
- .pf-c-accordion__toggle {
1443
- position: relative;
1444
- display: flex;
1445
- align-items: center;
1446
- justify-content: space-between;
1447
- width: 100%;
1448
- padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
1449
- font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
1450
- font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
1451
- border: 0;
1452
- }
1453
-
1454
- .pf-c-accordion__toggle::after {
1455
- position: absolute;
1456
- top: var(--pf-c-accordion__toggle--before--Top);
1457
- bottom: 0;
1458
- left: 0;
1459
- width: var(--pf-c-accordion__toggle--before--Width);
1460
- content: "";
1461
- background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
1462
- }
1463
-
1464
- .pf-c-accordion__toggle.pf-m-expanded {
1465
- --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
1466
- }
1467
-
1468
- .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
1469
- font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
1470
- color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
1471
- }
1472
-
1473
- .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
1474
- transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
1475
- }
1476
-
1477
- .pf-c-accordion__toggle:hover {
1478
- background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
1479
- }
1480
-
1481
- .pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
1482
- color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
1478
+ @media (min-width: 768px) {
1479
+ .pf-c-avatar.pf-m-lg {
1480
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
1481
+ }
1483
1482
  }
1484
-
1485
- .pf-c-accordion__toggle:focus {
1486
- background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
1483
+ @media (min-width: 992px) {
1484
+ .pf-c-avatar.pf-m-lg {
1485
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
1486
+ }
1487
1487
  }
1488
-
1489
- .pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
1490
- font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
1491
- color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
1488
+ @media (min-width: 1200px) {
1489
+ .pf-c-avatar.pf-m-lg {
1490
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
1491
+ }
1492
1492
  }
1493
-
1494
- .pf-c-accordion__toggle:active {
1495
- background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
1493
+ @media (min-width: 1450px) {
1494
+ .pf-c-avatar.pf-m-lg {
1495
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
1496
+ }
1496
1497
  }
1497
-
1498
- .pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
1499
- font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
1500
- color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
1498
+ .pf-c-avatar.pf-m-xl {
1499
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
1500
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
1501
1501
  }
1502
1502
 
1503
- .pf-c-accordion__toggle-text {
1504
- overflow: hidden;
1505
- text-overflow: ellipsis;
1506
- white-space: nowrap;
1507
- max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
1503
+ @media (min-width: 576px) {
1504
+ .pf-c-avatar.pf-m-xl {
1505
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
1506
+ }
1508
1507
  }
1509
-
1510
- .pf-c-accordion__toggle-icon {
1511
- transition: var(--pf-c-accordion__toggle-icon--Transition);
1508
+ @media (min-width: 768px) {
1509
+ .pf-c-avatar.pf-m-xl {
1510
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
1511
+ }
1512
1512
  }
1513
-
1514
- .pf-c-accordion__expanded-content {
1515
- font-size: var(--pf-c-accordion__expanded-content--FontSize);
1516
- color: var(--pf-c-accordion__expanded-content--Color);
1513
+ @media (min-width: 992px) {
1514
+ .pf-c-avatar.pf-m-xl {
1515
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
1516
+ }
1517
1517
  }
1518
-
1519
- .pf-c-accordion__expanded-content.pf-m-fixed {
1520
- max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
1521
- overflow-y: auto;
1518
+ @media (min-width: 1200px) {
1519
+ .pf-c-avatar.pf-m-xl {
1520
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
1521
+ }
1522
1522
  }
1523
-
1524
- .pf-c-accordion__expanded-content.pf-m-expanded {
1525
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
1523
+ @media (min-width: 1450px) {
1524
+ .pf-c-avatar.pf-m-xl {
1525
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
1526
+ }
1526
1527
  }
1527
-
1528
- .pf-c-accordion__expanded-content-body {
1529
- position: relative;
1530
- padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
1528
+ @media (min-width: 576px) {
1529
+ .pf-c-avatar.pf-m-xl {
1530
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
1531
+ }
1531
1532
  }
1532
-
1533
- .pf-c-accordion__expanded-content-body::after {
1534
- position: absolute;
1535
- top: 0;
1536
- bottom: 0;
1537
- left: 0;
1538
- width: var(--pf-c-accordion__expanded-content-body--before--Width);
1539
- content: "";
1540
- background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
1533
+ @media (min-width: 768px) {
1534
+ .pf-c-avatar.pf-m-xl {
1535
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
1536
+ }
1541
1537
  }
1542
-
1543
- .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
1544
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
1538
+ @media (min-width: 992px) {
1539
+ .pf-c-avatar.pf-m-xl {
1540
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
1541
+ }
1545
1542
  }
1546
-
1547
- :where(.pf-theme-dark) .pf-c-accordion {
1548
- --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
1549
- --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
1550
- --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
1543
+ @media (min-width: 1200px) {
1544
+ .pf-c-avatar.pf-m-xl {
1545
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
1546
+ }
1547
+ }
1548
+ @media (min-width: 1450px) {
1549
+ .pf-c-avatar.pf-m-xl {
1550
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1551
+ }
1551
1552
  }
1552
-
1553
1553
  .pf-c-back-to-top {
1554
1554
  --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1555
1555
  --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
@@ -26189,75 +26189,6 @@ label.pf-c-tree-view__node-text {
26189
26189
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26190
26190
  }
26191
26191
  }
26192
- .pf-l-gallery {
26193
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26194
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26195
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26196
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26197
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26198
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26199
- --pf-l-gallery--GridTemplateRows: auto;
26200
- display: grid;
26201
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26202
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26203
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26204
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26205
- }
26206
-
26207
- .pf-l-gallery.pf-m-gutter {
26208
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26209
- }
26210
-
26211
- @media (min-width: 576px) {
26212
- .pf-l-gallery {
26213
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26214
- }
26215
- }
26216
- @media (min-width: 768px) {
26217
- .pf-l-gallery {
26218
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26219
- }
26220
- }
26221
- @media (min-width: 992px) {
26222
- .pf-l-gallery {
26223
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26224
- }
26225
- }
26226
- @media (min-width: 1200px) {
26227
- .pf-l-gallery {
26228
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26229
- }
26230
- }
26231
- @media (min-width: 1450px) {
26232
- .pf-l-gallery {
26233
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26234
- }
26235
- }
26236
- @media (min-width: 576px) {
26237
- .pf-l-gallery {
26238
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26239
- }
26240
- }
26241
- @media (min-width: 768px) {
26242
- .pf-l-gallery {
26243
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26244
- }
26245
- }
26246
- @media (min-width: 992px) {
26247
- .pf-l-gallery {
26248
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26249
- }
26250
- }
26251
- @media (min-width: 1200px) {
26252
- .pf-l-gallery {
26253
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26254
- }
26255
- }
26256
- @media (min-width: 1450px) {
26257
- .pf-l-gallery {
26258
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26259
- }
26260
- }
26261
26192
  .pf-l-grid {
26262
26193
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26263
26194
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27518,6 +27449,75 @@ label.pf-c-tree-view__node-text {
27518
27449
  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27519
27450
  }
27520
27451
 
27452
+ .pf-l-gallery {
27453
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27454
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
27455
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27456
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
27457
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27458
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27459
+ --pf-l-gallery--GridTemplateRows: auto;
27460
+ display: grid;
27461
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27462
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27463
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27464
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27465
+ }
27466
+
27467
+ .pf-l-gallery.pf-m-gutter {
27468
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27469
+ }
27470
+
27471
+ @media (min-width: 576px) {
27472
+ .pf-l-gallery {
27473
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27474
+ }
27475
+ }
27476
+ @media (min-width: 768px) {
27477
+ .pf-l-gallery {
27478
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27479
+ }
27480
+ }
27481
+ @media (min-width: 992px) {
27482
+ .pf-l-gallery {
27483
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27484
+ }
27485
+ }
27486
+ @media (min-width: 1200px) {
27487
+ .pf-l-gallery {
27488
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27489
+ }
27490
+ }
27491
+ @media (min-width: 1450px) {
27492
+ .pf-l-gallery {
27493
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27494
+ }
27495
+ }
27496
+ @media (min-width: 576px) {
27497
+ .pf-l-gallery {
27498
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27499
+ }
27500
+ }
27501
+ @media (min-width: 768px) {
27502
+ .pf-l-gallery {
27503
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27504
+ }
27505
+ }
27506
+ @media (min-width: 992px) {
27507
+ .pf-l-gallery {
27508
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27509
+ }
27510
+ }
27511
+ @media (min-width: 1200px) {
27512
+ .pf-l-gallery {
27513
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27514
+ }
27515
+ }
27516
+ @media (min-width: 1450px) {
27517
+ .pf-l-gallery {
27518
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27519
+ }
27520
+ }
27521
27521
  .pf-c-alert-group {
27522
27522
  --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
27523
27523
  --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.241.4",
3
+ "version": "4.242.0",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
70
70
  "react": "^16.8 || ^17 || ^18",
71
71
  "react-dom": "^16.8 || ^17 || ^18"
72
72
  },
73
- "gitHead": "69c858f3d65e2fc0dd16e557ffdefaad2a706ff3"
73
+ "gitHead": "aacd4fd4e0c5b623fe98ddb5962efbb98c348465"
74
74
  }
@@ -19,7 +19,7 @@ export interface ProgressStepProps
19
19
  /** Custom icon of a progress step. Will override default icons provided by the variant. */
20
20
  icon?: React.ReactNode;
21
21
  /** Description text of a progress step. */
22
- description?: string;
22
+ description?: React.ReactNode;
23
23
  /** ID of the title of the progress step. */
24
24
  titleId?: string;
25
25
  /** Accessible label for the progress step. Should communicate all information being communicated by the progress
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { render } from '@testing-library/react';
2
+ import { render, screen } from '@testing-library/react';
3
3
  import { ProgressStepper } from '../ProgressStepper';
4
4
  import { ProgressStep } from '../ProgressStep';
5
5
  import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
@@ -110,3 +110,34 @@ describe('ProgressStep', () => {
110
110
  expect(asFragment()).toMatchSnapshot();
111
111
  });
112
112
  });
113
+
114
+ test('renders description class and text', () => {
115
+ render(
116
+ <ProgressStep
117
+ description="Test description"
118
+ >
119
+ Title
120
+ </ProgressStep>
121
+ );
122
+
123
+ expect(screen.getByText('Test description')).toBeVisible();
124
+ expect(screen.getByText('Test description')).toHaveClass('pf-c-progress-stepper__step-description');
125
+ });
126
+
127
+ test('renders description line break', () => {
128
+ render(
129
+ <ProgressStep
130
+ description={
131
+ <>
132
+ Testing description
133
+ <br />
134
+ Line break
135
+ </>
136
+ }
137
+ >
138
+ Title
139
+ </ProgressStep>
140
+ );
141
+
142
+ expect(screen.getByText("Testing descriptionLine break")).toBeVisible();
143
+ });