@patternfly/patternfly 6.1.0-prerelease.7 → 6.1.0-prerelease.8

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 (9) hide show
  1. package/components/Menu/menu.css +7 -3
  2. package/components/Menu/menu.scss +5 -3
  3. package/components/_index.css +7 -3
  4. package/docs/components/Menu/examples/Menu.md +24 -32
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +7 -3
  7. package/patternfly.css +7 -3
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -68,7 +68,6 @@
68
68
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
69
69
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
70
70
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
71
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
72
71
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
73
72
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
74
73
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -554,8 +553,13 @@
554
553
  .pf-v6-c-menu__item-action.pf-m-favorited,
555
554
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
556
555
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
557
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
558
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
556
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
557
+ }
558
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
559
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
560
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
561
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
562
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
559
563
  }
560
564
 
561
565
  .pf-v6-c-menu__breadcrumb {
package/components/Menu/menu.scss CHANGED
@@ -101,7 +101,6 @@
101
101
  // * Menu action
102
102
  --#{$menu}__item-action--FontSize: var(--pf-t--global--font--size--body--default);
103
103
  --#{$menu}__item-action--icon--size: var(--#{$menu}__item-action--FontSize, var(--pf-t--global--icon--size--md));
104
- --#{$menu}__item-action--Color: var(--pf-t--global--icon--color--subtle);
105
104
  --#{$menu}__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
106
105
  --#{$menu}__item-action--button--MinWidth: calc(var(--#{$menu}__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
107
106
 
@@ -613,8 +612,11 @@
613
612
  &.pf-m-favorited,
614
613
  &.pf-m-favorited:hover,
615
614
  &.pf-m-favorited .#{$button} {
616
- --#{$button}--Color: var(--#{$menu}__item-action--m-favorited--Color);
617
- --#{$menu}__item-action--Color: var(--#{$menu}__item-action--m-favorited--Color);
615
+ --#{$button}--m-plain__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
616
+
617
+ &:is(:hover, :focus) {
618
+ --#{$button}--hover__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
619
+ }
618
620
  }
619
621
  }
620
622
 
package/components/_index.css CHANGED
@@ -9431,7 +9431,6 @@ ul.pf-v6-c-list {
9431
9431
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
9432
9432
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
9433
9433
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
9434
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
9435
9434
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
9436
9435
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
9437
9436
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -9917,8 +9916,13 @@ ul.pf-v6-c-list {
9917
9916
  .pf-v6-c-menu__item-action.pf-m-favorited,
9918
9917
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
9919
9918
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
9920
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9921
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9919
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9920
+ }
9921
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
9922
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
9923
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
9924
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
9925
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9922
9926
  }
9923
9927
 
