@patternfly/patternfly 4.196.9 → 4.198.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.
Files changed (13) hide show
  1. package/components/Card/card.css +20 -0
  2. package/components/Card/card.scss +21 -0
  3. package/components/Card/themes/dark/card.scss +13 -0
  4. package/components/Dropdown/dropdown.css +56 -1
  5. package/components/Dropdown/dropdown.scss +76 -2
  6. package/docs/components/Card/examples/Card.md +22 -0
  7. package/docs/components/Dropdown/examples/Dropdown.css +2 -1
  8. package/docs/components/Dropdown/examples/Dropdown.md +165 -0
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +106 -1
  11. package/patternfly.css +106 -1
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -84,6 +84,8 @@
84
84
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
85
85
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
86
86
  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
87
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
88
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
87
89
  display: flex;
88
90
  flex-direction: column;
89
91
  background-color: var(--pf-c-card--BackgroundColor);
@@ -310,6 +312,24 @@
310
312
  font-size: var(--pf-c-card__footer--FontSize);
311
313
  }
312
314
 
315
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
316
+ position: absolute;
317
+ top: 0;
318
+ right: 0;
319
+ bottom: 0;
320
+ left: 0;
321
+ content: "";
322
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
323
+ }
324
+
313
325
  .pf-m-overpass-font .pf-c-card .pf-c-card__title {
314
326
  font-weight: var(--pf-global--FontWeight--normal);
327
+ }
328
+
329
+ :where(.pf-theme-dark) .pf-c-card {
330
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
331
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
332
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
333
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
334
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
315
335
  }
package/components/Card/card.scss CHANGED
@@ -105,6 +105,10 @@
105
105
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
106
106
  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
107
107
 
108
+ // Card input
109
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
110
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
111
+
108
112
  display: flex;
109
113
  flex-direction: column;
110
114
  background-color: var(--pf-c-card--BackgroundColor);
@@ -380,9 +384,26 @@
380
384
  font-size: var(--pf-c-card__footer--FontSize);
381
385
  }
382
386
 
387
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
388
+ position: absolute;
389
+ top: 0;
390
+ right: 0;
391
+ bottom: 0;
392
+ left: 0;
393
+ content: "";
394
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
395
+ }
396
+
383
397
  // RedHat Font overrides
384
398
  @include pf-m-overpass-font {
385
399
  .pf-c-card .pf-c-card__title {
386
400
  font-weight: var(--pf-global--FontWeight--normal);
387
401
  }
388
402
  }
403
+
404
+ // stylelint-disable no-invalid-position-at-import-rule
405
+ @import "themes/dark/card";
406
+
407
+ @include pf-theme-dark {
408
+ @include pf-theme-dark-card;
409
+ }
package/components/Card/themes/dark/card.scss ADDED
@@ -0,0 +1,13 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-theme-dark-card() {
4
+ .pf-c-card {
5
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
6
+
7
+ // Hoverable/selectable raised
8
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
9
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
10
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
11
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
12
+ }
13
+ }
package/components/Dropdown/dropdown.css CHANGED
@@ -62,7 +62,8 @@
62
62
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
63
63
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
64
64
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
65
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
65
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
66
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
66
67
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
67
68
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
68
69
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -70,6 +71,18 @@
70
71
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
71
72
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
72
73
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
74
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
75
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
76
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
77
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
78
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
79
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
80
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
81
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
82
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
83
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
84
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
85
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
73
86
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
74
87
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
75
88
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -166,6 +179,7 @@
166
179
  }
167
180
  .pf-c-dropdown.pf-m-expanded {
168
181
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
182
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
169
183
  }
170
184
 
171
185
  .pf-c-dropdown__toggle {
@@ -367,6 +381,47 @@
367
381
  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
368
382
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
369
383
  }
384
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
385
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
386
+ }
387
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
388
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
389
+ }
390
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
391
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
392
+ }
393
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
394
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
395
+ }
396
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
397
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
398
+ }
399
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
400
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
401
+ }
402
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
403
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
404
+ }
405
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
406
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
407
+ }
408
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
409
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
410
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
411
+ }
412
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
413
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
414
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
415
+ }
416
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
417
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
418
+ }
419
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
420
+ border-right: 0;
421
+ }
422
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
423
+ border: 0;
424
+ }
370
425
  .pf-c-dropdown__toggle > .pf-c-badge {
371
426
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
372
427
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/components/Dropdown/dropdown.scss CHANGED
@@ -75,9 +75,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
75
75
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
76
76
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
77
77
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
78
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
78
79
 
79
80
  // Split button
80
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
81
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
81
82
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
82
83
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
83
84
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -88,6 +89,20 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
88
89
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
89
90
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
90
91
 
92
+ // Split button
93
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
94
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
95
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
96
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
97
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
98
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
99
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
100
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
101
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
102
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
103
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
104
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
105
+
91
106
  // Toggle Arrow
92
107
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
93
108
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -217,7 +232,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
217
232
  }
