@patternfly/react-core 4.258.3 → 4.258.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.258.5 (2022-11-04)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.258.4 (2022-11-01)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## [4.258.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.258.2...@patternfly/react-core@4.258.3) (2022-10-27)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/esm/components/Button/__mocks__/Button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from '../';
+export declare const Button: ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => JSX.Element;
+export declare const ButtonVariant: {
+    plain: string;
+    link: string;
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/Button/__mocks__/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM,2EAA4E,WAAW,gBAWzG,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAAmC,CAAC"}

package/dist/esm/components/Button/__mocks__/Button.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import React from 'react';
+export const Button = (_a) => {
+    var { children, variant, isInline, onClick, iconPosition, icon } = _a, props = __rest(_a, ["children", "variant", "isInline", "onClick", "iconPosition", "icon"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", Object.assign({ onClick: onClick }, props), children),
+        React.createElement("p", null, `variant: ${variant}`),
+        React.createElement("p", { id: "labelling-id" }, "Test label"),
+        React.createElement("p", null, `isInline: ${isInline}`),
+        React.createElement("p", null, `iconPosition: ${iconPosition}`),
+        React.createElement("div", { "data-testid": "icon" }, icon)));
+};
+export const ButtonVariant = { plain: 'plain', link: 'link' };
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/Button/__mocks__/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAmF,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,OAAyB,EAApB,KAAK,cAApE,sEAAsE,CAAF;IAAoB,OAAA,CAC7G;QACE,8CAAQ,OAAO,EAAE,OAAO,IAAM,KAAK,GAChC,QAAQ,CACF;QACT,+BAAI,YAAY,OAAO,EAAE,CAAK;QAC9B,2BAAG,EAAE,EAAC,cAAc,iBAAe;QACnC,+BAAI,aAAa,QAAQ,EAAE,CAAK;QAChC,+BAAI,iBAAiB,YAAY,EAAE,CAAK;QACxC,4CAAiB,MAAM,IAAE,IAAI,CAAO,CACnC,CACJ,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}

package/dist/esm/components/Button/__mocks__/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Button/__mocks__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/esm/components/Button/__mocks__/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Button/__mocks__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/js/components/Button/__mocks__/Button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from '../';
+export declare const Button: ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => JSX.Element;
+export declare const ButtonVariant: {
+    plain: string;
+    link: string;
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/js/components/Button/__mocks__/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM,2EAA4E,WAAW,gBAWzG,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAAmC,CAAC"}

package/dist/js/components/Button/__mocks__/Button.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonVariant = exports.Button = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Button = (_a) => {
+    var { children, variant, isInline, onClick, iconPosition, icon } = _a, props = tslib_1.__rest(_a, ["children", "variant", "isInline", "onClick", "iconPosition", "icon"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", Object.assign({ onClick: onClick }, props), children),
+        react_1.default.createElement("p", null, `variant: ${variant}`),
+        react_1.default.createElement("p", { id: "labelling-id" }, "Test label"),
+        react_1.default.createElement("p", null, `isInline: ${isInline}`),
+        react_1.default.createElement("p", null, `iconPosition: ${iconPosition}`),
+        react_1.default.createElement("div", { "data-testid": "icon" }, icon)));
+};
+exports.Button = Button;
+exports.ButtonVariant = { plain: 'plain', link: 'link' };
+//# sourceMappingURL=Button.js.map

package/dist/js/components/Button/__mocks__/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAGnB,MAAM,MAAM,GAAG,CAAC,EAAmF,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,OAAyB,EAApB,KAAK,sBAApE,sEAAsE,CAAF;IAAoB,OAAA,CAC7G;QACE,wDAAQ,OAAO,EAAE,OAAO,IAAM,KAAK,GAChC,QAAQ,CACF;QACT,yCAAI,YAAY,OAAO,EAAE,CAAK;QAC9B,qCAAG,EAAE,EAAC,cAAc,iBAAe;QACnC,yCAAI,aAAa,QAAQ,EAAE,CAAK;QAChC,yCAAI,iBAAiB,YAAY,EAAE,CAAK;QACxC,sDAAiB,MAAM,IAAE,IAAI,CAAO,CACnC,CACJ,CAAA;CAAA,CAAC;AAXW,QAAA,MAAM,UAWjB;AAEW,QAAA,aAAa,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}

package/dist/js/components/Button/__mocks__/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/components/Button/__mocks__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/js/components/Button/__mocks__/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Button"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/components/Button/__mocks__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB"}

package/dist/umd/react-core.min.css

