@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.54

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 (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  @mixin pf-v5-theme-dark-form-control() {
4
4
  .#{$form-control} {
5
- --#{$form-control}__select--BackgroundUrl: #{pf-bg-svg($pf-v5-c-form-control__select--Coordinates, $pf-v5-c-form-control__select--ViewBox, $pf-v5-global--Color--100)};
6
5
  --#{$form-control}--BorderTopColor: transparent;
7
6
  --#{$form-control}--BorderRightColor: transparent;
8
7
  --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
@@ -19,7 +18,7 @@
19
18
  filter: #{"invert(1)"};
20
19
  }
21
20
 
22
- &[readonly] {
21
+ &.pf-m-readonly {
23
22
  border-bottom-color: var(--#{$pf-global}--palette--black-700); // should be a var?
24
23
  }
25
24
  }
package/components/Masthead/masthead.css CHANGED
@@ -319,8 +319,8 @@
319
319
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
320
320
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
321
321
  }
322
- .pf-v5-c-masthead.pf-m-inset-base {
323
- --pf-v5-c-masthead--inset: ;
322
+ .pf-v5-c-masthead.pf-m-inset-none {
323
+ --pf-v5-c-masthead--inset: 0;
324
324
  }
325
325
  .pf-v5-c-masthead.pf-m-inset-sm {
326
326
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -378,8 +378,8 @@
378
378
  }
379
379
  }
380
380
  @media (min-width: 576px) {
381
- .pf-v5-c-masthead.pf-m-inset-base-on-sm {
382
- --pf-v5-c-masthead--inset: ;
381
+ .pf-v5-c-masthead.pf-m-inset-none-on-sm {
382
+ --pf-v5-c-masthead--inset: 0;
383
383
  }
384
384
  .pf-v5-c-masthead.pf-m-inset-sm-on-sm {
385
385
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -438,8 +438,8 @@
438
438
  }
439
439
  }
440
440
  @media (min-width: 768px) {
441
- .pf-v5-c-masthead.pf-m-inset-base-on-md {
442
- --pf-v5-c-masthead--inset: ;
441
+ .pf-v5-c-masthead.pf-m-inset-none-on-md {
442
+ --pf-v5-c-masthead--inset: 0;
443
443
  }
444
444
  .pf-v5-c-masthead.pf-m-inset-sm-on-md {
445
445
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -498,8 +498,8 @@
498
498
  }
499
499
  }
500
500
  @media (min-width: 992px) {
501
- .pf-v5-c-masthead.pf-m-inset-base-on-lg {
502
- --pf-v5-c-masthead--inset: ;
501
+ .pf-v5-c-masthead.pf-m-inset-none-on-lg {
502
+ --pf-v5-c-masthead--inset: 0;
503
503
  }
504
504
  .pf-v5-c-masthead.pf-m-inset-sm-on-lg {
505
505
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -558,8 +558,8 @@
558
558
  }
559
559
  }
560
560
  @media (min-width: 1200px) {
561
- .pf-v5-c-masthead.pf-m-inset-base-on-xl {
562
- --pf-v5-c-masthead--inset: ;
561
+ .pf-v5-c-masthead.pf-m-inset-none-on-xl {
562
+ --pf-v5-c-masthead--inset: 0;
563
563
  }
564
564
  .pf-v5-c-masthead.pf-m-inset-sm-on-xl {
565
565
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -618,8 +618,8 @@
618
618
  }
619
619
  }
620
620
  @media (min-width: 1450px) {
621
- .pf-v5-c-masthead.pf-m-inset-base-on-2xl {
622
- --pf-v5-c-masthead--inset: ;
621
+ .pf-v5-c-masthead.pf-m-inset-none-on-2xl {
622
+ --pf-v5-c-masthead--inset: 0;
623
623
  }
624
624
  .pf-v5-c-masthead.pf-m-inset-sm-on-2xl {
625
625
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
package/components/NumberInput/number-input.css CHANGED
@@ -26,7 +26,6 @@
26
26
  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
27
27
  }
28
28
  .pf-v5-c-number-input .pf-v5-c-form-control {
29
- display: inline-flex;
30
29
  width: var(--pf-v5-c-number-input--c-form-control--Width);
31
30
  text-align: right;
32
31
  }
package/components/NumberInput/number-input.scss CHANGED
@@ -30,7 +30,6 @@
30
30
  }
31
31
 
32
32
  .#{$form-control} {
33
- display: inline-flex;
34
33
  width: var(--#{$number-input}--c-form-control--Width);
35
34
  text-align: right;
36
35
 
package/components/Pagination/pagination.css CHANGED
@@ -229,8 +229,8 @@
229
229
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
230
230
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
231
231
  }
232
- .pf-v5-c-pagination.pf-m-inset-base {
233
- --pf-v5-c-pagination--inset: ;
232
+ .pf-v5-c-pagination.pf-m-inset-none {
233
+ --pf-v5-c-pagination--inset: 0;
234
234
  }
235
235
  .pf-v5-c-pagination.pf-m-inset-sm {
236
236
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -258,8 +258,8 @@
258
258
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
259
259
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
260
260
  }
261
- .pf-v5-c-pagination.pf-m-inset-base-on-sm {
262
- --pf-v5-c-pagination--inset: ;
261
+ .pf-v5-c-pagination.pf-m-inset-none-on-sm {
262
+ --pf-v5-c-pagination--inset: 0;
263
263
  }
264
264
  .pf-v5-c-pagination.pf-m-inset-sm-on-sm {
265
265
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -288,8 +288,8 @@
288
288
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
289
289
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
290
290
  }
291
- .pf-v5-c-pagination.pf-m-inset-base-on-md {
292
- --pf-v5-c-pagination--inset: ;
291
+ .pf-v5-c-pagination.pf-m-inset-none-on-md {
292
+ --pf-v5-c-pagination--inset: 0;
293
293
  }
294
294
  .pf-v5-c-pagination.pf-m-inset-sm-on-md {
295
295
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -318,8 +318,8 @@
318
318
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
319
319
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
320
320
  }
321
- .pf-v5-c-pagination.pf-m-inset-base-on-lg {
322
- --pf-v5-c-pagination--inset: ;
321
+ .pf-v5-c-pagination.pf-m-inset-none-on-lg {
322
+ --pf-v5-c-pagination--inset: 0;
323
323
  }
324
324
  .pf-v5-c-pagination.pf-m-inset-sm-on-lg {
325
325
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -348,8 +348,8 @@
348
348
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
349
349
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
350
350
  }
351
- .pf-v5-c-pagination.pf-m-inset-base-on-xl {
352
- --pf-v5-c-pagination--inset: ;
351
+ .pf-v5-c-pagination.pf-m-inset-none-on-xl {
352
+ --pf-v5-c-pagination--inset: 0;
353
353
  }
354
354
  .pf-v5-c-pagination.pf-m-inset-sm-on-xl {
355
355
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -378,8 +378,8 @@
378
378
  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
379
379
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
380
380
  }
381
- .pf-v5-c-pagination.pf-m-inset-base-on-2xl {
382
- --pf-v5-c-pagination--inset: ;
381
+ .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
382
+ --pf-v5-c-pagination--inset: 0;
383
383
  }
384
384
  .pf-v5-c-pagination.pf-m-inset-sm-on-2xl {
385
385
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
package/components/Tabs/tabs.css CHANGED
@@ -643,10 +643,10 @@
643
643
  outline-offset: var(--pf-v5-c-tabs__add--c-button--OutlineOffset);
644
644
  }
645
645
 
646
- .pf-v5-c-tabs.pf-m-inset-base {
647
- --pf-v5-c-tabs--inset: ;
648
- --pf-v5-c-tabs--m-vertical--inset: ;
649
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
646
+ .pf-v5-c-tabs.pf-m-inset-none {
647
+ --pf-v5-c-tabs--inset: 0;
648
+ --pf-v5-c-tabs--m-vertical--inset: 0;
649
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
650
650
  }
651
651
  .pf-v5-c-tabs.pf-m-inset-sm {
652
652
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -674,10 +674,10 @@
674
674
  --pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-v5-global--spacer--2xl);
675
675
  }
676
676
  @media (min-width: 576px) {
677
- .pf-v5-c-tabs.pf-m-inset-base-on-sm {
678
- --pf-v5-c-tabs--inset: ;
679
- --pf-v5-c-tabs--m-vertical--inset: ;
680
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
677
+ .pf-v5-c-tabs.pf-m-inset-none-on-sm {
678
+ --pf-v5-c-tabs--inset: 0;
679
+ --pf-v5-c-tabs--m-vertical--inset: 0;
680
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
681
681
  }
682
682
  .pf-v5-c-tabs.pf-m-inset-sm-on-sm {
683
683
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -706,10 +706,10 @@
706
706
  }
707
707
  }
708
708
  @media (min-width: 768px) {
709
- .pf-v5-c-tabs.pf-m-inset-base-on-md {
710
- --pf-v5-c-tabs--inset: ;
711
- --pf-v5-c-tabs--m-vertical--inset: ;
712
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
709
+ .pf-v5-c-tabs.pf-m-inset-none-on-md {
710
+ --pf-v5-c-tabs--inset: 0;
711
+ --pf-v5-c-tabs--m-vertical--inset: 0;
712
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
713
713
  }
714
714
  .pf-v5-c-tabs.pf-m-inset-sm-on-md {
715
715
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -738,10 +738,10 @@
738
738
  }
739
739
  }
740
740
  @media (min-width: 992px) {
741
- .pf-v5-c-tabs.pf-m-inset-base-on-lg {
742
- --pf-v5-c-tabs--inset: ;
743
- --pf-v5-c-tabs--m-vertical--inset: ;
744
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
741
+ .pf-v5-c-tabs.pf-m-inset-none-on-lg {
742
+ --pf-v5-c-tabs--inset: 0;
743
+ --pf-v5-c-tabs--m-vertical--inset: 0;
744
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
745
745
  }
746
746
  .pf-v5-c-tabs.pf-m-inset-sm-on-lg {
747
747
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -770,10 +770,10 @@
770
770
  }
771
771
  }
772
772
  @media (min-width: 1200px) {
773
- .pf-v5-c-tabs.pf-m-inset-base-on-xl {
774
- --pf-v5-c-tabs--inset: ;
775
- --pf-v5-c-tabs--m-vertical--inset: ;
776
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
773
+ .pf-v5-c-tabs.pf-m-inset-none-on-xl {
774
+ --pf-v5-c-tabs--inset: 0;
775
+ --pf-v5-c-tabs--m-vertical--inset: 0;
776
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
777
777
  }
778
778
  .pf-v5-c-tabs.pf-m-inset-sm-on-xl {
779
779
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -802,10 +802,10 @@
802
802
  }
803
803
  }
804
804
  @media (min-width: 1450px) {
805
- .pf-v5-c-tabs.pf-m-inset-base-on-2xl {
806
- --pf-v5-c-tabs--inset: ;
807
- --pf-v5-c-tabs--m-vertical--inset: ;
808
- --pf-v5-c-tabs--m-vertical--m-box--inset: ;
805
+ .pf-v5-c-tabs.pf-m-inset-none-on-2xl {
806
+ --pf-v5-c-tabs--inset: 0;
807
+ --pf-v5-c-tabs--m-vertical--inset: 0;
808
+ --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
809
809
  }
810
810
  .pf-v5-c-tabs.pf-m-inset-sm-on-2xl {
811
811
  --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
package/components/Toolbar/toolbar.css CHANGED
@@ -678,10 +678,10 @@
678
678
  flex-wrap: wrap;
679
679
  }
680
680
  }
681
- .pf-v5-c-toolbar .pf-m-space-items-base > * {
682
- --pf-v5-c-toolbar--spacer: ;
681
+ .pf-v5-c-toolbar .pf-m-space-items-none > * {
682
+ --pf-v5-c-toolbar--spacer: 0;
683
683
  }
684
- .pf-v5-c-toolbar .pf-m-space-items-base > :last-child {
684
+ .pf-v5-c-toolbar .pf-m-space-items-none > :last-child {
685
685
  --pf-v5-c-toolbar--spacer: 0;
686
686
  }
687
687
  .pf-v5-c-toolbar .pf-m-space-items-sm > * {
@@ -703,10 +703,10 @@
703
703
  --pf-v5-c-toolbar--spacer: 0;
704
704
  }
705
705
  @media (min-width: 576px) {
706
- .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > * {
707
- --pf-v5-c-toolbar--spacer: ;
706
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > * {
707
+ --pf-v5-c-toolbar--spacer: 0;
708
708
  }
709
- .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > :last-child {
709
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > :last-child {
710
710
  --pf-v5-c-toolbar--spacer: 0;
711
711
  }
712
712
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-sm > * {
@@ -729,10 +729,10 @@
729
729
  }
730
730
  }
731
731
  @media (min-width: 768px) {
732
- .pf-v5-c-toolbar .pf-m-space-items-base-on-md > * {
733
- --pf-v5-c-toolbar--spacer: ;
732
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-md > * {
733
+ --pf-v5-c-toolbar--spacer: 0;
734
734
  }
735
- .pf-v5-c-toolbar .pf-m-space-items-base-on-md > :last-child {
735
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-md > :last-child {
736
736
  --pf-v5-c-toolbar--spacer: 0;
737
737
  }
738
738
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-md > * {
@@ -755,10 +755,10 @@
755
755
  }
756
756
  }
757
757
  @media (min-width: 992px) {
758
- .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > * {
759
- --pf-v5-c-toolbar--spacer: ;
758
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > * {
759
+ --pf-v5-c-toolbar--spacer: 0;
760
760
  }
761
- .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > :last-child {
761
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > :last-child {
762
762
  --pf-v5-c-toolbar--spacer: 0;
763
763
  }
764
764
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-lg > * {
@@ -781,10 +781,10 @@
781
781
  }
782
782
  }
783
783
  @media (min-width: 1200px) {
784
- .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > * {
785
- --pf-v5-c-toolbar--spacer: ;
784
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > * {
785
+ --pf-v5-c-toolbar--spacer: 0;
786
786
  }
787
- .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > :last-child {
787
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > :last-child {
788
788
  --pf-v5-c-toolbar--spacer: 0;
789
789
  }
790
790
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-xl > * {
@@ -807,10 +807,10 @@
807
807
  }
808
808
  }
809
809
  @media (min-width: 1450px) {
810
- .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > * {
811
- --pf-v5-c-toolbar--spacer: ;
810
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > * {
811
+ --pf-v5-c-toolbar--spacer: 0;
812
812
  }
813
- .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > :last-child {
813
+ .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > :last-child {
814
814
  --pf-v5-c-toolbar--spacer: 0;
815
815
  }
816
816
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-2xl > * {
@@ -832,11 +832,11 @@
832
832
  --pf-v5-c-toolbar--spacer: 0;
833
833
  }
834
834
  }
835
- .pf-v5-c-toolbar .pf-m-spacer-base {
836
- --pf-v5-c-toolbar--spacer: ;
835
+ .pf-v5-c-toolbar .pf-m-spacer-none {
836
+ --pf-v5-c-toolbar--spacer: 0;
837
837
  }
838
- .pf-v5-c-toolbar .pf-m-spacer-base:last-child {
839
- --pf-v5-c-toolbar--spacer: ;
838
+ .pf-v5-c-toolbar .pf-m-spacer-none:last-child {
839
+ --pf-v5-c-toolbar--spacer: 0;
840
840
  }
841
841
  .pf-v5-c-toolbar .pf-m-spacer-sm {
842
842
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -857,11 +857,11 @@
857
857
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
858
858
  }
859
859
  @media (min-width: 576px) {
860
- .pf-v5-c-toolbar .pf-m-spacer-base-on-sm {
861
- --pf-v5-c-toolbar--spacer: ;
860
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-sm {
861
+ --pf-v5-c-toolbar--spacer: 0;
862
862
  }
863
- .pf-v5-c-toolbar .pf-m-spacer-base-on-sm:last-child {
864
- --pf-v5-c-toolbar--spacer: ;
863
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-sm:last-child {
864
+ --pf-v5-c-toolbar--spacer: 0;
865
865
  }
866
866
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-sm {
867
867
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -883,11 +883,11 @@
883
883
  }
884
884
  }
885
885
  @media (min-width: 768px) {
886
- .pf-v5-c-toolbar .pf-m-spacer-base-on-md {
887
- --pf-v5-c-toolbar--spacer: ;
886
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-md {
887
+ --pf-v5-c-toolbar--spacer: 0;
888
888
  }
889
- .pf-v5-c-toolbar .pf-m-spacer-base-on-md:last-child {
890
- --pf-v5-c-toolbar--spacer: ;
889
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-md:last-child {
890
+ --pf-v5-c-toolbar--spacer: 0;
891
891
  }
892
892
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-md {
893
893
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -909,11 +909,11 @@
909
909
  }
910
910
  }
911
911
  @media (min-width: 992px) {
912
- .pf-v5-c-toolbar .pf-m-spacer-base-on-lg {
913
- --pf-v5-c-toolbar--spacer: ;
912
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-lg {
913
+ --pf-v5-c-toolbar--spacer: 0;
914
914
  }
915
- .pf-v5-c-toolbar .pf-m-spacer-base-on-lg:last-child {
916
- --pf-v5-c-toolbar--spacer: ;
915
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-lg:last-child {
916
+ --pf-v5-c-toolbar--spacer: 0;
917
917
  }
918
918
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-lg {
919
919
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -935,11 +935,11 @@
935
935
  }
936
936
  }
937
937
  @media (min-width: 1200px) {
938
- .pf-v5-c-toolbar .pf-m-spacer-base-on-xl {
939
- --pf-v5-c-toolbar--spacer: ;
938
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-xl {
939
+ --pf-v5-c-toolbar--spacer: 0;
940
940
  }
941
- .pf-v5-c-toolbar .pf-m-spacer-base-on-xl:last-child {
942
- --pf-v5-c-toolbar--spacer: ;
941
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-xl:last-child {
942
+ --pf-v5-c-toolbar--spacer: 0;
943
943
  }
944
944
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-xl {
945
945
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -961,11 +961,11 @@
961
961
  }
962
962
  }
963
963
  @media (min-width: 1450px) {
964
- .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl {
965
- --pf-v5-c-toolbar--spacer: ;
964
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl {
965
+ --pf-v5-c-toolbar--spacer: 0;
966
966
  }
967
- .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl:last-child {
968
- --pf-v5-c-toolbar--spacer: ;
967
+ .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl:last-child {
968
+ --pf-v5-c-toolbar--spacer: 0;
969
969
  }
970
970
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-2xl {
971
971
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -986,8 +986,8 @@
986
986
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
987
987
  }
988
988
  }
989
- .pf-v5-c-toolbar.pf-m-inset-base {
990
- --pf-v5-c-toolbar--inset: ;
989
+ .pf-v5-c-toolbar.pf-m-inset-none {
990
+ --pf-v5-c-toolbar--inset: 0;
991
991
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
992
992
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
993
993
  }
@@ -1017,8 +1017,8 @@
1017
1017
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1018
1018
  }
1019
1019
  @media (min-width: 576px) {
1020
- .pf-v5-c-toolbar.pf-m-inset-base-on-sm {
1021
- --pf-v5-c-toolbar--inset: ;
1020
+ .pf-v5-c-toolbar.pf-m-inset-none-on-sm {
1021
+ --pf-v5-c-toolbar--inset: 0;
1022
1022
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1023
1023
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1024
1024
  }
@@ -1049,8 +1049,8 @@
1049
1049
  }
1050
1050
  }
1051
1051
  @media (min-width: 768px) {
1052
- .pf-v5-c-toolbar.pf-m-inset-base-on-md {
1053
- --pf-v5-c-toolbar--inset: ;
1052
+ .pf-v5-c-toolbar.pf-m-inset-none-on-md {
1053
+ --pf-v5-c-toolbar--inset: 0;
1054
1054
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1055
1055
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1056
1056
  }
@@ -1081,8 +1081,8 @@
1081
1081
  }
1082
1082
  }
1083
1083
  @media (min-width: 992px) {
1084
- .pf-v5-c-toolbar.pf-m-inset-base-on-lg {
1085
- --pf-v5-c-toolbar--inset: ;
1084
+ .pf-v5-c-toolbar.pf-m-inset-none-on-lg {
1085
+ --pf-v5-c-toolbar--inset: 0;
1086
1086
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1087
1087
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1088
1088
  }
@@ -1113,8 +1113,8 @@
1113
1113
  }
1114
1114
  }
1115
1115
  @media (min-width: 1200px) {
1116
- .pf-v5-c-toolbar.pf-m-inset-base-on-xl {
1117
- --pf-v5-c-toolbar--inset: ;
1116
+ .pf-v5-c-toolbar.pf-m-inset-none-on-xl {
1117
+ --pf-v5-c-toolbar--inset: 0;
1118
1118
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1119
1119
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1120
1120
  }
@@ -1145,8 +1145,8 @@
1145
1145
  }
1146
1146
  }
1147
1147
  @media (min-width: 1450px) {
1148
- .pf-v5-c-toolbar.pf-m-inset-base-on-2xl {
1149
- --pf-v5-c-toolbar--inset: ;
1148
+ .pf-v5-c-toolbar.pf-m-inset-none-on-2xl {
1149
+ --pf-v5-c-toolbar--inset: 0;
1150
1150
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1151
1151
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1152
1152
  }
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -83,13 +83,14 @@ cssPrefix: pf-v5-c-calendar-month
83
83
  </div>
84
84
  <div class="pf-v5-c-input-group__item">
85
85
  <div class="pf-v5-c-calendar-month__header-year">
86
- <input
87
- class="pf-v5-c-form-control"
88
- type="number"
89
- value="2020"
90
- id="calendar-month-date-selected-year"
91
- aria-label="Select year"
92
- />
86
+ <div class="pf-v5-c-form-control">
87
+ <input
88
+ type="number"
89
+ value="2020"
90
+ id="calendar-month-date-selected-year"
91
+ aria-label="Select year"
92
+ />
93
+ </div>
93
94
  </div>
94
95
  </div>
95
96
  </div>
@@ -476,13 +477,14 @@ cssPrefix: pf-v5-c-calendar-month
476
477
  </div>
477
478
  <div class="pf-v5-c-input-group__item">
478
479
  <div class="pf-v5-c-calendar-month__header-year">
479
- <input
480
- class="pf-v5-c-form-control"
481
- type="number"
482
- value="2020"
483
- id="calendar-month-range-start-date-selected-year"
484
- aria-label="Select year"
485
- />
480
+ <div class="pf-v5-c-form-control">
481
+ <input
482
+ type="number"
483
+ value="2020"
484
+ id="calendar-month-range-start-date-selected-year"
485
+ aria-label="Select year"
486
+ />
487
+ </div>
486
488
  </div>
487
489
  </div>
488
490
  </div>
@@ -894,13 +896,14 @@ cssPrefix: pf-v5-c-calendar-month
894
896
  </div>
895
897
  <div class="pf-v5-c-input-group__item">
896
898
  <div class="pf-v5-c-calendar-month__header-year">
897
- <input
898
- class="pf-v5-c-form-control"
899
- type="number"
900
- value="2020"
901
- id="calendar-month-range-end-date-selected-year"
902
- aria-label="Select year"
903
- />
899
+ <div class="pf-v5-c-form-control">
900
+ <input
901
+ type="number"
902
+ value="2020"
903
+ id="calendar-month-range-end-date-selected-year"
904
+ aria-label="Select year"
905
+ />
906
+ </div>
904
907
  </div>
905
908
  </div>
906
909
  </div>
@@ -1312,13 +1315,14 @@ cssPrefix: pf-v5-c-calendar-month
1312
1315
  </div>
1313
1316
  <div class="pf-v5-c-input-group__item">
1314
1317
  <div class="pf-v5-c-calendar-month__header-year">
1315
- <input
1316
- class="pf-v5-c-form-control"
1317
- type="number"
1318
- value="2020"
1319
- id="calendar-month-range-start-and-end-dates-selected-year"
1320
- aria-label="Select year"
1321
- />
1318
+ <div class="pf-v5-c-form-control">
1319
+ <input
1320
+ type="number"
1321
+ value="2020"
1322
+ id="calendar-month-range-start-and-end-dates-selected-year"
1323
+ aria-label="Select year"
1324
+ />
1325
+ </div>
1322
1326
  </div>
1323
1327
  </div>
1324
1328
  </div>