@patternfly/react-core 4.250.5 → 4.250.7

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,22 @@
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.250.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.250.6...@patternfly/react-core@4.250.7) (2022-10-12)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
14
+ ## [4.250.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.250.5...@patternfly/react-core@4.250.6) (2022-10-12)
15
+
16
+ **Note:** Version bump only for package @patternfly/react-core
17
+
18
+
19
+
20
+
21
+
6
22
  ## [4.250.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.250.4...@patternfly/react-core@4.250.5) (2022-10-12)
7
23
 
8
24
 
@@ -529,6 +529,245 @@
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-search {
658
+ 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);
659
+ margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
660
+ border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
661
+ }
662
+
663
+ .pf-c-app-launcher__menu-wrapper {
664
+ display: flex;
665
+ }
666
+
667
+ .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
668
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
669
+ --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);
670
+ }
671
+
672
+ .pf-c-app-launcher__menu-item {
673
+ display: flex;
674
+ align-items: center;
675
+ width: var(--pf-c-app-launcher__menu-item--Width);
676
+ 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);
677
+ font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
678
+ color: var(--pf-c-app-launcher__menu-item--Color);
679
+ white-space: nowrap;
680
+ border: 0;
681
+ }
682
+
683
+ .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
684
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
685
+ text-decoration: none;
686
+ }
687
+
688
+ .pf-c-app-launcher__menu-wrapper:hover,
689
+ .pf-c-app-launcher__menu-wrapper:focus-within,
690
+ .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
691
+ background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
692
+ }
693
+
694
+ .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
695
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
696
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
697
+ pointer-events: none;
698
+ }
699
+
700
+ .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 {
701
+ background-color: transparent;
702
+ }
703
+
704
+ .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 {
705
+ opacity: 1;
706
+ }
707
+
708
+ .pf-c-app-launcher__menu-item.pf-m-link {
709
+ --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
710
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
711
+ }
712
+
713
+ .pf-c-app-launcher__menu-item.pf-m-action {
714
+ --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
715
+ --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
716
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
717
+ font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
718
+ }
719
+
720
+ .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
721
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
722
+ }
723
+
724
+ .pf-c-app-launcher__menu-item-icon {
725
+ display: inline-flex;
726
+ align-items: center;
727
+ justify-content: center;
728
+ width: var(--pf-c-app-launcher__menu-item-icon--Width);
729
+ height: var(--pf-c-app-launcher__menu-item-icon--Height);
730
+ margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
731
+ }
732
+
733
+ .pf-c-app-launcher__menu-item-icon > * {
734
+ max-width: 100%;
735
+ max-height: 100%;
736
+ }
737
+
738
+ .pf-c-app-launcher__menu-item-external-icon {
739
+ padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
740
+ margin-left: auto;
741
+ font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
742
+ color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
743
+ opacity: 0;
744
+ transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
745
+ }
746
+
747
+ .pf-c-app-launcher__group + .pf-c-app-launcher__group {
748
+ padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
749
+ }
750
+
751
+ .pf-c-app-launcher__group-title {
752
+ padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
753
+ padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
754
+ padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
755
+ padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
756
+ font-size: var(--pf-c-app-launcher__group-title--FontSize);
757
+ font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
758
+ color: var(--pf-c-app-launcher__group-title--Color);
759
+ }
760
+
761
+ :where(.pf-theme-dark) .pf-c-app-launcher {
762
+ --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
763
+ --pf-c-app-launcher__menu--Top: 100%;
764
+ --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
765
+ --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
766
+ --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
767
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
768
+ --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
769
+ }
770
+
532
771
  .pf-c-form-control {
533
772
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
534
773
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -831,322 +1070,83 @@ select.pf-c-form-control {
831
1070
  select.pf-c-form-control {
832
1071
  --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
833
1072
  --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
834
- }
835
- }
836
- select.pf-c-form-control[aria-invalid=true] {
837
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
838
- --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
839
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl);
840
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition);
841
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
842
- }
843
-
844
- select.pf-c-form-control.pf-m-success {
845
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
846
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
847
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
848
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
849
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
850
- }
851
-
852
- select.pf-c-form-control.pf-m-warning {
853
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
854
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
855
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
856
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
857
- }
858
-
859
- select.pf-c-form-control.pf-m-placeholder {
860
- color: var(--pf-c-form-control--placeholder--Color);
861
- }
862
-
863
- select.pf-c-form-control.pf-m-placeholder * {
864
- color: var(--pf-c-form-control--placeholder--child--Color);
865
- }
866
-
867
- select.pf-c-form-control.pf-m-placeholder *:disabled {
868
- color: revert;
869
- }
870
-
871
- textarea.pf-c-form-control {
872
- --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
873
- --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
874
- --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
875
- width: var(--pf-c-form-control--textarea--Width);
876
- height: var(--pf-c-form-control--textarea--Height);
877
- vertical-align: bottom;
878
- }
879
-
880
- .pf-c-form-control.pf-m-resize-vertical {
881
- resize: vertical;
882
- }
883
-
884
- .pf-c-form-control.pf-m-resize-horizontal {
885
- resize: horizontal;
886
- }
887
-
888
- :where(.pf-theme-dark) .pf-c-form-control {
889
- --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
890
- --pf-c-form-control--BorderTopColor: transparent;
891
- --pf-c-form-control--BorderRightColor: transparent;
892
- --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
893
- --pf-c-form-control--BorderLeftColor: transparent;
894
- --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
895
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
896
- --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
897
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
898
- color: var(--pf-global--Color--100);
899
- }
900
-
901
- :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
902
- filter: invert(1);
903
- }
904
-
905
- :where(.pf-theme-dark) .pf-c-form-control[readonly] {
906
- border-bottom-color: var(--pf-global--palette--black-700);
907
- }
908
-
909
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
910
- color: var(--pf-global--palette--black-100);
911
- }
912
-
913
- .pf-c-app-launcher {
914
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
915
- --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
916
- --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
917
- --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
918
- --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
919
- --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
920
- --pf-c-app-launcher--m-top__menu--Top: 0;
921
- --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
922
- --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
923
- --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
924
- --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
925
- --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
926
- --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
927
- --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
928
- --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
929
- --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
930
- --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
931
- --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
932
- --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
933
- --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
934
- --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
935
- --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
936
- --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
937
- --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
938
- --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
939
- --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
940
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
941
- --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
942
- --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
943
- --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
944
- --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
945
- --pf-c-app-launcher__menu-item--Width: 100%;
946
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
947
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
948
- --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
949
- --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
950
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
951
- --pf-c-app-launcher__menu-item--m-action--Width: auto;
952
- --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
953
- --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
954
- --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
955
- --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
956
- --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
957
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
958
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
959
- --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
960
- --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
961
- --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
962
- --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
963
- --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
964
- --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
965
- --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
966
- --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
967
- --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
968
- --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
969
- --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
970
- --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
971
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
972
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
973
- --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
974
- --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
975
- --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
976
- position: relative;
977
- display: inline-block;
978
- max-width: 100%;
979
- }
980
-
981
- .pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
982
- color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
983
- }
984
-
985
- .pf-c-app-launcher .pf-c-divider {
986
- margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
987
- margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
988
- }
989
-
990
- .pf-c-app-launcher .pf-c-divider:last-child {
991
- --pf-c-app-launcher--c-divider--MarginBottom: 0;
992
- }
993
-
994
- .pf-c-app-launcher__toggle {
995
- 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);
996
- color: var(--pf-c-app-launcher__toggle--Color);
997
- border: none;
998
- }
999
-
1000
- .pf-c-app-launcher__toggle:hover {
1001
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
1002
- }
1003
-
1004
- .pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
1005
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
1006
- }
1007
-
1008
- .pf-c-app-launcher__toggle:focus {
1009
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
1010
- }
1011
-
1012
- .pf-c-app-launcher__toggle:disabled {
1013
- --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
1014
- pointer-events: none;
1015
- }
1016
-
1017
- .pf-c-app-launcher__menu {
1018
- position: absolute;
1019
- top: var(--pf-c-app-launcher__menu--Top);
1020
- z-index: var(--pf-c-app-launcher__menu--ZIndex);
1021
- min-width: 100%;
1022
- padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
1023
- padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
1024
- background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
1025
- background-clip: padding-box;
1026
- box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
1027
- }
1028
-
1029
- .pf-c-app-launcher__menu.pf-m-align-right {
1030
- right: 0;
1031
- }
1032
-
1033
- .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
1034
- --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
1035
- transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
1036
- }
1037
-
1038
- .pf-c-app-launcher__menu-search {
1039
- 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);
1040
- margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
1041
- border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
1042
- }
1043
-
1044
- .pf-c-app-launcher__menu-wrapper {
1045
- display: flex;
1046
- }
1047
-
1048
- .pf-c-app-launcher__menu-wrapper.pf-m-favorite {
1049
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
1050
- --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);
1051
- }
1052
-
1053
- .pf-c-app-launcher__menu-item {
1054
- display: flex;
1055
- align-items: center;
1056
- width: var(--pf-c-app-launcher__menu-item--Width);
1057
- 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);
1058
- font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
1059
- color: var(--pf-c-app-launcher__menu-item--Color);
1060
- white-space: nowrap;
1061
- border: 0;
1062
- }
1063
-
1064
- .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1065
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
1066
- text-decoration: none;
1067
- }
1068
-
1069
- .pf-c-app-launcher__menu-wrapper:hover,
1070
- .pf-c-app-launcher__menu-wrapper:focus-within,
1071
- .pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
1072
- background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
1073
+ }
1074
+ }
1075
+ select.pf-c-form-control[aria-invalid=true] {
1076
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
1077
+ --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
1078
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl);
1079
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition);
1080
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
1073
1081
  }