@@ -529,6 +529,256 @@
   --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
 }
 
+.pf-c-app-launcher {
+  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
+  --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-app-launcher--m-top__menu--Top: 0;
+  --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+  --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
+  --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
+  --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-app-launcher__menu-item--Width: 100%;
+  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+  --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
+  --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__menu-item--m-action--Width: auto;
+  --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
+  --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
+  --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
+  --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
+  --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
+  --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
+  --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
+  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
+  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
+  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
+  color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
+}
+
+.pf-c-app-launcher .pf-c-divider {
+  margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
+}
+
+.pf-c-app-launcher .pf-c-divider:last-child {
+  --pf-c-app-launcher--c-divider--MarginBottom: 0;
+}
+
+.pf-c-app-launcher__toggle {
+  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);
+  color: var(--pf-c-app-launcher__toggle--Color);
+  border: none;
+}
+
+.pf-c-app-launcher__toggle:hover {
+  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
+}
+
+.pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
+  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
+}
+
+.pf-c-app-launcher__toggle:focus {
+  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
+}
+
+.pf-c-app-launcher__toggle:disabled {
+  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
+  pointer-events: none;
+}
+
+.pf-c-app-launcher__menu {
+  position: absolute;
+  top: var(--pf-c-app-launcher__menu--Top);
+  z-index: var(--pf-c-app-launcher__menu--ZIndex);
+  min-width: 100%;
+  padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
+  padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
+  background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
+  background-clip: padding-box;
+  box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
+}
+
+.pf-c-app-launcher__menu.pf-m-align-right {
+  right: 0;
+}
+
+.pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
+  --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
+  transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
+}
+
+.pf-c-app-launcher__menu.pf-m-static {
+  --pf-c-app-launcher--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
+
+.pf-c-app-launcher__menu-search {
+  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);
+  margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
+  border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
+}
+
+.pf-c-app-launcher__menu-wrapper {
+  display: flex;
+}
+
+.pf-c-app-launcher__menu-wrapper.pf-m-favorite {
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
+  --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);
+}
+
+.pf-c-app-launcher__menu-item {
+  display: flex;
+  align-items: center;
+  width: var(--pf-c-app-launcher__menu-item--Width);
+  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);
+  font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
+  color: var(--pf-c-app-launcher__menu-item--Color);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
+  text-decoration: none;
+}
+
+.pf-c-app-launcher__menu-wrapper:hover,
+.pf-c-app-launcher__menu-wrapper:focus-within,
+.pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
+  background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
+}
+
+.pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
+  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
+  pointer-events: none;
+}
+
+.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 {
+  background-color: transparent;
+}
+
+.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 {
+  opacity: 1;
+}
+
+.pf-c-app-launcher__menu-item.pf-m-link {
+  --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
+}
+
+.pf-c-app-launcher__menu-item.pf-m-action {
+  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
+  --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
+  font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
+}
+
+.pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
+}
+
+.pf-c-app-launcher__menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pf-c-app-launcher__menu-item-icon--Width);
+  height: var(--pf-c-app-launcher__menu-item-icon--Height);
+  margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
+}
+
+.pf-c-app-launcher__menu-item-icon > * {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.pf-c-app-launcher__menu-item-external-icon {
+  padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
+  margin-left: auto;
+  font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
+  color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
+  opacity: 0;
+  transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
+}
+
+.pf-c-app-launcher__group + .pf-c-app-launcher__group {
+  padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
+}
+
+.pf-c-app-launcher__group-title {
+  padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
+  padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
+  padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
+  padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
+  font-size: var(--pf-c-app-launcher__group-title--FontSize);
+  font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
+  color: var(--pf-c-app-launcher__group-title--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-app-launcher {
+  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-app-launcher__menu--Top: 100%;
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
+}
+
 .pf-c-form-control {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1311,256 +1561,6 @@ textarea.pf-c-form-control {
     --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
   }
 }
-.pf-c-app-launcher {
-  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-app-launcher__menu--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu--Top: calc(100% + var(--pf-global--spacer--xs));
-  --pf-c-app-launcher__menu--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-app-launcher--m-top__menu--Top: 0;
-  --pf-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
-  --pf-c-app-launcher__toggle--PaddingTop: var(--pf-global--spacer--form-element);
-  --pf-c-app-launcher__toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
-  --pf-c-app-launcher__toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__toggle--Color: var(--pf-global--Color--200);
-  --pf-c-app-launcher__toggle--hover--Color: var(--pf-global--Color--100);
-  --pf-c-app-launcher__toggle--active--Color: var(--pf-global--Color--100);
-  --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
-  --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
-  --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
-  --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-search--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-search--BottomBorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-app-launcher__menu-search--BottomBorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-app-launcher__menu-search--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu-item--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu-item--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-item--Color: var(--pf-global--Color--dark-100);
-  --pf-c-app-launcher__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-app-launcher__menu-item--Width: 100%;
-  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
-  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-app-launcher__menu-item--m-link--PaddingRight: 0;
-  --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
-  --pf-c-app-launcher__menu-item--m-action--Width: auto;
-  --pf-c-app-launcher__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
-  --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200);
-  --pf-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-global--Color--100);
-  --pf-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200);
-  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-400);
-  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-500);
-  --pf-c-app-launcher__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
-  --pf-c-app-launcher__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);
-  --pf-c-app-launcher__menu-item-external-icon--Color: var(--pf-global--link--Color);
-  --pf-c-app-launcher__menu-item-external-icon--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
-  --pf-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-app-launcher__group--group--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__group-title--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
-  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
-  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
-  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-}
-
-.pf-c-app-launcher.pf-m-expanded > .pf-c-app-launcher__toggle {
-  color: var(--pf-c-app-launcher__toggle--m-expanded--Color);
-}
-
-.pf-c-app-launcher .pf-c-divider {
-  margin-top: var(--pf-c-app-launcher--c-divider--MarginTop);
-  margin-bottom: var(--pf-c-app-launcher--c-divider--MarginBottom);
-}
-
-.pf-c-app-launcher .pf-c-divider:last-child {
-  --pf-c-app-launcher--c-divider--MarginBottom: 0;
-}
-
-.pf-c-app-launcher__toggle {
-  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);
-  color: var(--pf-c-app-launcher__toggle--Color);
-  border: none;
-}
-
-.pf-c-app-launcher__toggle:hover {
-  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--hover--Color);
-}
-
-.pf-c-app-launcher__toggle:active, .pf-c-app-launcher__toggle.pf-m-active {
-  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--active--Color);
-}
-
-.pf-c-app-launcher__toggle:focus {
-  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--focus--Color);
-}
-
-.pf-c-app-launcher__toggle:disabled {
-  --pf-c-app-launcher__toggle--Color: var(--pf-c-app-launcher__toggle--disabled--Color);
-  pointer-events: none;
-}
-
-.pf-c-app-launcher__menu {
-  position: absolute;
-  top: var(--pf-c-app-launcher__menu--Top);
-  z-index: var(--pf-c-app-launcher__menu--ZIndex);
-  min-width: 100%;
-  padding-top: var(--pf-c-app-launcher__menu--PaddingTop);
-  padding-bottom: var(--pf-c-app-launcher__menu--PaddingBottom);
-  background-color: var(--pf-c-app-launcher__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--pf-c-app-launcher__menu--BoxShadow);
-}
-
-.pf-c-app-launcher__menu.pf-m-align-right {
-  right: 0;
-}
-
-.pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu {
-  --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
-  transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
-}
-
-.pf-c-app-launcher__menu.pf-m-static {
-  --pf-c-app-launcher--m-top__menu--TranslateY: 0;
-  position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-  z-index: auto;
-  min-width: min-content;
-}
-
-.pf-c-app-launcher__menu-search {
-  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);
-  margin-bottom: var(--pf-c-app-launcher__menu-search--MarginBottom);
-  border-bottom: var(--pf-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-c-app-launcher__menu-search--BottomBorderColor);
-}
-
-.pf-c-app-launcher__menu-wrapper {
-  display: flex;
-}
-
-.pf-c-app-launcher__menu-wrapper.pf-m-favorite {
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
-  --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);
-}
-
-.pf-c-app-launcher__menu-item {
-  display: flex;
-  align-items: center;
-  width: var(--pf-c-app-launcher__menu-item--Width);
-  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);
-  font-weight: var(--pf-c-app-launcher__menu-item--FontWeight);
-  color: var(--pf-c-app-launcher__menu-item--Color);
-  white-space: nowrap;
-  border: 0;
-}
-
-.pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
-  text-decoration: none;
-}
-
-.pf-c-app-launcher__menu-wrapper:hover,
-.pf-c-app-launcher__menu-wrapper:focus-within,
-.pf-c-app-launcher__menu-wrapper.pf-m-focus, .pf-c-app-launcher__menu-item:hover, .pf-c-app-launcher__menu-item:focus {
-  background-color: var(--pf-c-app-launcher__menu-item--hover--BackgroundColor);
-}
-
-.pf-c-app-launcher__menu-item:disabled, .pf-c-app-launcher__menu-item.pf-m-disabled {
-  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--disabled--Color);
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--disabled--Color);
-  pointer-events: none;
-}
-
-.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 {
-  background-color: transparent;
-}
-
-.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 {
-  opacity: 1;
-}
-
-.pf-c-app-launcher__menu-item.pf-m-link {
-  --pf-c-app-launcher__menu-item--PaddingRight: var(--pf-c-app-launcher__menu-item--m-link--PaddingRight);
-  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
-}
-
-.pf-c-app-launcher__menu-item.pf-m-action {
-  --pf-c-app-launcher__menu-item--Color: var(--pf-c-app-launcher__menu-item--m-action--Color);
-  --pf-c-app-launcher__menu-item--Width: var(--pf-c-app-launcher__menu-item--m-action--Width);
-  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
-  font-size: var(--pf-c-app-launcher__menu-item--m-action--FontSize);
-}
-
-.pf-c-app-launcher__menu-item.pf-m-action:hover, .pf-c-app-launcher__menu-item.pf-m-action:focus {
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-c-app-launcher__menu-item--m-action--hover--Color);
-}
-
-.pf-c-app-launcher__menu-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--pf-c-app-launcher__menu-item-icon--Width);
-  height: var(--pf-c-app-launcher__menu-item-icon--Height);
-  margin-right: var(--pf-c-app-launcher__menu-item-icon--MarginRight);
-}
-
-.pf-c-app-launcher__menu-item-icon > * {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.pf-c-app-launcher__menu-item-external-icon {
-  padding-left: var(--pf-c-app-launcher__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
-  font-size: var(--pf-c-app-launcher__menu-item-external-icon--FontSize);
-  color: var(--pf-c-app-launcher__menu-item-external-icon--Color);
-  opacity: 0;
-  transform: translateY(var(--pf-c-app-launcher__menu-item-external-icon--TranslateY));
-}
-
-.pf-c-app-launcher__group + .pf-c-app-launcher__group {
-  padding-top: var(--pf-c-app-launcher__group--group--PaddingTop);
-}
-
-.pf-c-app-launcher__group-title {
-  padding-top: var(--pf-c-app-launcher__group-title--PaddingTop);
-  padding-right: var(--pf-c-app-launcher__group-title--PaddingRight);
-  padding-bottom: var(--pf-c-app-launcher__group-title--PaddingBottom);
-  padding-left: var(--pf-c-app-launcher__group-title--PaddingLeft);
-  font-size: var(--pf-c-app-launcher__group-title--FontSize);
-  font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
-  color: var(--pf-c-app-launcher__group-title--Color);
-}
-
-:where(.pf-theme-dark) .pf-c-app-launcher {
-  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-app-launcher__menu--Top: 100%;
-  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
-  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
-  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
-  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-}
-
 .pf-c-back-to-top {
   --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
   --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.3",
+  "version": "4.258.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "8faac0c6f8e22f1221bd4a13ade19c4ca47ce22c"
+  "gitHead": "bc0ffb995ba53ffe29765ddc745f88c57806ad64"
 }

package/src/components/Alert/__tests__/AlertActionCloseButton.test.tsx

@@ -5,18 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { AlertActionCloseButton } from '../AlertActionCloseButton';
 import { AlertContext } from '../AlertContext';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, onClick, ...props }) => (
-    <>
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-      <p>{`variant: ${variant}`}</p>
-      <p id="labelling-id">Test label</p>
-    </>
-  ),
-  ButtonVariant: { plain: 'plain' }
-}));
+jest.mock('../../Button');
 
 test('Renders without children', () => {
   render(
@@ -98,7 +87,7 @@ test('Renders with an aria label composed with the title and variantLabel provid
 test('Renders with an aria label composed with the title provided via a context and variantLabel provided via prop', () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
-      <AlertActionCloseButton variantLabel='variant label prop'/>
+      <AlertActionCloseButton variantLabel="variant label prop" />
     </AlertContext.Provider>
   );
 
@@ -106,14 +95,14 @@ test('Renders with an aria label composed with the title provided via a context
 });
 
 test('Renders with the aria label provided via prop when one is provided', () => {
-    render(
-      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
-        <AlertActionCloseButton aria-label='Aria label prop'/>
-      </AlertContext.Provider>
-    );
-  
-    expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
-  });
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton aria-label="Aria label prop" />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
+});
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(

package/src/components/Alert/__tests__/AlertActionLink.test.tsx

@@ -2,16 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { AlertActionLink } from '../AlertActionLink';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, ...props }) => (
-    <>
-      <button {...props}>{children}</button>
-      <p>{`variant: ${variant}`}</p>
-      <p>{`isInline: ${isInline}`}</p>
-    </>
-  ),
-  ButtonVariant: { link: 'link' }
-}));
+jest.mock('../../Button');
 
 test('Renders without children', () => {
   render(

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -5,18 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { AlertToggleExpandButton } from '../AlertToggleExpandButton';
 import { AlertContext } from '../AlertContext';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, onClick, ...props }) => (
-    <>
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-      <p>{`variant: ${variant}`}</p>
-      <p id="labelling-id">Test label</p>
-    </>
-  ),
-  ButtonVariant: { plain: 'plain' }
-}));
+jest.mock('../../Button');
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
 

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -27,5 +27,14 @@ exports[`Matches the snapshot 1`] = `
   >
     Test label
   </p>
+  <p>
+    isInline: undefined
+  </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertActionLink.test.tsx.snap

@@ -10,8 +10,19 @@ exports[`Matches the snapshot 1`] = `
   <p>
     variant: link
   </p>