9924
9928
  .pf-v6-c-menu__breadcrumb {
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -5640,37 +5640,17 @@ cssPrefix: pf-v6-c-menu
5640
5640
  </span>
5641
5641
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5642
5642
  </a>
5643
- <div class="pf-v6-c-menu__item-action pf-m-favorited pf-m-favorite">
5643
+ <div class="pf-v6-c-menu__item-action pf-m-favorited">
5644
5644
  <button
5645
5645
  class="pf-v6-c-button pf-m-plain"
5646
5646
  type="button"
5647
5647
  role="menuitem"
5648
5648
  aria-label="Starred"
5649
- ></button>
5650
- </div>
5651
- </li>
5652
- <li class="pf-v6-c-menu__list-item" role="none">
5653
- <a
5654
- class="pf-v6-c-menu__item"
5655
- href="#"
5656
- role="menuitem"
5657
- target="_blank"
5658
- >
5659
- <span class="pf-v6-c-menu__item-main">
5660
- <span class="pf-v6-c-menu__item-text">Item 3</span>
5661
- <span class="pf-v6-c-menu__item-external-icon">
5662
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
5649
+ >
5650
+ <span class="pf-v6-c-button__icon">
5651
+ <i class="fas fa-star" aria-hidden="true"></i>
5663
5652
  </span>
5664
- <span class="pf-v6-screen-reader">(opens new window)</span>
5665
- </span>
5666
- </a>
5667
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5668
- <button
5669
- class="pf-v6-c-button pf-m-plain"
5670
- type="button"
5671
- role="menuitem"
5672
- aria-label="Not starred"
5673
- ></button>
5653
+ </button>
5674
5654
  </div>
5675
5655
  </li>
5676
5656
  </ul>
@@ -5686,13 +5666,17 @@ cssPrefix: pf-v6-c-menu
5686
5666
  </span>
5687
5667
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5688
5668
  </a>
5689
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5669
+ <div class="pf-v6-c-menu__item-action pf-m-favorited">
5690
5670
  <button
5691
5671
  class="pf-v6-c-button pf-m-plain"
5692
5672
  type="button"
5693
5673
  role="menuitem"
5694
- aria-label="Not starred"
5695
- ></button>
5674
+ aria-label="Starred"
5675
+ >
5676
+ <span class="pf-v6-c-button__icon">
5677
+ <i class="fas fa-star" aria-hidden="true"></i>
5678
+ </span>
5679
+ </button>
5696
5680
  </div>
5697
5681
  </li>
5698
5682
  <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
@@ -5713,14 +5697,18 @@ cssPrefix: pf-v6-c-menu
5713
5697
  </span>
5714
5698
  <span class="pf-v6-c-menu__item-description">This is a description</span>
5715
5699
  </a>
5716
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5700
+ <div class="pf-v6-c-menu__item-action">
5717
5701
  <button
5718
5702
  class="pf-v6-c-button pf-m-plain"
5719
5703
  type="button"
5720
5704
  role="menuitem"
5721
5705
  aria-label="Not starred"
5722
5706
  disabled
5723
- ></button>
5707
+ >
5708
+ <span class="pf-v6-c-button__icon">
5709
+ <i class="fas fa-star" aria-hidden="true"></i>
5710
+ </span>
5711
+ </button>
5724
5712
  </div>
5725
5713
  </li>
5726
5714
  <li class="pf-v6-c-menu__list-item" role="none">
@@ -5738,13 +5726,17 @@ cssPrefix: pf-v6-c-menu
5738
5726
  <span class="pf-v6-screen-reader">(opens new window)</span>
5739
5727
  </span>
5740
5728
  </a>
5741
- <div class="pf-v6-c-menu__item-action pf-m-favorite">
5729
+ <div class="pf-v6-c-menu__item-action">
5742
5730
  <button
5743
5731
  class="pf-v6-c-button pf-m-plain"
5744
5732
  type="button"
5745
5733
  role="menuitem"
5746
5734
  aria-label="Not starred"
5747
- ></button>
5735
+ >
5736
+ <span class="pf-v6-c-button__icon">
5737
+ <i class="fas fa-star" aria-hidden="true"></i>
5738
+ </span>
5739
+ </button>
5748
5740
  </div>
5749
5741
  </li>
5750
5742
  </ul>
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": "6.1.0-prerelease.7",
4
+ "version": "6.1.0-prerelease.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -16893,7 +16893,6 @@ ul.pf-v6-c-list {
16893
16893
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
16894
16894
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
16895
16895
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
16896
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
16897
16896
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
16898
16897
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
16899
16898
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -17379,8 +17378,13 @@ ul.pf-v6-c-list {
17379
17378
  .pf-v6-c-menu__item-action.pf-m-favorited,
17380
17379
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
17381
17380
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
17382
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17383
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17381
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17382
+ }
17383
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
17384
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
17385
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
17386
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17387
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17384
17388
  }
17385
17389
 
17386
17390
  .pf-v6-c-menu__breadcrumb {
package/patternfly.css CHANGED
@@ -17029,7 +17029,6 @@ ul.pf-v6-c-list {
17029
17029
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
17030
17030
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
17031
17031
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
17032
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
17033
17032
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
17034
17033
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
17035
17034
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -17515,8 +17514,13 @@ ul.pf-v6-c-list {
17515
17514
  .pf-v6-c-menu__item-action.pf-m-favorited,
17516
17515
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
17517
17516
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
17518
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17519
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17517
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17518
+ }
17519
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
17520
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
17521
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
17522
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17523
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
17520
17524
  }
17521
17525
 
17522
17526
  .pf-v6-c-menu__breadcrumb {