@patternfly/react-core 4.265.0 → 4.265.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.min.css +108 -108
  3. package/package.json +2 -2
  4. package/src/components/Tabs/examples/Tabs.md +21 -1557
  5. package/src/components/Tabs/examples/TabsBoxLight.tsx +63 -0
  6. package/src/components/Tabs/examples/TabsChildrenMounting.tsx +33 -0
  7. package/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx +58 -0
  8. package/src/components/Tabs/examples/TabsDefault.tsx +62 -0
  9. package/src/components/Tabs/examples/TabsDefaultOverflow.tsx +74 -0
  10. package/src/components/Tabs/examples/TabsFilled.tsx +51 -0
  11. package/src/components/Tabs/examples/TabsFilledWithIcons.tsx +85 -0
  12. package/src/components/Tabs/examples/TabsIconAndText.tsx +108 -0
  13. package/src/components/Tabs/examples/TabsInset.tsx +65 -0
  14. package/src/components/Tabs/examples/TabsNav.tsx +40 -0
  15. package/src/components/Tabs/examples/TabsNavSecondary.tsx +76 -0
  16. package/src/components/Tabs/examples/TabsPageInsets.tsx +60 -0
  17. package/src/components/Tabs/examples/TabsSeparateContent.tsx +75 -0
  18. package/src/components/Tabs/examples/TabsSubtabs.tsx +115 -0
  19. package/src/components/Tabs/examples/TabsToggledSeparateContent.tsx +67 -0
  20. package/src/components/Tabs/examples/TabsTooltipReactRef.tsx +72 -0
  21. package/src/components/Tabs/examples/TabsUncontrolled.tsx +33 -0
  22. package/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx +33 -0
  23. package/src/components/Tabs/examples/TabsVertical.tsx +72 -0
  24. package/src/components/Tabs/examples/TabsVerticalExpandable.tsx +51 -0
  25. package/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx +48 -0
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.265.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.265.0...@patternfly/react-core@4.265.1) (2022-12-05)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  # 4.265.0 (2022-12-01)
7
15
 
8
16
 
@@ -19837,6 +19837,45 @@ svg.pf-c-spinner.pf-m-xl {
19837
19837
  --pf-c-switch__toggle--before--BoxShadow: none;
19838
19838
  }
19839
19839
 
