@patternfly/patternfly 6.0.0-alpha.26 → 6.0.0-alpha.28

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 (15) hide show
  1. package/components/Accordion/accordion.css +81 -182
  2. package/components/Accordion/accordion.scss +89 -200
  3. package/components/Banner/banner.css +86 -64
  4. package/components/Banner/banner.scss +90 -32
  5. package/docs/components/Accordion/examples/Accordion.md +596 -493
  6. package/docs/components/Banner/examples/Banner.md +48 -25
  7. package/docs/demos/Card/examples/Card.md +2 -2
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +206 -250
  10. package/patternfly-theme-dark-unversioned.css +206 -250
  11. package/patternfly.css +206 -250
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/components/Accordion/themes/dark/accordion.scss +0 -9
  15. package/components/Banner/themes/dark/banner.scss +0 -14
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -6,27 +6,43 @@ cssPrefix: pf-v5-c-banner
6
6
 
7
7
  ### Basic
8
8
 
9
- Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
9
+ Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
10
10
 
11
11
  ```html
12
12
  <div class="pf-v5-c-banner">Default banner</div>
13
13
 
14
14
  <br />
15
15
 
16
- <div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
16
+ <div class="pf-v5-c-banner pf-m-red">Red banner</div>
17
17
 
18
18
  <br />
19
19
 
20
- <div class="pf-v5-c-banner pf-m-red">Red banner</div>
20
+ <div class="pf-v5-c-banner pf-m-orangered">Orangered banner</div>
21
21
 
22
22
  <br />
23
23
 
24
- <div class="pf-v5-c-banner pf-m-green">Green banner</div>
24
+ <div class="pf-v5-c-banner pf-m-orange">Orange banner</div>
25
25
 
26
26
  <br />
27
27
 
28
28
  <div class="pf-v5-c-banner pf-m-gold">Gold banner</div>
29
29
 
30
+ <br />
31
+
32
+ <div class="pf-v5-c-banner pf-m-green">Green banner</div>
33
+
34
+ <br />
35
+
36
+ <div class="pf-v5-c-banner pf-m-cyan">Cyan banner</div>
37
+
38
+ <br />
39
+
40
+ <div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
41
+
42
+ <br />
43
+
44
+ <div class="pf-v5-c-banner pf-m-purple">Purple banner</div>
45
+
30
46
  ```
31
47
 
32
48
  ### Banner with links
@@ -80,33 +96,33 @@ Banners can be styled with one of 5 different colors. A basic banner should only
80
96
  When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
81
97
 
