@patternfly/react-core 4.258.3 → 4.258.4

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.258.4 (2022-11-01)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  ## [4.258.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.258.2...@patternfly/react-core@4.258.3) (2022-10-27)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-core
@@ -529,6 +529,256 @@
529
529
  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
530
530
  }
531
531
 
532
+ .pf-c-app-launcher {
533
+ --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
534
+ --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
535
+ --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
536
+ --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
537
+ --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
538
+ --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
539
+ --pf-c-app-launcher--m-top__menu--Top: 0;
540
+ --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
541
+ --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
542
+ --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
543
+ --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
544
+ --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
545
+ --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
546
+ --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
547
+ --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
548
+ --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
549
+ --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
550
+ --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
551
+ --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
552
+ --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
553
+ --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
554
+ --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
555
+ --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
556
+ --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
557
+ --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
558
+ --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
559
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
560
+ --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
561
+ --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
562
+ --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
563
+ --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
564
+ --pf-c-app-launcher__menu-item--Width: 100%;
565
+ --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
566
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
567
+ --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
568
+ --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
569
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
570
+ --pf-c-app-launcher__menu-item--m-action--Width: auto;
571
+ --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
572
+ --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
573
+ --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
574
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
575
+ --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
576
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
577
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
578
+ --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
579
+ --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
580
+ --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
581
+ --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
582
+ --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
583
+ --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
584
+ --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
585
+ --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
586
+ --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
587
+ --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
588
+ --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
589
+ --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
590
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
591
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
592
+ --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
593
+ --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
594
+ --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
595
+ position: relative;
596
+ display: inline-block;
597
+ max-width: 100%;
598
+ }
599
+
600
+ .pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
601
+ color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
602
+ }
603
+
604
+ .pf-c-app-launcher .pf-c-divider {
605
+ margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
606
+ margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
607
+ }
608
+
609
+ .pf-c-app-launcher .pf-c-divider:last-child {
610
+ --pf-c-app-launcher--c-divider--MarginBottom: 0;
611
+ }
612
+
613
+ .pf-c-app-launcher__toggle {
614
+ padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
615
+ color: var(--pf-c-app-launcher__toggle--Color);
616
+ border: none;
617
+ }
618
+
619
+ .pf-c-app-launcher__toggle:hover {
620
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
621
+ }
622
+
623
+ .pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
624
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
625
+ }
626
+
627
+ .pf-c-app-launcher__toggle:focus {
628
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
629
+ }
630
+
631
+ .pf-c-app-launcher__toggle:disabled {
632
+ --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
633
+ pointer-events: none;
634
+ }
635
+
636
+ .pf-c-app-launcher__menu {
637
+ position: absolute;
638
+ top: var(--pf-c-app-launcher__menu--Top);
639
+ z-index: var(--pf-c-app-launcher__menu--ZIndex);
640
+ min-width: 100%;
641
+ padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
642
+ padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
643
+ background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
644
+ background-clip: padding-box;
645
+ box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
646
+ }
647
+
648
+ .pf-c-app-launcher__menu.pf-m-align-right {
649
+ right: 0;
650
+ }
651
+
652
+ .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
653
+ --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
654
+ transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
655
+ }
656
+
657
+ .pf-c-app-launcher__menu.pf-m-static {
658
+ --pf-c-app-launcher--m-top__menu--TranslateY: 0;
659
+ position: static;
660
+ top: auto;
661
+ right: auto;
662
+ bottom: auto;
663
+ left: auto;
664
+ z-index: auto;
665
+ min-width: min-content;
666
+ }
667
+
668
+ .pf-c-app-launcher__menu-search {
669
+ padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
670
+ margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
671
+ border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
672
+ }
673
+
674
+ .pf-c-app-launcher__menu-wrapper {
675
+ display: flex;
676
+ }
677
+
678
+ .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
679
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
680
+ --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
681
+ }
682
+
683
+ .pf-c-app-launcher__menu-item {
684
+ display: flex;
685
+ align-items: center;
686
+ width: var(--pf-c-app-launcher__menu-item--Width);
687
+ padding: var(--pf-c-app-launcher__menu-item--PaddingTop) var(--pf-c-app-launcher__menu-item--PaddingRight) var(--pf-c-app-launcher__menu-item--PaddingBottom) var(--pf-c-app-launcher__menu-item--PaddingLeft);
688
+ font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
689
+ color: var(--pf-c-app-launcher__menu-item--Color);
690
+ white-space: nowrap;
691
+ border: 0;
692
+ }
693
+
694
+ .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
695
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
696
+ text-decoration: none;
697
+ }
698
+
699
+ .pf-c-app-launcher__menu-wrapper:hover,
700
+ .pf-c-app-launcher__menu-wrapper:focus-within,
701
+ .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
702
+ background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
703
+ }
704
+
705
+ .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
706
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
707
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
708
+ pointer-events: none;
709
+ }
710
+
711
+ .pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
712
+ background-color: transparent;
713
+ }
714
+
715
+ .pf-c-app-launcher__menu-wrapper.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-wrapper.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon {
716
+ opacity: 1;
717
+ }
718
+
719
+ .pf-c-app-launcher__menu-item.pf-m-link {
720
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
721
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
722
+ }
723
+
724
+ .pf-c-app-launcher__menu-item.pf-m-action {
725
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
726
+ --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
727
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
728
+ font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
729
+ }
730
+
731
+ .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
732
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
733
+ }
734
+
735
+ .pf-c-app-launcher__menu-item-icon {
736
+ display: inline-flex;
737
+ align-items: center;
738
+ justify-content: center;
739
+ width: var(--pf-c-app-launcher__menu-item-icon--Width);
740
+ height: var(--pf-c-app-launcher__menu-item-icon--Height);
741
+ margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
742
+ }
743
+
744
+ .pf-c-app-launcher__menu-item-icon > * {
745
+ max-width: 100%;
746
+ max-height: 100%;
747
+ }
748
+
749
+ .pf-c-app-launcher__menu-item-external-icon {
750
+ padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
751
+ margin-left: auto;
752
+ font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
753
+ color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
754
+ opacity: 0;
755
+ transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
756
+ }
757
+
758
+ .pf-c-app-launcher__group + .pf-c-app-launcher__group {
759
+ padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
760
+ }
761
+
762
+ .pf-c-app-launcher__group-title {
763
+ padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
764
+ padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
765
+ padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
766
+ padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
767
+ font-size: var(--pf-c-app-launcher__group-title--FontSize);
768
+ font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
769
+ color: var(--pf-c-app-launcher__group-title--Color);
770
+ }
771
+
772
+ :where(.pf-theme-dark) .pf-c-app-launcher {
773
+ --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
774
+ --pf-c-app-launcher__menu--Top: 100%;
775
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
776
+ --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
777
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
778
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
779
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
780
+ }
781
+
532
782
  .pf-c-form-control {
533
783
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
534
784
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1311,256 +1561,6 @@ textarea.pf-c-form-control {
1311
1561
  --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))))));