+  <p
+    id="labelling-id"
+  >
+    Test label
+  </p>
   <p>
     isInline: true
   </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -20,5 +20,14 @@ exports[`Matches snapshot 1`] = `
   >
     Test label
   </p>
+  <p>
+    isInline: undefined
+  </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/BackToTop/__tests__/BackToTop.test.tsx

@@ -3,16 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { BackToTop } from '../BackToTop';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('../../Button', () => ({
-  Button: ({ variant, iconPosition, children, icon }) => (
-    <>
-      <button>{children}</button>
-      <p>{variant}</p>
-      <p>{iconPosition}</p>
-      <div data-testid="icon">{icon}</div>
-    </>
-  )
-}));
+jest.mock('../../Button');
 
 test('Renders BackToTop', () => {
   render(
@@ -138,13 +129,13 @@ test('Passes correct text content to button child component', () => {
 test('Passes correct variant to button child component', () => {
   render(<BackToTop title="Back to the future" />);
 
-  expect(screen.getByText('primary')).toBeVisible();
+  expect(screen.getByText('variant: primary')).toBeVisible();
 });
 
 test('Passes correct iconPosition to button child component', () => {
   render(<BackToTop />);
 
-  expect(screen.getByText('right')).toBeVisible();
+  expect(screen.getByText('iconPosition: right')).toBeVisible();
 });
 
 test('Passes correct icon to button child component', () => {

package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -9,10 +9,18 @@ exports[`Matches the snapshot 1`] = `
       Back to top
     </button>
     <p>
-      primary
+      variant: primary
+    </p>
+    <p
+      id="labelling-id"
+    >
+      Test label
+    </p>
+    <p>
+      isInline: undefined
     </p>
     <p>
-      right
+      iconPosition: right
     </p>
     <div
       data-testid="icon"

package/src/components/Backdrop/__tests__/Backdrop.test.tsx

@@ -1,8 +1,42 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
 
-test('Backdrop Test', () => {
+test('Renders without children', () => {
+  render(
+    <div data-testid="backdrop">
+      <Backdrop />
+    </div>
+  );
+  expect(screen.getByTestId('backdrop').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-backdrop', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-backdrop');
+});
+
+test('Renders with only the class pf-c-backdrop by default', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-backdrop', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Backdrop className="test-class">Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<Backdrop aria-label="this is a simple backdrop">Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple backdrop');
+});
+
+test('Matches the snapshot', () => {
   const { asFragment } = render(<Backdrop>Backdrop</Backdrop>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Backdrop Test 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-backdrop"

package/src/components/Button/__mocks__/Button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps } from '../';
+
+export const Button = ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => (
+  <>
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+    <p>{`variant: ${variant}`}</p>
+    <p id="labelling-id">Test label</p>
+    <p>{`isInline: ${isInline}`}</p>
+    <p>{`iconPosition: ${iconPosition}`}</p>
+    <div data-testid="icon">{icon}</div>
+  </>
+);
+
+export const ButtonVariant = { plain: 'plain', link: 'link' };

package/src/components/Button/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/components/FormSelect/examples/FormSelect.md

@@ -28,5 +28,5 @@ ouia: true
 
 **Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
+```ts file='./FormSelectIconSpriteVariant.tsx'
 ```