@patternfly/react-core 4.241.4 → 4.242.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/esm/components/ProgressStepper/ProgressStep.d.ts +1 -1
  3. package/dist/esm/components/ProgressStepper/ProgressStep.d.ts.map +1 -1
  4. package/dist/js/components/ProgressStepper/ProgressStep.d.ts +1 -1
  5. package/dist/js/components/ProgressStepper/ProgressStep.d.ts.map +1 -1
  6. package/dist/umd/react-core.min.css +245 -245
  7. package/package.json +2 -2
  8. package/src/components/ProgressStepper/ProgressStep.tsx +1 -1
  9. package/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx +32 -1
  10. package/src/components/Text/examples/Text.md +6 -175
  11. package/src/components/Text/examples/TextBody.tsx +24 -0
  12. package/src/components/Text/examples/TextDescriptionList.tsx +17 -0
  13. package/src/components/Text/examples/TextHeadings.tsx +13 -0
  14. package/src/components/Text/examples/TextOrderedList.tsx +16 -0
  15. package/src/components/Text/examples/TextUnorderedList.tsx +19 -0
  16. package/src/components/Text/examples/TextVisited.tsx +34 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.1 (2022-09-21)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
14
+ # [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)
15
+
16
+
17
+ ### Features
18
+
19
+ * **ProgressStepper:** updating description prop to ReactNode ([#8017](https://github.com/patternfly/patternfly-react/issues/8017)) ([30b1112](https://github.com/patternfly/patternfly-react/commit/30b1112216d6c8801b9d2bdcbf52c1cb9e9634cd))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [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
26
 
8
27
  **Note:** Version bump only for package @patternfly/react-core
package/dist/esm/components/ProgressStepper/ProgressStep.d.ts CHANGED
@@ -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
package/dist/esm/components/ProgressStepper/ProgressStep.d.ts.map CHANGED
@@ -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"}
package/dist/js/components/ProgressStepper/ProgressStep.d.ts CHANGED
@@ -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
package/dist/js/components/ProgressStepper/ProgressStep.d.ts.map CHANGED
@@ -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"}
package/dist/umd/react-core.min.css CHANGED
@@ -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);
@@ -1305,251 +1550,6 @@ textarea.pf-c-form-control {
1305
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))))));
1306
1551
  }
1307
1552
  }
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);
1483
- }
1484
-
1485
- .pf-c-accordion__toggle:focus {
1486
- background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
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);
1492
- }
1493
-
1494
- .pf-c-accordion__toggle:active {
1495
- background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
1496
- }
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);
1501
- }
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);
1508
- }
1509
-
1510
- .pf-c-accordion__toggle-icon {
1511
- transition: var(--pf-c-accordion__toggle-icon--Transition);
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);
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;
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);
1526
- }
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);
1531
- }
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);
1541
- }
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);
1545
- }
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);
1551
- }
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);
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.1",
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": "348ba42ca2bc97042feb569b1427f38e5b4afbb1"
74
74
  }
package/src/components/ProgressStepper/ProgressStep.tsx CHANGED
@@ -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
package/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx CHANGED
@@ -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
+ });
package/src/components/Text/examples/Text.md CHANGED
@@ -9,201 +9,32 @@ propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
9
9
 
10
10
  ### Headings
11
11
 
12
- ```js
13
- import React from 'react';
14
- import {
15
- TextContent,
16
- Text,
17
- TextVariants,
18
- TextList,
19
- TextListVariants,
20
- TextListItem,
21
- TextListItemVariants
22
- } from '@patternfly/react-core';
23
-
24
- <TextContent>
25
- <Text component={TextVariants.h1}>Hello World</Text>
26
- <Text component={TextVariants.h2}>Second level</Text>
27
- <Text component={TextVariants.h3}>Third level</Text>
28
- <Text component={TextVariants.h4}>Fourth level</Text>
29
- <Text component={TextVariants.h5}>Fifth level</Text>
30
- <Text component={TextVariants.h6}>Sixth level</Text>
31
- </TextContent>;
12
+ ```ts file="./TextHeadings.tsx"
32
13
  ```
33
14
 
34
15
  ### Body
35
16
 
36
- ```js
37
- import React from 'react';
38
- import {
39
- TextContent,
40
- Text,
41
- TextVariants,
42
- TextList,
43
- TextListVariants,
44
- TextListItem,
45
- TextListItemVariants
46
- } from '@patternfly/react-core';
47
-
48
- <TextContent>
49
- <Text component={TextVariants.p}>
50
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
51
- varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel,
52
- interdum mattis neque. Sub works as well!
53
- </Text>
54
- <Text component={TextVariants.p}>
55
- Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
56
- <Text component={TextVariants.a} href="#">
57
- non ante
58
- </Text>
59
- . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
60
- </Text>
61
- <Text component={TextVariants.blockquote}>
62
- Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
63
- turpis.
64
- </Text>
65
- <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
66
- </TextContent>;
17
+ ```ts file="./TextBody.tsx"
67
18
  ```