1312
1562
  }
1313
1563
  }
1314
- .pf-c-app-launcher {
1315
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
1316
- --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
1317
- --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
1318
- --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
1319
- --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
1320
- --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
1321
- --pf-c-app-launcher--m-top__menu--Top: 0;
1322
- --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
1323
- --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
1324
- --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
1325
- --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
1326
- --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
1327
- --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
1328
- --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
1329
- --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
1330
- --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
1331
- --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
1332
- --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
1333
- --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
1334
- --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
1335
- --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
1336
- --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
1337
- --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
1338
- --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
1339
- --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
1340
- --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
1341
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
1342
- --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
1343
- --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
1344
- --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
1345
- --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
1346
- --pf-c-app-launcher__menu-item--Width: 100%;
1347
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
1348
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
1349
- --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
1350
- --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
1351
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
1352
- --pf-c-app-launcher__menu-item--m-action--Width: auto;
1353
- --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
1354
- --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
1355
- --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
1356
- --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
1357
- --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
1358
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
1359
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
1360
- --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
1361
- --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
1362
- --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
1363
- --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
1364
- --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
1365
- --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
1366
- --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
1367
- --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
1368
- --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
1369
- --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
1370
- --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
1371
- --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
1372
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
1373
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
1374
- --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
1375
- --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
1376
- --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
1377
- position: relative;
1378
- display: inline-block;
1379
- max-width: 100%;
1380
- }
1381
-
1382
- .pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
1383
- color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
1384
- }
1385
-
1386
- .pf-c-app-launcher .pf-c-divider {
1387
- margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
1388
- margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
1389
- }
1390
-
1391
- .pf-c-app-launcher .pf-c-divider:last-child {
1392
- --pf-c-app-launcher--c-divider--MarginBottom: 0;
1393
- }
1394
-
1395
- .pf-c-app-launcher__toggle {
1396
- padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
1397
- color: var(--pf-c-app-launcher__toggle--Color);
1398
- border: none;
1399
- }
1400
-
1401
- .pf-c-app-launcher__toggle:hover {
1402
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
1403
- }
1404
-
1405
- .pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
1406
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
1407
- }
1408
-
1409
- .pf-c-app-launcher__toggle:focus {
1410
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
1411
- }
1412
-
1413
- .pf-c-app-launcher__toggle:disabled {
1414
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
1415
- pointer-events: none;
1416
- }
1417
-
1418
- .pf-c-app-launcher__menu {
1419
- position: absolute;
1420
- top: var(--pf-c-app-launcher__menu--Top);
1421
- z-index: var(--pf-c-app-launcher__menu--ZIndex);
1422
- min-width: 100%;
1423
- padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
1424
- padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
1425
- background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
1426
- background-clip: padding-box;
1427
- box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
1428
- }
1429
-
1430
- .pf-c-app-launcher__menu.pf-m-align-right {
1431
- right: 0;
1432
- }
1433
-
1434
- .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
1435
- --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
1436
- transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
1437
- }
1438
-
1439
- .pf-c-app-launcher__menu.pf-m-static {
1440
- --pf-c-app-launcher--m-top__menu--TranslateY: 0;
1441
- position: static;
1442
- top: auto;
1443
- right: auto;
1444
- bottom: auto;
1445
- left: auto;
1446
- z-index: auto;
1447
- min-width: min-content;
1448
- }
1449
-
1450
- .pf-c-app-launcher__menu-search {
1451
- padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
1452
- margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
1453
- border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
1454
- }
1455
-
1456
- .pf-c-app-launcher__menu-wrapper {
1457
- display: flex;
1458
- }
1459
-
1460
- .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
1461
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
1462
- --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
1463
- }
1464
-
1465
- .pf-c-app-launcher__menu-item {
1466
- display: flex;
1467
- align-items: center;
1468
- width: var(--pf-c-app-launcher__menu-item--Width);
1469
- padding: var(--pf-c-app-launcher__menu-item--PaddingTop) var(--pf-c-app-launcher__menu-item--PaddingRight) var(--pf-c-app-launcher__menu-item--PaddingBottom) var(--pf-c-app-launcher__menu-item--PaddingLeft);
1470
- font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
1471
- color: var(--pf-c-app-launcher__menu-item--Color);
1472
- white-space: nowrap;
1473
- border: 0;
1474
- }
1475
-
1476
- .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1477
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
1478
- text-decoration: none;
1479
- }
1480
-
1481
- .pf-c-app-launcher__menu-wrapper:hover,
1482
- .pf-c-app-launcher__menu-wrapper:focus-within,
1483
- .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1484
- background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
1485
- }
1486
-
1487
- .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
1488
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
1489
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
1490
- pointer-events: none;
1491
- }
1492
-
1493
- .pf-c-app-launcher__menu-wrapper:disabled, .pf-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
1494
- background-color: transparent;
1495
- }
1496
-
1497
- .pf-c-app-launcher__menu-wrapper.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-wrapper.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:hover .pf-c-app-launcher__menu-item-external-icon, .pf-c-app-launcher__menu-item.pf-m-external:focus .pf-c-app-launcher__menu-item-external-icon {
1498
- opacity: 1;
1499
- }
1500
-
1501
- .pf-c-app-launcher__menu-item.pf-m-link {
1502
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
1503
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
1504
- }
1505
-
1506
- .pf-c-app-launcher__menu-item.pf-m-action {
1507
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
1508
- --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
1509
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
1510
- font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
1511
- }
1512
-
1513
- .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
1514
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
1515
- }
1516
-
1517
- .pf-c-app-launcher__menu-item-icon {
1518
- display: inline-flex;
1519
- align-items: center;
1520
- justify-content: center;
1521
- width: var(--pf-c-app-launcher__menu-item-icon--Width);
1522
- height: var(--pf-c-app-launcher__menu-item-icon--Height);
1523
- margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
1524
- }
1525
-
1526
- .pf-c-app-launcher__menu-item-icon > * {
1527
- max-width: 100%;
1528
- max-height: 100%;
1529
- }
1530
-
1531
- .pf-c-app-launcher__menu-item-external-icon {
1532
- padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
1533
- margin-left: auto;
1534
- font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
1535
- color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
1536
- opacity: 0;
1537
- transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
1538
- }
1539
-
1540
- .pf-c-app-launcher__group + .pf-c-app-launcher__group {
1541
- padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
1542
- }
1543
-
1544
- .pf-c-app-launcher__group-title {
1545
- padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
1546
- padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
1547
- padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
1548
- padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
1549
- font-size: var(--pf-c-app-launcher__group-title--FontSize);
1550
- font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
1551
- color: var(--pf-c-app-launcher__group-title--Color);
1552
- }
1553
-
1554
- :where(.pf-theme-dark) .pf-c-app-launcher {
1555
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
1556
- --pf-c-app-launcher__menu--Top: 100%;
1557
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
1558
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
1559
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
1560
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
1561
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
1562
- }
1563
-
1564
1564
  .pf-c-back-to-top {
1565
1565
  --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1566
1566
  --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
@@ -1862,70 +1862,6 @@ textarea.pf-c-form-control {
1862
1862
  color: var(--pf-global--palette--black-900);
1863
1863
  }
1864
1864
 
1865
- .pf-c-brand {
1866
- --pf-c-brand--Width: auto;
1867
- --pf-c-brand--Height: auto;
1868
- width: var(--pf-c-brand--Width--base);
1869
- height: var(--pf-c-brand--Height--base);
1870
- --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1871
- --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1872
- }
1873
-
1874
- @media (min-width: 576px) {
1875
- .pf-c-brand {
1876
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1877
- }
1878
- }
1879
- @media (min-width: 768px) {
1880
- .pf-c-brand {
1881
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1882
- }
1883
- }
1884
- @media (min-width: 992px) {
1885
- .pf-c-brand {
1886
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1887
- }
1888
- }
1889
- @media (min-width: 1200px) {
1890
- .pf-c-brand {
1891
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1892
- }
1893
- }
1894
- @media (min-width: 1450px) {
1895
- .pf-c-brand {
1896
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
1897
- }
1898
- }
1899
- @media (min-width: 576px) {
1900
- .pf-c-brand {
1901
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
1902
- }
1903
- }
1904
- @media (min-width: 768px) {
1905
- .pf-c-brand {
1906
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
1907
- }
1908
- }
1909
- @media (min-width: 992px) {
1910
- .pf-c-brand {
1911
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
1912
- }
1913
- }
1914
- @media (min-width: 1200px) {
1915
- .pf-c-brand {
1916
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
1917
- }
1918
- }
1919
- @media (min-width: 1450px) {
1920
- .pf-c-brand {
1921
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
1922
- }
1923
- }
1924
- .pf-c-brand.pf-m-picture {
1925
- display: inline-flex;
1926
- max-width: 100%;
1927
- }
1928
-
1929
1865
  .pf-c-breadcrumb {
1930
1866
  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
1931
1867
  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
@@ -2033,6 +1969,70 @@ button.pf-c-breadcrumb__link {
2033
1969
  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
2034
1970
  }
2035
1971
 
1972
+ .pf-c-brand {
1973
+ --pf-c-brand--Width: auto;
1974
+ --pf-c-brand--Height: auto;
1975
+ width: var(--pf-c-brand--Width--base);
1976
+ height: var(--pf-c-brand--Height--base);
1977
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1978
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1979
+ }
1980
+
1981
+ @media (min-width: 576px) {
1982
+ .pf-c-brand {
1983
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1984
+ }
1985
+ }
1986
+ @media (min-width: 768px) {
1987
+ .pf-c-brand {
1988
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1989
+ }
1990
+ }
1991
+ @media (min-width: 992px) {
1992
+ .pf-c-brand {
1993
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1994
+ }
1995
+ }
1996
+ @media (min-width: 1200px) {
1997
+ .pf-c-brand {
1998
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1999
+ }
2000
+ }
2001
+ @media (min-width: 1450px) {
2002
+ .pf-c-brand {
2003
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
2004
+ }
2005
+ }
2006
+ @media (min-width: 576px) {
2007
+ .pf-c-brand {
2008
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
2009
+ }
2010
+ }
2011
+ @media (min-width: 768px) {
2012
+ .pf-c-brand {
2013
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
2014
+ }
2015
+ }
2016
+ @media (min-width: 992px) {
2017
+ .pf-c-brand {
2018
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
2019
+ }
2020
+ }
2021
+ @media (min-width: 1200px) {
2022
+ .pf-c-brand {
2023
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
2024
+ }
2025
+ }
2026
+ @media (min-width: 1450px) {
2027
+ .pf-c-brand {
2028
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
2029
+ }
2030
+ }
2031
+ .pf-c-brand.pf-m-picture {
2032
+ display: inline-flex;
2033
+ max-width: 100%;
2034
+ }
2035
+
2036
2036
  .pf-c-button {
2037
2037
  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
2038
2038
  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.258.3",
3
+ "version": "4.258.4",
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": "8faac0c6f8e22f1221bd4a13ade19c4ca47ce22c"
73
+ "gitHead": "1fa474ac5bfe3fdcd5a1b5c48b0c9d4ca809b79a"
74
74
  }
@@ -28,5 +28,5 @@ ouia: true
28
28
 
29
29
  **Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
30
30
 
31
- ```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
31
+ ```ts file='./FormSelectIconSpriteVariant.tsx'
32
32
  ```