1074
1082
 
1075
- .pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
1076
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
1077
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
1078
- pointer-events: none;
1083
+ select.pf-c-form-control.pf-m-success {
1084
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
1085
+ --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
1086
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
1087
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
1088
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
1079
1089
  }
1080
1090
 
1081
- .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 {
1082
- background-color: transparent;
1091
+ select.pf-c-form-control.pf-m-warning {
1092
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
1093
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
1094
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
1095
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
1083
1096
  }
1084
1097
 
1085
- .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 {
1086
- opacity: 1;
1098
+ select.pf-c-form-control.pf-m-placeholder {
1099
+ color: var(--pf-c-form-control--placeholder--Color);
1087
1100
  }
1088
1101
 
1089
- .pf-c-app-launcher__menu-item.pf-m-link {
1090
- --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
1091
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
1102
+ select.pf-c-form-control.pf-m-placeholder * {
1103
+ color: var(--pf-c-form-control--placeholder--child--Color);
1092
1104
  }
1093
1105
 
1094
- .pf-c-app-launcher__menu-item.pf-m-action {
1095
- --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
1096
- --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
1097
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
1098
- font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
1106
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
1107
+ color: revert;
1099
1108
  }
1100
1109
 
1101
- .pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
1102
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
1110
+ textarea.pf-c-form-control {
1111
+ --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
1112
+ --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
1113
+ --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
1114
+ width: var(--pf-c-form-control--textarea--Width);
1115
+ height: var(--pf-c-form-control--textarea--Height);
1116
+ vertical-align: bottom;
1103
1117
  }
1104
1118
 
1105
- .pf-c-app-launcher__menu-item-icon {
1106
- display: inline-flex;
1107
- align-items: center;
1108
- justify-content: center;
1109
- width: var(--pf-c-app-launcher__menu-item-icon--Width);
1110
- height: var(--pf-c-app-launcher__menu-item-icon--Height);
1111
- margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
1119
+ .pf-c-form-control.pf-m-resize-vertical {
1120
+ resize: vertical;
1112
1121
  }
1113
1122
 
1114
- .pf-c-app-launcher__menu-item-icon > * {
1115
- max-width: 100%;
1116
- max-height: 100%;
1123
+ .pf-c-form-control.pf-m-resize-horizontal {
1124
+ resize: horizontal;
1117
1125
  }
1118
1126
 
1119
- .pf-c-app-launcher__menu-item-external-icon {
1120
- padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
1121
- margin-left: auto;
1122
- font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
1123
- color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
1124
- opacity: 0;
1125
- transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
1127
+ :where(.pf-theme-dark) .pf-c-form-control {
1128
+ --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
1129
+ --pf-c-form-control--BorderTopColor: transparent;
1130
+ --pf-c-form-control--BorderRightColor: transparent;
1131
+ --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
1132
+ --pf-c-form-control--BorderLeftColor: transparent;
1133
+ --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
1134
+ --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
1135
+ --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
1136
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
1137
+ color: var(--pf-global--Color--100);
1126
1138
  }
1127
1139
 
1128
- .pf-c-app-launcher__group + .pf-c-app-launcher__group {
1129
- padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
1140
+ :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
1141
+ filter: invert(1);
1130
1142
  }
1131
1143
 
1132
- .pf-c-app-launcher__group-title {
1133
- padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
1134
- padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
1135
- padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
1136
- padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
1137
- font-size: var(--pf-c-app-launcher__group-title--FontSize);
1138
- font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
1139
- color: var(--pf-c-app-launcher__group-title--Color);
1144
+ :where(.pf-theme-dark) .pf-c-form-control[readonly] {
1145
+ border-bottom-color: var(--pf-global--palette--black-700);
1140
1146
  }
1141
1147
 
1142
- :where(.pf-theme-dark) .pf-c-app-launcher {
1143
- --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
1144
- --pf-c-app-launcher__menu--Top: 100%;
1145
- --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
1146
- --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
1147
- --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
1148
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
1149
- --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
1148
+ :where(.pf-theme-dark) .pf-c-form-control:disabled {
1149
+ color: var(--pf-global--palette--black-100);
1150
1150
  }
1151
1151
 
1152
1152
  .pf-u-screen-reader {
@@ -8635,6 +8635,81 @@ label.pf-c-check, .pf-c-check__label,
8635
8635
  font-weight: var(--pf-global--FontWeight--semi-bold);
8636
8636
  }
8637
8637
 
8638
+ .pf-c-file-upload {
8639
+ --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
8640
+ --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
8641
+ --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
8642
+ --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
8643
+ --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
8644
+ --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
8645
+ --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
8646
+ --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
8647
+ --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
8648
+ --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
8649
+ --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
8650
+ position: relative;
8651
+ display: flex;
8652
+ flex-direction: column;
8653
+ }
8654
+
8655
+ .pf-c-file-upload.pf-m-drag-hover::before {
8656
+ position: absolute;
8657
+ top: 0;
8658
+ right: 0;
8659
+ bottom: 0;
8660
+ left: 0;
8661
+ z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
8662
+ content: "";
8663
+ border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
8664
+ }
8665
+
8666
+ .pf-c-file-upload.pf-m-drag-hover::after {
8667
+ position: absolute;
8668
+ top: 0;
8669
+ right: 0;
8670
+ bottom: 0;
8671
+ left: 0;
8672
+ content: "";
8673
+ background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
8674
+ opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
8675
+ }
8676
+
8677
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
8678
+ position: relative;
8679
+ }
8680
+
8681
+ .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
8682
+ position: absolute;
8683
+ top: 0;
8684
+ right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8685
+ bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8686
+ left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
8687
+ content: "";
8688
+ background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
8689
+ }
8690
+
8691
+ .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
8692
+ outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
8693
+ }
8694
+
8695
+ .pf-c-file-upload__file-details {
8696
+ position: relative;
8697
+ display: flex;
8698
+ }
8699
+
8700
+ .pf-c-file-upload__file-details .pf-c-form-control {
8701
+ flex: 1 1 auto;
8702
+ min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
8703
+ border-top: 0;
8704
+ }
8705
+
8706
+ .pf-c-file-upload__file-details-spinner {
8707
+ position: absolute;
8708
+ top: 50%;
8709
+ left: 50%;
8710
+ transform: translate(-50%, -50%);
8711
+ }
8712
+
8638
8713
  .pf-c-form {
8639
8714
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
8640
8715
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -9201,81 +9276,6 @@ label.pf-c-check, .pf-c-check__label,
9201
9276
  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9202
9277
  }
9203
9278
 
9204
- .pf-c-file-upload {
9205
- --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
9206
- --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
9207
- --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
9208
- --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
9209
- --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9210
- --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
9211
- --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
9212
- --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
9213
- --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
9214
- --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
9215
- --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9216
- position: relative;
9217
- display: flex;
9218
- flex-direction: column;
9219
- }
9220
-
9221
- .pf-c-file-upload.pf-m-drag-hover::before {
9222
- position: absolute;
9223
- top: 0;
9224
- right: 0;
9225
- bottom: 0;
9226
- left: 0;
9227
- z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
9228
- content: "";
9229
- border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
9230
- }
9231
-
9232
- .pf-c-file-upload.pf-m-drag-hover::after {
9233
- position: absolute;
9234
- top: 0;
9235
- right: 0;
9236
- bottom: 0;
9237
- left: 0;
9238
- content: "";
9239
- background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
9240
- opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
9241
- }
9242
-
9243
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
9244
- position: relative;
9245
- }
9246
-
9247
- .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
9248
- position: absolute;
9249
- top: 0;
9250
- right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9251
- bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9252
- left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
9253
- content: "";
9254
- background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
9255
- }
9256
-
9257
- .pf-c-file-upload__file-select .pf-c-button.pf-m-control {
9258
- outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
9259
- }
9260
-
9261
- .pf-c-file-upload__file-details {
9262
- position: relative;
9263
- display: flex;
9264
- }
9265
-
9266
- .pf-c-file-upload__file-details .pf-c-form-control {
9267
- flex: 1 1 auto;
9268
- min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
9269
- border-top: 0;
9270
- }
9271
-
9272
- .pf-c-file-upload__file-details-spinner {
9273
- position: absolute;
9274
- top: 50%;
9275
- left: 50%;
9276
- transform: translate(-50%, -50%);
9277
- }
9278
-
9279
9279
  .pf-c-helper-text {
9280
9280
  --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
9281
9281
  --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.250.5",
3
+ "version": "4.250.7",
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": "8cea2e5427953062a640877854086934b93ce1f7"
73
+ "gitHead": "9d771b71b4633c76781c56b212d79f8ef62e2b0b"
74
74
  }
@@ -2,7 +2,7 @@
2
2
  id: Empty state
3
3
  section: components
4
4
  cssPrefix: pf-c-empty-state
5
- propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateIcon', 'EmptyStateSecondaryActions']
5
+ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateIcon', 'EmptyStatePrimary','EmptyStateSecondaryActions']
6
6
  ---
7
7
  import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
8
8
  import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -40,5 +40,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
40
40
 
41
41
  ### No match found
42
42
 
43
+ `EmptyStatePrimary` is a container for primary actions. It can be used in lieu of using a primary button and will insure appropriate spacing of the buttons.
44
+
43
45
  ```ts file="EmptyStateNoMatchFound.tsx"
44
46
  ```
@@ -1,25 +1,159 @@
1
1
  import * as React from 'react';
2
2
  import { render, screen } from '@testing-library/react';
3
- import { Title, TitleSizes } from '..';
4
-
5
- describe('Title', () => {
6
- Object.values(TitleSizes).forEach(size => {
7
- test(`${size} Title`, () => {
8
- const { asFragment } = render(
9
- <Title size={size} headingLevel="h1">
10
- {size} Title
11
- </Title>
12
- );
13
- expect(asFragment()).toMatchSnapshot();
14
- });
15
- });
16
-
17
- test('Heading level can be set using a string value', () => {
18
- render(
19
- <Title size="lg" headingLevel="h3">
20
- H3 Heading
21
- </Title>
22
- );
23
- expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument();
24
- });
3
+ import { Title } from '../Title';
4
+
5
+ test('Renders without children', () => {
6
+ render(
7
+ <div data-testid="title">
8
+ <Title headingLevel="h1" />
9
+ </div>
10
+ );
11
+ expect(screen.getByTestId('title').firstChild).toBeVisible();
12
+ });
13
+
14
+ test('Renders children', () => {
15
+ render(<Title headingLevel="h1">Test</Title>);
16
+ expect(screen.getByText('Test')).toBeVisible();
17
+ });
18
+
19
+ test('Renders with the pf-c-title', () => {
20
+ render(<Title headingLevel="h1">Test</Title>);
21
+ expect(screen.getByRole('heading')).toHaveClass('pf-c-title');
22
+ });
23
+
24
+ test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
25
+ render(<Title headingLevel="h1">Test</Title>);
26
+ expect(screen.getByRole('heading')).toHaveClass('pf-c-title pf-m-2xl', { exact: true });
27
+ });
28
+
29
+ test('Renders with custom class name when className prop is passed', () => {
30
+ render(
31
+ <Title headingLevel="h1" className="test-class">
32
+ Test
33
+ </Title>
34
+ );
35
+ expect(screen.getByRole('heading')).toHaveClass('test-class');
36
+ });
37
+
38
+ test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
39
+ render(<Title headingLevel="h1">Test</Title>);
40
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
41
+ });
42
+
43
+ test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
44
+ render(<Title headingLevel="h2">Test</Title>);
45
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
46
+ });
47
+
48
+ test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
49
+ render(<Title headingLevel="h3">Test</Title>);
50
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
51
+ });
52
+
53
+ test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
54
+ render(<Title headingLevel="h4">Test</Title>);
55
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
56
+ });
57
+
58
+ test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
59
+ render(<Title headingLevel="h5">Test</Title>);
60
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
61
+ });
62
+
63
+ test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
64
+ render(<Title headingLevel="h6">Test</Title>);
65
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
66
+ });
67
+
68
+ test('Renders with class name pf-m-md when "md" is passed as title size', () => {
69
+ render(
70
+ <Title headingLevel="h1" size="md">
71
+ Test
72
+ </Title>
73
+ );
74
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
75
+ });
76
+
77
+ test('Renders with class name pf-m-lg when "lg" is passed as title size', () => {
78
+ render(
79
+ <Title headingLevel="h1" size="lg">
80
+ Test
81
+ </Title>
82
+ );
83
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
84
+ });
85
+
86
+ test('Renders with class name pf-m-xl when "xl" is passed as title size', () => {
87
+ render(
88
+ <Title headingLevel="h1" size="xl">
89
+ Test
90
+ </Title>
91
+ );
92
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
93
+ });
94
+
95
+ test('Renders with class name pf-m-2xl when "2xl" is passed as title size', () => {
96
+ render(
97
+ <Title headingLevel="h1" size="2xl">
98
+ Test
99
+ </Title>
100
+ );
101
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
102
+ });
103
+
104
+ test('Renders with class name pf-m-3xl when "3xl" is passed as title size', () => {
105
+ render(
106
+ <Title headingLevel="h1" size="3xl">
107
+ Test
108
+ </Title>
109
+ );
110
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-3xl');
111
+ });
112
+
113
+ test('Renders with class name pf-m-4xl when "4xl" is passed as title size', () => {
114
+ render(
115
+ <Title headingLevel="h1" size="4xl">
116
+ Test
117
+ </Title>
118
+ );
119
+ expect(screen.getByRole('heading')).toHaveClass('pf-m-4xl');
120
+ });
121
+
122
+ test('Renders with tag name "h1" when "h1" is passed as heading level', () => {
123
+ render(<Title headingLevel="h1">Test</Title>);
124
+ expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
125
+ });
126
+
127
+ test('Renders with tag name "h2" when "h2" is passed as heading level', () => {
128
+ render(<Title headingLevel="h2">Test</Title>);
129
+ expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
130
+ });
131
+
132
+ test('Renders with tag name "h3" when "h3" is passed as heading level', () => {
133
+ render(<Title headingLevel="h3">Test</Title>);
134
+ expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
135
+ });
136
+
137
+ test('Renders with tag name "h4" when "h4" is passed as heading level', () => {
138
+ render(<Title headingLevel="h4">Test</Title>);
139
+ expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
140
+ });
141
+
142
+ test('Renders with tag name "h5" when "h5" is passed as heading level', () => {
143
+ render(<Title headingLevel="h5">Test</Title>);
144
+ expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
145
+ });
146
+
147
+ test('Renders with tag name "h6" when "h6" is passed as heading level', () => {
148
+ render(<Title headingLevel="h6">Test</Title>);
149
+ expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
150
+ });
151
+
152
+ test('Matches the snapshot', () => {
153
+ const { asFragment } = render(
154
+ <Title data-ouia-component-id="ouia-id" headingLevel="h1">
155
+ Test
156
+ </Title>
157
+ );
158
+ expect(asFragment()).toMatchSnapshot();
25
159
  });