68
19
 
69
20
  Text components such as Text, TextList, TextListItem need to be placed within a TextContent
70
21
 
71
22
  ### Unordered list
72
23
 
73
- ```js
74
- import React from 'react';
75
- import {
76
- TextContent,
77
- Text,
78
- TextVariants,
79
- TextList,
80
- TextListVariants,
81
- TextListItem,
82
- TextListItemVariants
83
- } from '@patternfly/react-core';
84
-
85
- <TextContent>
86
- <TextList>
87
- <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
88
- <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
89
- <TextListItem>
90
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
91
- <TextList>
92
- <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
93
- <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
94
- </TextList>
95
- </TextListItem>
96
- <TextListItem>Ut non enim metus.</TextListItem>
97
- </TextList>
98
- </TextContent>;
24
+ ```ts file="./TextUnorderedList.tsx"
99
25
  ```
100
26
 
101
27
  ### Ordered list
102
28
 
103
- ```js
104
- import React from 'react';
105
- import {
106
- TextContent,
107
- Text,
108
- TextVariants,
109
- TextList,
110
- TextListVariants,
111
- TextListItem,
112
- TextListItemVariants
113
- } from '@patternfly/react-core';
114
-
115
- <TextContent>
116
- <TextList component={TextListVariants.ol}>
117
- <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
118
- <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
119
- <TextListItem>Integer in volutpat libero.</TextListItem>
120
- <TextListItem>Donec a diam tellus.</TextListItem>
121
- <TextListItem>Aenean nec tortor orci.</TextListItem>
122
- <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
123
- <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
124
- </TextList>
125
- </TextContent>;
29
+ ```ts file="./TextOrderedList.tsx"
126
30
  ```
127
31
 
128
32
  ### Description list
129
33
 
130
- ```js
131
- import React from 'react';
132
- import {
133
- TextContent,
134
- Text,
135
- TextVariants,
136
- TextList,
137
- TextListVariants,
138
- TextListItem,
139
- TextListItemVariants
140
- } from '@patternfly/react-core';
141
-
142
- <TextContent>
143
- <TextList component={TextListVariants.dl}>
144
- <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
145
- <TextListItem component={TextListItemVariants.dd}>
146
- The part of the Internet that contains websites and web pages
147
- </TextListItem>
148
- <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
149
- <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
150
- <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
151
- <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
152
- </TextList>
153
- </TextContent>;
34
+ ```ts file="./TextDescriptionList.tsx"
154
35
  ```
155
36
 
156
37
  ### Visited
157
38
 
158
- ```js
159
- import React from 'react';
160
- import {
161
- TextContent,
162
- Text,
163
- TextVariants
164
- } from '@patternfly/react-core';
165
-
166
- TextVisited = () => {
167
- return (
168
- <>
169
- <TextContent>
170
- <Text component={TextVariants.h3}>Visited link example</Text>
171
- <Text component={TextVariants.p}>
172
- <Text
173
- component={TextVariants.a}
174
- isVisitedLink
175
- href="#">
176
- Visited link
177
- </Text>
178
- </Text>
179
- </TextContent>
180
- <br />
181
- <TextContent isVisited>
182
- <Text component={TextVariants.h3}>Visited content example</Text>
183
- <Text component={TextVariants.p}>
184
- <Text
185
- component={TextVariants.a}
186
- href="#">
187
- content link 1
188
- </Text>
189
- </Text>
190
- <Text component={TextVariants.p}>
191
- <Text
192
- component={TextVariants.a}
193
- href="#">
194
- content link 2
195
- </Text>
196
- </Text>
197
- <Text component={TextVariants.p}>
198
- <Text
199
- component={TextVariants.a}
200
- href="#">
201
- content link 3
202
- </Text>
203
- </Text>
204
- </TextContent>
205
- </>
206
- );
207
-
208
- };
39
+ ```ts file="./TextVisited.tsx"
209
40
  ```
