@patternfly/patternfly 6.5.0-prerelease.80 → 6.5.0-prerelease.81

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 (9) hide show
  1. package/components/Banner/banner.css +4 -0
  2. package/components/Banner/banner.scss +7 -0
  3. package/components/_index.css +4 -0
  4. package/docs/components/Banner/examples/Banner.md +131 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +4 -0
  7. package/patternfly.css +4 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
51
51
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
52
52
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
53
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
53
54
  }
54
55
 
55
56
  .pf-v6-c-banner {
@@ -123,6 +124,9 @@
123
124
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
124
125
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
125
126
  }
127
+ .pf-v6-c-banner.pf-m-pill {
128
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
129
+ }
126
130
  .pf-v6-c-banner a {
127
131
  color: var(--pf-v6-c-banner--link--Color);
128
132
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
package/components/Banner/banner.scss CHANGED
@@ -57,6 +57,9 @@
57
57
  --#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
58
58
  --#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
59
59
  --#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
60
+
61
+ // pill
62
+ --#{$banner}--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
60
63
  }
61
64
 
62
65
  .#{$banner} {
@@ -144,6 +147,10 @@
144
147
  box-shadow: var(--#{$banner}--m-sticky--BoxShadow);
145
148
  }
146
149
 
150
+ &.pf-m-pill {
151
+ border-radius: var(--#{$banner}--m-pill--BorderRadius);
152
+ }
153
+
147
154
  a {
148
155
  color: var(--#{$banner}--link--Color);
149
156
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
package/components/_index.css CHANGED
@@ -1337,6 +1337,7 @@
1337
1337
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1338
1338
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1339
1339
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1340
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
1340
1341
  }
1341
1342
 
1342
1343
  .pf-v6-c-banner {
@@ -1410,6 +1411,9 @@
1410
1411
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
1411
1412
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
1412
1413
  }
1414
+ .pf-v6-c-banner.pf-m-pill {
1415
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
1416
+ }
1413
1417
  .pf-v6-c-banner a {
1414
1418
  color: var(--pf-v6-c-banner--link--Color);
1415
1419
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -227,6 +227,136 @@ When a banner is used to convey status, it is advised to add an icon that also c
227
227
 
228
228
  ```
229
229
 
230
+ ### Pill
231
+
232
+ To display a banner with rounded corners, use `pf-m-pill`. The pill modifier can be combined with any Banner modifier.
233
+
234
+ ```html
235
+ <div class="pf-v6-c-banner pf-m-pill pf-m-success">
236
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
237
+ <div class="pf-v6-l-flex__item">
238
+ <span class="pf-v6-screen-reader">Success banner:</span>
239
+
240
+ <svg
241
+ class="pf-v6-svg"
242
+ viewBox="0 0 32 32"
243
+ fill="currentColor"
244
+ aria-hidden="true"
245
+ role="img"
246
+ width="1em"
247
+ height="1em"
248
+ >
249
+ <path
250
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
251
+ />
252
+ </svg>
253
+ </div>
254
+ <div class="pf-v6-l-flex__item">Success banner</div>
255
+ </div>
256
+ </div>
257
+
258
+ <br />
259
+
260
+ <div class="pf-v6-c-banner pf-m-pill pf-m-warning">
261
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
262
+ <div class="pf-v6-l-flex__item">
263
+ <span class="pf-v6-screen-reader">Warning banner:</span>
264
+
265
+ <svg
266
+ class="pf-v6-svg"
267
+ viewBox="0 0 32 32"
268
+ fill="currentColor"
269
+ aria-hidden="true"
270
+ role="img"
271
+ width="1em"
272
+ height="1em"
273
+ >
274
+ <path
275
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
276
+ />
277
+ </svg>
278
+ </div>
279
+ <div class="pf-v6-l-flex__item">Warning banner</div>
280
+ </div>
281
+ </div>
282
+
283
+ <br />
284
+
285
+ <div class="pf-v6-c-banner pf-m-pill pf-m-danger">
286
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
287
+ <div class="pf-v6-l-flex__item">
288
+ <span class="pf-v6-screen-reader">Danger banner:</span>
289
+
290
+ <svg
291
+ class="pf-v6-svg"
292
+ viewBox="0 0 32 32"
293
+ fill="currentColor"
294
+ aria-hidden="true"
295
+ role="img"
296
+ width="1em"
297
+ height="1em"
298
+ >
299
+ <path
300
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
301
+ />
302
+ </svg>
303
+ </div>
304
+ <div class="pf-v6-l-flex__item">Danger banner</div>
305
+ </div>
306
+ </div>
307
+
308
+ <br />
309
+
310
+ <div class="pf-v6-c-banner pf-m-pill pf-m-info">
311
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
312
+ <div class="pf-v6-l-flex__item">
313
+ <span class="pf-v6-screen-reader">Custom status banner:</span>
314
+
315
+ <svg
316
+ class="pf-v6-svg"
317
+ viewBox="0 0 32 32"
318
+ fill="currentColor"
319
+ aria-hidden="true"
320
+ role="img"
321
+ width="1em"
322
+ height="1em"
323
+ >
324
+ <path
325
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
326
+ />
327
+ </svg>
328
+ </div>
329
+ <div class="pf-v6-l-flex__item">Info banner</div>
330
+ </div>
331
+ </div>
332
+
333
+ <br />
334
+
335
+ <div class="pf-v6-c-banner pf-m-pill pf-m-custom">
336
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
337
+ <div class="pf-v6-l-flex__item">
338
+ <span class="pf-v6-screen-reader">Custom status banner:</span>
339
+
340
+ <svg
341
+ class="pf-v6-svg"
342
+ viewBox="0 0 32 32"
343
+ fill="currentColor"
344
+ aria-hidden="true"
345
+ role="img"
346
+ width="1em"
347
+ height="1em"
348
+ >
349
+ <path
350
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
351
+ />
352
+ </svg>
353
+ </div>
354
+ <div class="pf-v6-l-flex__item">Custom banner</div>
355
+ </div>
356
+ </div>
357
+
358
+ ```
359
+
230
360
  ## Documentation
231
361
 
232
362
  ### Usage
@@ -248,3 +378,4 @@ When a banner is used to convey status, it is advised to add an icon that also c
248
378
  | `.pf-m-info` | `.pf-v6-c-banner` | Modifies banner for info status styling. |
249
379
  | `.pf-m-custom` | `.pf-v6-c-banner` | Modifies banner for custom status styling. |
250
380
  | `.pf-m-sticky` | `.pf-v6-c-banner` | Modifies banner to be sticky to the top of its container. |
381
+ | `.pf-m-pill` | `.pf-v6-c-banner` | Modifies banner for pill styles. |
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.5.0-prerelease.80",
4
+ "version": "6.5.0-prerelease.81",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -10484,6 +10484,7 @@
10484
10484
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10485
10485
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10486
10486
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10487
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
10487
10488
  }
10488
10489
 
10489
10490
  .pf-v6-c-banner {
@@ -10557,6 +10558,9 @@
10557
10558
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
10558
10559
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
10559
10560
  }
10561
+ .pf-v6-c-banner.pf-m-pill {
10562
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
10563
+ }
10560
10564
  .pf-v6-c-banner a {
10561
10565
  color: var(--pf-v6-c-banner--link--Color);
10562
10566
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
package/patternfly.css CHANGED
@@ -10631,6 +10631,7 @@ button) {
10631
10631
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10632
10632
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10633
10633
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10634
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
10634
10635
  }
10635
10636
 
10636
10637
  .pf-v6-c-banner {
@@ -10704,6 +10705,9 @@ button) {
10704
10705
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
10705
10706
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
10706
10707
  }
10708
+ .pf-v6-c-banner.pf-m-pill {
10709
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
10710
+ }
10707
10711
  .pf-v6-c-banner a {
10708
10712
  color: var(--pf-v6-c-banner--link--Color);
10709
10713
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);