218
233
 
219
234
  &.pf-m-expanded {
220
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
235
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor); // update to --pf-c-dropdown__toggle--m-primary--m-split-button--child--before--BorderWidth at breaking change
236
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
221
237
  }
222
238
  }
223
239
 
@@ -507,6 +523,64 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
507
523
  }
508
524
  }
509
525
 
526
+ &.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
527
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
528
+
529
+ &:hover {
530
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
531
+ }
532
+
533
+ &:focus {
534
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
535
+ }
536
+
537
+ &:active {
538
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
539
+ }
540
+
541
+ > * {
542
+ &::before {
543
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
544
+ }
545
+
546
+ &:hover {
547
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
548
+ }
549
+
550
+ &:focus {
551
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
552
+ }
553
+
554
+ &:active {
555
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
556
+ }
557
+
558
+ &:first-child::before {
559
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
560
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
561
+ }
562
+
563
+ &:last-child::before {
564
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
565
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
566
+ }
567
+
568
+ &:not(:first-child)::before {
569
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
570
+ }
571
+
572
+ &:not(:last-child)::before {
573
+ border-right: 0;
574
+ }
575
+ }
576
+
577
+ &.pf-m-action {
578
+ &::before {
579
+ border: 0;
580
+ }
581
+ }
582
+ }
583
+
510
584
  > .pf-c-badge {
511
585
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
512
586
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/docs/components/Card/examples/Card.md CHANGED
@@ -375,6 +375,27 @@ cssPrefix: pf-c-card
375
375
 
376
376
  ```
377
377
 
378
+ ### Selectable with a hidden input for improved screen reader accessibility
379
+
380
+ ```html
381
+ <input
382
+ class="pf-c-card__sr-input pf-screen-reader"
383
+ type="checkbox"
384
+ tabindex="-1"
385
+ aria-label="Checkbox to improve screen reader accessibility of a selectable card"
386
+ />
387
+ <div
388
+ class="pf-c-card pf-m-selectable-raised"
389
+ tabindex="0"
390
+ id="card-selectable-with-input-example"
391
+ >
392
+ <div class="pf-c-card__title">Title</div>
393
+ <div class="pf-c-card__body">Body</div>
394
+ <div class="pf-c-card__footer">Footer</div>
395
+ </div>
396
+
397
+ ```
398
+
378
399
  ### Non selectable
379
400
 
380
401
  ```html
@@ -886,6 +907,7 @@ A card is a generic rectangular container that can be used to build other compon
886
907
  | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
887
908
  | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
888
909
  | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
910
+ | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
889
911
  | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
890
912
  | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
891
913
  | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
package/docs/components/Dropdown/examples/Dropdown.css CHANGED
@@ -43,7 +43,8 @@
43
43
  #ws-core-c-dropdown-split-button-checkbox,
44
44
  #ws-core-c-dropdown-split-button-action,
45
45
  #ws-core-c-dropdown-split-button-primary-checkbox,
46
- #ws-core-c-dropdown-split-button-primary-action {
46
+ #ws-core-c-dropdown-split-button-primary-action,
47
+ #ws-core-c-dropdown-split-button-secondary-action {
47
48
  min-height: 210px;
48
49
  }
49
50
 
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -1296,6 +1296,171 @@ cssPrefix: pf-c-dropdown
1296
1296
 