package/src/components/Text/examples/TextBody.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
3
+
4
+ export const TextBody: React.FunctionComponent = () => (
5
+ <TextContent>
6
+ <Text component={TextVariants.p}>
7
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
8
+ nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
9
+ erat vel, interdum mattis neque. Sub works as well!
10
+ </Text>
11
+ <Text component={TextVariants.p}>
12
+ Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
13
+ <Text component={TextVariants.a} href="#">
14
+ non ante
15
+ </Text>
16
+ . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
17
+ </Text>
18
+ <Text component={TextVariants.blockquote}>
19
+ Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
20
+ turpis.
21
+ </Text>
22
+ <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
23
+ </TextContent>
24
+ );
package/src/components/Text/examples/TextDescriptionList.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
3
+
4
+ export const TextDescriptionList: React.FunctionComponent = () => (
5
+ <TextContent>
6
+ <TextList component={TextListVariants.dl}>
7
+ <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
8
+ <TextListItem component={TextListItemVariants.dd}>
9
+ The part of the Internet that contains websites and web pages
10
+ </TextListItem>
11
+ <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
12
+ <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
13
+ <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
14
+ <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
15
+ </TextList>
16
+ </TextContent>
17
+ );
package/src/components/Text/examples/TextHeadings.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
3
+
4
+ export const TextHeadings: React.FunctionComponent = () => (
5
+ <TextContent>
6
+ <Text component={TextVariants.h1}>Hello World</Text>
7
+ <Text component={TextVariants.h2}>Second level</Text>
8
+ <Text component={TextVariants.h3}>Third level</Text>
9
+ <Text component={TextVariants.h4}>Fourth level</Text>
10
+ <Text component={TextVariants.h5}>Fifth level</Text>
11
+ <Text component={TextVariants.h6}>Sixth level</Text>
12
+ </TextContent>
13
+ );
package/src/components/Text/examples/TextOrderedList.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
3
+
4
+ export const TextOrderedList: React.FunctionComponent = () => (
5
+ <TextContent>
6
+ <TextList component={TextListVariants.ol}>
7
+ <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
8
+ <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
9
+ <TextListItem>Integer in volutpat libero.</TextListItem>
10
+ <TextListItem>Donec a diam tellus.</TextListItem>
11
+ <TextListItem>Aenean nec tortor orci.</TextListItem>
12
+ <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
13
+ <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
14
+ </TextList>
15
+ </TextContent>
16
+ );
package/src/components/Text/examples/TextUnorderedList.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { TextContent, TextList, TextListItem } from '@patternfly/react-core';
3
+
4
+ export const TextUnorderedList: React.FunctionComponent = () => (
5
+ <TextContent>
6
+ <TextList>
7
+ <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
8
+ <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
9
+ <TextListItem>
10
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
11
+ <TextList>
12
+ <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
13
+ <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
14
+ </TextList>
15
+ </TextListItem>
16
+ <TextListItem>Ut non enim metus.</TextListItem>
17
+ </TextList>
18
+ </TextContent>
19
+ );
package/src/components/Text/examples/TextVisited.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
3
+
4
+ export const TextVisited: React.FunctionComponent = () => (
5
+ <>
6
+ <TextContent>
7
+ <Text component={TextVariants.h3}>Visited link example</Text>
8
+ <Text component={TextVariants.p}>
9
+ <Text component={TextVariants.a} isVisitedLink href="#">
10
+ Visited link
11
+ </Text>
12
+ </Text>
13
+ </TextContent>
14
+ <br />
15
+ <TextContent isVisited>
16
+ <Text component={TextVariants.h3}>Visited content example</Text>
17
+ <Text component={TextVariants.p}>
18
+ <Text component={TextVariants.a} href="#">
19
+ content link 1
20
+ </Text>
21
+ </Text>
22
+ <Text component={TextVariants.p}>
23
+ <Text component={TextVariants.a} href="#">
24
+ content link 2
25
+ </Text>
26
+ </Text>
27
+ <Text component={TextVariants.p}>
28
+ <Text component={TextVariants.a} href="#">
29
+ content link 3
30
+ </Text>
31
+ </Text>
32
+ </TextContent>
33
+ </>
34
+ );