19840
+ .pf-c-tab-content {
19841
+ --pf-c-tab-content__body--PaddingTop: 0;
19842
+ --pf-c-tab-content__body--PaddingRight: 0;
19843
+ --pf-c-tab-content__body--PaddingBottom: 0;
19844
+ --pf-c-tab-content__body--PaddingLeft: 0;
19845
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
19846
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
19847
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
19848
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
19849
+ --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
19850
+ --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
19851
+ --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
19852
+ --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
19853
+ --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
19854
+ }
19855
+
19856
+ @media screen and (min-width: 1200px) {
19857
+ .pf-c-tab-content {
19858
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
19859
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
19860
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
19861
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
19862
+ }
19863
+ }
19864
+ .pf-c-tab-content.pf-m-light-300 {
19865
+ background-color: var(--pf-c-tab-content--m-light-300);
19866
+ }
19867
+
19868
+ .pf-c-tab-content__body {
19869
+ padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
19870
+ }
19871
+
19872
+ .pf-c-tab-content__body.pf-m-padding {
19873
+ --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
19874
+ --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
19875
+ --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
19876
+ --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
19877
+ }
19878
+
19840
19879
  .pf-c-tabs {
19841
19880
  --pf-c-tabs--inset: 0;
19842
19881
  --pf-c-tabs--Width: auto;
@@ -20819,45 +20858,6 @@ svg.pf-c-spinner.pf-m-xl {
20819
20858
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
20820
20859
  }
20821
20860
 
20822
- .pf-c-tab-content {
20823
- --pf-c-tab-content__body--PaddingTop: 0;
20824
- --pf-c-tab-content__body--PaddingRight: 0;
20825
- --pf-c-tab-content__body--PaddingBottom: 0;
20826
- --pf-c-tab-content__body--PaddingLeft: 0;
20827
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
20828
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
20829
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
20830
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
20831
- --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
20832
- --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
20833
- --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
20834
- --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
20835
- --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
20836
- }
20837
-
20838
- @media screen and (min-width: 1200px) {
20839
- .pf-c-tab-content {
20840
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
20841
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
20842
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
20843
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
20844
- }
20845
- }
20846
- .pf-c-tab-content.pf-m-light-300 {
20847
- background-color: var(--pf-c-tab-content--m-light-300);
20848
- }
20849
-
20850
- .pf-c-tab-content__body {
20851
- padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
20852
- }
20853
-
20854
- .pf-c-tab-content__body.pf-m-padding {
20855
- --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
20856
- --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
20857
- --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
20858
- --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
20859
- }
20860
-
20861
20861
  .pf-c-content {
20862
20862
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
20863
20863
  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
@@ -26573,75 +26573,6 @@ label.pf-c-tree-view__node-text {
26573
26573
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26574
26574
  }
26575
26575
  }
26576
- .pf-l-gallery {
26577
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26578
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26579
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26580
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26581
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26582
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26583
- --pf-l-gallery--GridTemplateRows: auto;
26584
- display: grid;
26585
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26586
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26587
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26588
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26589
- }
26590
-
26591
- .pf-l-gallery.pf-m-gutter {
26592
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26593
- }
26594
-
26595
- @media (min-width: 576px) {
26596
- .pf-l-gallery {
26597
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26598
- }
26599
- }
26600
- @media (min-width: 768px) {
26601
- .pf-l-gallery {
26602
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26603
- }
26604
- }
26605
- @media (min-width: 992px) {
26606
- .pf-l-gallery {
26607
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26608
- }
26609
- }
26610
- @media (min-width: 1200px) {
26611
- .pf-l-gallery {
26612
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26613
- }
26614
- }
26615
- @media (min-width: 1450px) {
26616
- .pf-l-gallery {
26617
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26618
- }
26619
- }
26620
- @media (min-width: 576px) {
26621
- .pf-l-gallery {
26622
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26623
- }
26624
- }
26625
- @media (min-width: 768px) {
26626
- .pf-l-gallery {
26627
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26628
- }
26629
- }
26630
- @media (min-width: 992px) {
26631
- .pf-l-gallery {
26632
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26633
- }
26634
- }
26635
- @media (min-width: 1200px) {
26636
- .pf-l-gallery {
26637
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26638
- }
26639
- }
26640
- @media (min-width: 1450px) {
26641
- .pf-l-gallery {
26642
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26643
- }
26644
- }
26645
26576
  .pf-l-grid {
26646
26577
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26647
26578
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27856,6 +27787,75 @@ label.pf-c-tree-view__node-text {
27856
27787
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27857
27788
  }
27858
27789
 
27790
+ .pf-l-gallery {
27791
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27792
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
27793
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27794
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
27795
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27796
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27797
+ --pf-l-gallery--GridTemplateRows: auto;
27798
+ display: grid;
27799
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27800
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27801
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27802
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27803
+ }
27804
+
27805
+ .pf-l-gallery.pf-m-gutter {
27806
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27807
+ }
27808
+
27809
+ @media (min-width: 576px) {
27810
+ .pf-l-gallery {
27811
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27812
+ }
27813
+ }
27814
+ @media (min-width: 768px) {
27815
+ .pf-l-gallery {
27816
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27817
+ }
27818
+ }
27819
+ @media (min-width: 992px) {
27820
+ .pf-l-gallery {
27821
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27822
+ }
27823
+ }
27824
+ @media (min-width: 1200px) {
27825
+ .pf-l-gallery {
27826
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27827
+ }
27828
+ }
27829
+ @media (min-width: 1450px) {
27830
+ .pf-l-gallery {
27831
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27832
+ }
27833
+ }
27834
+ @media (min-width: 576px) {
27835
+ .pf-l-gallery {
27836
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27837
+ }
27838
+ }
27839
+ @media (min-width: 768px) {
27840
+ .pf-l-gallery {
27841
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27842
+ }
27843
+ }
27844
+ @media (min-width: 992px) {
27845
+ .pf-l-gallery {
27846
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27847
+ }
27848
+ }
27849
+ @media (min-width: 1200px) {
27850
+ .pf-l-gallery {
27851
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27852
+ }
27853
+ }
27854
+ @media (min-width: 1450px) {
27855
+ .pf-l-gallery {
27856
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27857
+ }
27858
+ }
27859
27859
  .pf-l-level {
27860
27860
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27861
27861
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.265.0",
3
+ "version": "4.265.1",
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",
@@ -77,5 +77,5 @@
77
77
  "react": "^16.8 || ^17 || ^18",
78
78
  "react-dom": "^16.8 || ^17 || ^18"
79
79
  },
80
- "gitHead": "47c6127c70191349261aec122b56e6ca61fa0c99"
80
+ "gitHead": "48ab4d42a8037f77aa57bdfa3211745d4d873f34"
81
81
  }