1297
1297
  ```
1298
1298
 
1299
+ ### Split button, secondary (action)
1300
+
1301
+ ```html
1302
+ <div class="pf-c-dropdown">
1303
+ <div
1304
+ class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
1305
+ >
1306
+ <button
1307
+ class="pf-c-dropdown__toggle-button"
1308
+ type="button"
1309
+ aria-label="Dropdown toggle"
1310
+ >Action</button>
1311
+
1312
+ <button
1313
+ class="pf-c-dropdown__toggle-button"
1314
+ type="button"
1315
+ aria-expanded="false"
1316
+ id="dropdown-split-button-action-secondary-toggle-button"
1317
+ aria-label="Dropdown toggle"
1318
+ >
1319
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1320
+ </button>
1321
+ </div>
1322
+ <ul class="pf-c-dropdown__menu" hidden>
1323
+ <li>
1324
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1325
+ </li>
1326
+ <li>
1327
+ <button
1328
+ class="pf-c-dropdown__menu-item"
1329
+ type="button"
1330
+ disabled
1331
+ >Disabled action</button>
1332
+ </li>
1333
+ <li>
1334
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1335
+ </li>
1336
+ </ul>
1337
+ </div>
1338
+ <div class="pf-c-dropdown pf-m-expanded">
1339
+ <div
1340
+ class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
1341
+ >
1342
+ <button
1343
+ class="pf-c-dropdown__toggle-button"
1344
+ type="button"
1345
+ aria-label="Dropdown toggle"
1346
+ >Action</button>
1347
+
1348
+ <button
1349
+ class="pf-c-dropdown__toggle-button"
1350
+ type="button"
1351
+ aria-expanded="true"
1352
+ id="dropdown-split-button-action-secondary-expanded-toggle-button"
1353
+ aria-label="Dropdown toggle"
1354
+ >
1355
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
+ </button>
1357
+ </div>
1358
+ <ul class="pf-c-dropdown__menu">
1359
+ <li>
1360
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1361
+ </li>
1362
+ <li>
1363
+ <button
1364
+ class="pf-c-dropdown__menu-item"
1365
+ type="button"
1366
+ disabled
1367
+ >Disabled action</button>
1368
+ </li>
1369
+ <li>
1370
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1371
+ </li>
1372
+ </ul>
1373
+ </div>
1374
+ <div class="pf-c-dropdown">
1375
+ <div
1376
+ class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
1377
+ >
1378
+ <button
1379
+ class="pf-c-dropdown__toggle-button"
1380
+ type="button"
1381
+ aria-label="Settings"
1382
+ >
1383
+ <i class="fas fa-cog" aria-hidden="true"></i>
1384
+ </button>
1385
+
1386
+ <button
1387
+ class="pf-c-dropdown__toggle-button"
1388
+ type="button"
1389
+ aria-expanded="false"
1390
+ id="dropdown-split-button-action-secondary-icon-toggle-button"
1391
+ aria-label="Dropdown toggle"
1392
+ >
1393
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1394
+ </button>
1395
+ </div>
1396
+ <ul class="pf-c-dropdown__menu" hidden>
1397
+ <li>
1398
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1399
+ </li>
1400
+ <li>
1401
+ <button
1402
+ class="pf-c-dropdown__menu-item"
1403
+ type="button"
1404
+ disabled
1405
+ >Disabled action</button>
1406
+ </li>
1407
+ <li>
1408
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1409
+ </li>
1410
+ </ul>
1411
+ </div>
1412
+ <div class="pf-c-dropdown pf-m-expanded">
1413
+ <div
1414
+ class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
1415
+ >
1416
+ <button
1417
+ class="pf-c-dropdown__toggle-button"
1418
+ type="button"
1419
+ aria-label="Settings"
1420
+ >
1421
+ <i class="fas fa-cog" aria-hidden="true"></i>
1422
+ </button>
1423
+
1424
+ <button
1425
+ class="pf-c-dropdown__toggle-button"
1426
+ type="button"
1427
+ aria-expanded="true"
1428
+ id="dropdown-split-button-action-secondary-icon-expanded-toggle-button"
1429
+ aria-label="Dropdown toggle"
1430
+ >
1431
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1432
+ </button>
1433
+ </div>
1434
+ <ul class="pf-c-dropdown__menu">
1435
+ <li>
1436
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
1437
+ <span class="pf-c-dropdown__menu-item-icon">
1438
+ <i class="fas fa-cog" aria-hidden="true"></i>
1439
+ </span>
1440
+ Actions
1441
+ </button>
1442
+ </li>
1443
+ <li>
1444
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button" disabled>
1445
+ <span class="pf-c-dropdown__menu-item-icon">
1446
+ <i class="fas fa-bell" aria-hidden="true"></i>
1447
+ </span>
1448
+ Disabled action
1449
+ </button>
1450
+ </li>
1451
+ <li>
1452
+ <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
1453
+ <span class="pf-c-dropdown__menu-item-icon">
1454
+ <i class="fas fa-cubes" aria-hidden="true"></i>
1455
+ </span>
1456
+ Other action
1457
+ </button>
1458
+ </li>
1459
+ </ul>
1460
+ </div>
1461
+
1462
+ ```
1463
+
1299
1464
  ### With groups
1300
1465
 
1301
1466
  ```html
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": "4.196.9",
4
+ "version": "4.198.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {