@patternfly/patternfly 4.140.0 → 4.141.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/Menu/menu.css +32 -1
  2. package/components/Menu/menu.scss +39 -1
  3. package/docs/components/Menu/examples/Menu.md +548 -67
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +32 -1
  6. package/patternfly.css +32 -1
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.140.0",
4
+ "version": "4.141.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -15525,10 +15525,13 @@ ul.pf-c-list {
15525
15525
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
15526
15526
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
15527
15527
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
15528
+ --pf-c-menu--m-plain--BoxShadow: none;
15528
15529
  --pf-c-menu--m-flyout__menu--top-offset: 0px;
15529
15530
  --pf-c-menu--m-flyout__menu--left-offset: 0px;
15530
15531
  --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
15531
15532
  --pf-c-menu__content--Height: auto;
15533
+ --pf-c-menu__content--MaxHeight: none;
15534
+ --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
15532
15535
  --pf-c-menu--c-divider--MarginTop: 0;
15533
15536
  --pf-c-menu--c-divider--MarginBottom: 0;
15534
15537
  --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
@@ -15624,7 +15627,14 @@ ul.pf-c-list {
15624
15627
  --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
15625
15628
  --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
15626
15629
  --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
15627
- --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15630
+ --pf-c-menu__footer--BoxShadow: none;
15631
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
15632
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
15633
+ --pf-c-menu__footer--after--BorderBottomWidth: 0;
15634
+ --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
15635
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15636
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15637
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15628
15638
  z-index: var(--pf-c-menu--ZIndex);
15629
15639
  width: var(--pf-c-menu--Width);
15630
15640
  background-color: var(--pf-c-menu--BackgroundColor);
@@ -15720,6 +15730,15 @@ ul.pf-c-list {
15720
15730
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
15721
15731
  display: none;
15722
15732
  }
15733
+ .pf-c-menu.pf-m-plain {
15734
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
15735
+ }
15736
+ .pf-c-menu.pf-m-scrollable {
15737
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
15738
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
15739
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
15740
+ --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
15741
+ }
15723
15742
 
15724
15743
  .pf-c-menu__breadcrumb {
15725
15744
  display: flex;
@@ -15934,9 +15953,21 @@ ul.pf-c-list {
15934
15953
  }
15935
15954
 
15936
15955
  .pf-c-menu__footer {
15956
+ position: relative;
15937
15957
  padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
15938
15958
  box-shadow: var(--pf-c-menu__footer--BoxShadow);
15939
15959
  }
15960
+ .pf-c-menu__footer::after {
15961
+ position: absolute;
15962
+ top: 0;
15963
+ right: 0;
15964
+ bottom: 0;
15965
+ left: 0;
15966
+ pointer-events: none;
15967
+ content: "";
15968
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
15969
+ border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
15970
+ }
15940
15971
 
15941
15972
  .pf-c-menu-toggle {
15942
15973
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
package/patternfly.css CHANGED
@@ -15661,10 +15661,13 @@ ul.pf-c-list {
15661
15661
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
15662
15662
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
15663
15663
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
15664
+ --pf-c-menu--m-plain--BoxShadow: none;
15664
15665
  --pf-c-menu--m-flyout__menu--top-offset: 0px;
15665
15666
  --pf-c-menu--m-flyout__menu--left-offset: 0px;
15666
15667
  --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
15667
15668
  --pf-c-menu__content--Height: auto;
15669
+ --pf-c-menu__content--MaxHeight: none;
15670
+ --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
15668
15671
  --pf-c-menu--c-divider--MarginTop: 0;
15669
15672
  --pf-c-menu--c-divider--MarginBottom: 0;
15670
15673
  --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
@@ -15760,7 +15763,14 @@ ul.pf-c-list {
15760
15763
  --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
15761
15764
  --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
15762
15765
  --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
15763
- --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15766
+ --pf-c-menu__footer--BoxShadow: none;
15767
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
15768
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
15769
+ --pf-c-menu__footer--after--BorderBottomWidth: 0;
15770
+ --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
15771
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
15772
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
15773
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15764
15774
  z-index: var(--pf-c-menu--ZIndex);
15765
15775
  width: var(--pf-c-menu--Width);
15766
15776
  background-color: var(--pf-c-menu--BackgroundColor);
@@ -15856,6 +15866,15 @@ ul.pf-c-list {
15856
15866
  .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
15857
15867
  display: none;
15858
15868
  }
15869
+ .pf-c-menu.pf-m-plain {
15870
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
15871
+ }
15872
+ .pf-c-menu.pf-m-scrollable {
15873
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
15874
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
15875
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
15876
+ --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
15877
+ }
15859
15878
 
15860
15879
  .pf-c-menu__breadcrumb {
15861
15880
  display: flex;
@@ -16070,9 +16089,21 @@ ul.pf-c-list {
16070
16089
  }
16071
16090
 
16072
16091
  .pf-c-menu__footer {
16092
+ position: relative;
16073
16093
  padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
16074
16094
  box-shadow: var(--pf-c-menu__footer--BoxShadow);
16075
16095
  }
16096
+ .pf-c-menu__footer::after {
16097
+ position: absolute;
16098
+ top: 0;
16099
+ right: 0;
16100
+ bottom: 0;
16101
+ left: 0;
16102
+ pointer-events: none;
16103
+ content: "";
16104
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
16105
+ border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
16106
+ }
16076
16107
 
16077
16108
  .pf-c-menu-toggle {
16078
16109
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);