@@ -1,79 +1,14 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Title 2xl Title 1`] = `
3
+ exports[`Matches the snapshot 1`] = `
4
4
  <DocumentFragment>
5
5
  <h1
6
6
  class="pf-c-title pf-m-2xl"
7
- data-ouia-component-id="OUIA-Generated-Title-4"
7
+ data-ouia-component-id="ouia-id"
8
8
  data-ouia-component-type="PF4/Title"
9
9
  data-ouia-safe="true"
10
10
  >
11
- 2xl Title
11
+ Test
12
12
  </h1>
13
13
  </DocumentFragment>
14
- `;
15
-
16
- exports[`Title 3xl Title 1`] = `
17
- <DocumentFragment>
18
- <h1
19
- class="pf-c-title pf-m-3xl"
20
- data-ouia-component-id="OUIA-Generated-Title-5"
21
- data-ouia-component-type="PF4/Title"
22
- data-ouia-safe="true"
23
- >
24
- 3xl Title
25
- </h1>
26
- </DocumentFragment>
27
- `;
28
-
29
- exports[`Title 4xl Title 1`] = `
30
- <DocumentFragment>
31
- <h1
32
- class="pf-c-title pf-m-4xl"
33
- data-ouia-component-id="OUIA-Generated-Title-6"
34
- data-ouia-component-type="PF4/Title"
35
- data-ouia-safe="true"
36
- >
37
- 4xl Title
38
- </h1>
39
- </DocumentFragment>
40
- `;
41
-
42
- exports[`Title lg Title 1`] = `
43
- <DocumentFragment>
44
- <h1
45
- class="pf-c-title pf-m-lg"
46
- data-ouia-component-id="OUIA-Generated-Title-2"
47
- data-ouia-component-type="PF4/Title"
48
- data-ouia-safe="true"
49
- >
50
- lg Title
51
- </h1>
52
- </DocumentFragment>
53
- `;
54
-
55
- exports[`Title md Title 1`] = `
56
- <DocumentFragment>
57
- <h1
58
- class="pf-c-title pf-m-md"
59
- data-ouia-component-id="OUIA-Generated-Title-1"
60
- data-ouia-component-type="PF4/Title"
61
- data-ouia-safe="true"
62
- >
63
- md Title
64
- </h1>
65
- </DocumentFragment>
66
- `;
67
-
68
- exports[`Title xl Title 1`] = `
69
- <DocumentFragment>
70
- <h1
71
- class="pf-c-title pf-m-xl"
72
- data-ouia-component-id="OUIA-Generated-Title-3"
73
- data-ouia-component-type="PF4/Title"
74
- data-ouia-safe="true"
75
- >
76
- xl Title
77
- </h1>
78
- </DocumentFragment>
79
- `;
14
+ `;