82
98
  ```html
83
- <div class="pf-v5-c-banner">
99
+ <div class="pf-v5-c-banner pf-m-success">
84
100
  <div class="pf-v5-l-flex pf-m-space-items-sm">
85
101
  <div class="pf-v5-l-flex__item">
86
- <span class="pf-v5-screen-reader">Default banner:</span>
102
+ <span class="pf-v5-screen-reader">Success banner:</span>
87
103
 
88
- <i class="fas fa-bell" aria-hidden="true"></i>
104
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
89
105
  </div>
90
- <div class="pf-v5-l-flex__item">Default banner</div>
106
+ <div class="pf-v5-l-flex__item">Success banner</div>
91
107
  </div>
92
108
  </div>
93
109
 
94
110
  <br />
95
111
 
96
- <div class="pf-v5-c-banner pf-m-blue">
112
+ <div class="pf-v5-c-banner pf-m-warning">
97
113
  <div class="pf-v5-l-flex pf-m-space-items-sm">
98
114
  <div class="pf-v5-l-flex__item">
99
- <span class="pf-v5-screen-reader">Info banner:</span>
115
+ <span class="pf-v5-screen-reader">Warning banner:</span>
100
116
 
101
- <i class="fas fa-info-circle" aria-hidden="true"></i>
117
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
102
118
  </div>
103
- <div class="pf-v5-l-flex__item">Info banner</div>
119
+ <div class="pf-v5-l-flex__item">Warning banner</div>
104
120
  </div>
105
121
  </div>
106
122
 
107
123
  <br />
108
124
 
109
- <div class="pf-v5-c-banner pf-m-red">
125
+ <div class="pf-v5-c-banner pf-m-danger">
110
126
  <div class="pf-v5-l-flex pf-m-space-items-sm">
111
127
  <div class="pf-v5-l-flex__item">
112
128
  <span class="pf-v5-screen-reader">Danger banner:</span>
@@ -119,27 +135,27 @@ When a banner is used to convey status, it is advised to add an icon that also c
119
135
 
120
136
  <br />
121
137
 
122
- <div class="pf-v5-c-banner pf-m-green">
138
+ <div class="pf-v5-c-banner pf-m-info">
123
139
  <div class="pf-v5-l-flex pf-m-space-items-sm">
124
140
  <div class="pf-v5-l-flex__item">
125
- <span class="pf-v5-screen-reader">Success banner:</span>
141
+ <span class="pf-v5-screen-reader">Custom status banner:</span>
126
142
 
127
- <i class="fas fa-check-circle" aria-hidden="true"></i>
143
+ <i class="fas fa-info-circle" aria-hidden="true"></i>
128
144
  </div>
129
- <div class="pf-v5-l-flex__item">Success banner</div>
145
+ <div class="pf-v5-l-flex__item">Info banner</div>
130
146
  </div>
131
147
  </div>
132
148
 
133
149
  <br />
134
150
 
135
- <div class="pf-v5-c-banner pf-m-gold">
151
+ <div class="pf-v5-c-banner pf-m-custom">
136
152
  <div class="pf-v5-l-flex pf-m-space-items-sm">
137
153
  <div class="pf-v5-l-flex__item">
138
- <span class="pf-v5-screen-reader">Warning banner:</span>
154
+ <span class="pf-v5-screen-reader">Custom status banner:</span>
139
155
 
140
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
156
+ <i class="fas fa-bell" aria-hidden="true"></i>
141
157
  </div>
142
- <div class="pf-v5-l-flex__item">Warning banner</div>
158
+ <div class="pf-v5-l-flex__item">Custom banner</div>
143
159
  </div>
144
160
  </div>
145
161
 
@@ -147,15 +163,22 @@ When a banner is used to convey status, it is advised to add an icon that also c
147
163
 
148
164
  ## Documentation
149
165
 
150
- Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
151
-
152
166
  ### Usage
153
167
 
154
168
  | Class | Applied to | Outcome |
155
169
  | -- | -- | -- |
156
170
  | `.pf-v5-c-banner` | `<div>` | Initiates a banner. **Required** |
157
- | `.pf-m-blue` | `.pf-v5-c-banner` | Modifies banner for blue styling. |
158
171
  | `.pf-m-red` | `.pf-v5-c-banner` | Modifies banner for red styling. |
159
- | `.pf-m-green` | `.pf-v5-c-banner` | Modifies banner for green styling. |
172
+ | `.pf-m-orangered` | `.pf-v5-c-banner` | Modifies banner for orangered styling. |
173
+ | `.pf-m-orange` | `.pf-v5-c-banner` | Modifies banner for orange styling. |
160
174
  | `.pf-m-gold` | `.pf-v5-c-banner` | Modifies banner for gold styling. |
175
+ | `.pf-m-green` | `.pf-v5-c-banner` | Modifies banner for green styling. |
176
+ | `.pf-m-cyan` | `.pf-v5-c-banner` | Modifies banner for cyan styling. |
177
+ | `.pf-m-blue` | `.pf-v5-c-banner` | Modifies banner for blue styling. |
178
+ | `.pf-m-purple` | `.pf-v5-c-banner` | Modifies banner for purple styling. |
179
+ | `.pf-m-success` | `.pf-v5-c-banner` | Modifies banner for success status styling. |
180
+ | `.pf-m-warning` | `.pf-v5-c-banner` | Modifies banner for warning status styling. |
181
+ | `.pf-m-danger` | `.pf-v5-c-banner` | Modifies banner for danger status styling. |
182
+ | `.pf-m-info` | `.pf-v5-c-banner` | Modifies banner for info status styling. |
183
+ | `.pf-m-custom` | `.pf-v5-c-banner` | Modifies banner for custom status styling. |
161
184
  | `.pf-m-sticky` | `.pf-v5-c-banner` | Modifies banner to be sticky to the top of its container. |
package/docs/demos/Card/examples/Card.md CHANGED
@@ -2458,7 +2458,7 @@ wrapperTag: div
2458
2458
  <div class="pf-v5-c-accordion">
2459
2459
  <h3>
2460
2460
  <button
2461
- class="pf-v5-c-accordion__toggle pf-m-expanded"
2461
+ class="pf-v5-c-accordion__toggle"
2462
2462
  type="button"
2463
2463
  aria-expanded="true"
2464
2464
  >
@@ -2470,7 +2470,7 @@ wrapperTag: div
2470
2470
  </span>
2471
2471
  </button>
2472
2472
  </h3>
2473
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
2473
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
2474
2474
  <div class="pf-v5-c-accordion__expandable-content-body">
2475
2475
  <div class="pf-v5-l-grid pf-m-gutter">
2476
2476
  <div class="pf-v5-l-grid pf-m-gutter">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.26",
4
+ "version": "6.0.0-alpha.28",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {