@patternfly/patternfly 4.196.7 → 4.197.0

package/RELEASE-NOTES.md

@@ -1103,7 +1103,7 @@ Packages released:
 Packages released:
 - [@patternfly/patternfly@v4.10.31](https://www.npmjs.com/package/@patternfly/patternfly/v/4.10.31)
 
-This is our major release. Check out our [upgrade guide](/documentation/core/overview/upgrade-guide) for a list of breaking changes!
+This is our major release. Check out our [upgrade guide](/developer-resources/upgrade-guide/html) for a list of breaking changes!
 
 ## 2020.06 release notes (2020-05-12)
 Packages released:

package/components/Dropdown/dropdown.css

@@ -62,7 +62,8 @@
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -70,6 +71,18 @@
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -166,6 +179,7 @@
 }
 .pf-c-dropdown.pf-m-expanded {
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
 }
 
 .pf-c-dropdown__toggle {
@@ -367,6 +381,47 @@
   --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
   --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
 }
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
+  border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
+  border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
+  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
+  border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
+  border-right: 0;
+}
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
+  border: 0;
+}
 .pf-c-dropdown__toggle > .pf-c-badge {
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);

package/components/Dropdown/dropdown.scss

@@ -75,9 +75,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
 
   // Split button
-  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -88,6 +89,20 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
 
+  // Split button
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
+
   // Toggle Arrow
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -217,7 +232,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-expanded {
-    --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+    --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor); // update to --pf-c-dropdown__toggle--m-primary--m-split-button--child--before--BorderWidth at breaking change
+    --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
   }
 }
 
@@ -507,6 +523,64 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
+  &.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
+    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
+
+    &:hover {
+      --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
+    }
+
+    &:focus {
+      --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
+    }
+
+    &:active {
+      --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
+    }
+
+    > * {
+      &::before {
+        border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
+      }
+
+      &:hover {
+        --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
+      }
+
+      &:focus {
+        --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
+      }
+
+      &:active {
+        --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
+      }
+
+      &:first-child::before {
+        border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+        border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+      }
+
+      &:last-child::before {
+        border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+        border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+      }
+
+      &:not(:first-child)::before {
+        border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+      }
+
+      &:not(:last-child)::before {
+        border-right: 0;
+      }
+    }
+
+    &.pf-m-action {
+      &::before {
+        border: 0;
+      }
+    }
+  }
+
   > .pf-c-badge {
     --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
     --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);

package/components/Menu/menu.css

@@ -231,9 +231,6 @@
   --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
-.pf-c-menu .pf-c-menu__content {
-  overflow: visible hidden;
-}
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -268,7 +265,7 @@
 }
 .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
   flex-grow: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__content--Transition);
 }
 .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,

package/components/Menu/menu.scss

@@ -196,8 +196,6 @@
   box-shadow: var(--pf-c-menu--BoxShadow);
 
   .pf-c-menu__content {
-    overflow: visible hidden;
-
     & & {
       overflow: visible;
     }
@@ -243,7 +241,7 @@
 
     > .pf-c-menu__content {
       flex-grow: 1;
-      overflow-x: hidden;
+      overflow: hidden;
       transition: var(--pf-c-menu--m-drilldown__content--Transition);
     }
 

package/docs/components/Dropdown/examples/Dropdown.css

@@ -43,7 +43,8 @@
 #ws-core-c-dropdown-split-button-checkbox,
 #ws-core-c-dropdown-split-button-action,
 #ws-core-c-dropdown-split-button-primary-checkbox,
-#ws-core-c-dropdown-split-button-primary-action {
+#ws-core-c-dropdown-split-button-primary-action,
+#ws-core-c-dropdown-split-button-secondary-action {
   min-height: 210px;
 }
 

package/docs/components/Dropdown/examples/Dropdown.md

@@ -1296,6 +1296,171 @@ cssPrefix: pf-c-dropdown
 
 ```
 
+### Split button, secondary (action)
+
+```html
+<div class="pf-c-dropdown">
+  <div
+    class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
+  >
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-label="Dropdown toggle"
+    >Action</button>
+
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-expanded="false"
+      id="dropdown-split-button-action-secondary-toggle-button"
+      aria-label="Dropdown toggle"
+    >
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul class="pf-c-dropdown__menu" hidden>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
+    </li>
+  </ul>
+</div>
+<div class="pf-c-dropdown pf-m-expanded">
+  <div
+    class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
+  >
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-label="Dropdown toggle"
+    >Action</button>
+
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-expanded="true"
+      id="dropdown-split-button-action-secondary-expanded-toggle-button"
+      aria-label="Dropdown toggle"
+    >
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul class="pf-c-dropdown__menu">
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
+    </li>
+  </ul>
+</div>
+<div class="pf-c-dropdown">
+  <div
+    class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
+  >
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-label="Settings"
+    >
+      <i class="fas fa-cog" aria-hidden="true"></i>
+    </button>
+
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-expanded="false"
+      id="dropdown-split-button-action-secondary-icon-toggle-button"
+      aria-label="Dropdown toggle"
+    >
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul class="pf-c-dropdown__menu" hidden>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
+    </li>
+  </ul>
+</div>
+<div class="pf-c-dropdown pf-m-expanded">
+  <div
+    class="pf-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
+  >
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-label="Settings"
+    >
+      <i class="fas fa-cog" aria-hidden="true"></i>
+    </button>
+
+    <button
+      class="pf-c-dropdown__toggle-button"
+      type="button"
+      aria-expanded="true"
+      id="dropdown-split-button-action-secondary-icon-expanded-toggle-button"
+      aria-label="Dropdown toggle"
+    >
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul class="pf-c-dropdown__menu">
+    <li>
+      <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
+        <span class="pf-c-dropdown__menu-item-icon">
+          <i class="fas fa-cog" aria-hidden="true"></i>
+        </span>
+        Actions
+      </button>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item pf-m-icon" type="button" disabled>
+        <span class="pf-c-dropdown__menu-item-icon">
+          <i class="fas fa-bell" aria-hidden="true"></i>
+        </span>
+        Disabled action
+      </button>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item pf-m-icon" type="button">
+        <span class="pf-c-dropdown__menu-item-icon">
+          <i class="fas fa-cubes" aria-hidden="true"></i>
+        </span>
+        Other action
+      </button>
+    </li>
+  </ul>
+</div>
+
+```
+
 ### With groups
 
 ```html

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -148,9 +148,9 @@ cssPrefix: pf-c-notification-badge
 
 ### Overview
 
-Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](../masthead).
+Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
 
-Note: The [page component](../page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
+Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
 
 ### Accessibility