@patternfly/react-table 4.49.1 → 4.50.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.50.0 (2021-12-09)
+
+
+### Features
+
+* **Popover:** add composable header and alert variants ([#6664](https://github.com/patternfly/patternfly-react/issues/6664)) ([9028e8b](https://github.com/patternfly/patternfly-react/commit/9028e8ba5d674bde6a7e29532f7926e200dd632a))
+
+
+
+
+
 ## 4.49.1 (2021-12-08)
 
 **Note:** Version bump only for package @patternfly/react-table

package/dist/umd/react-table.js

@@ -6298,14 +6298,31 @@
     PopoverContent.displayName = 'PopoverContent';
 
     const PopoverBody = (_a) => {
-        var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverBody), id: id }, props), children));
+        var { children, id, className } = _a, props = __rest$1(_a, ["children", "id", "className"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverBody, className), id: id }, props), children));
     };
     PopoverBody.displayName = 'PopoverBody';
 
+    const PopoverHeaderIcon = (_a) => {
+        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("span", Object.assign({ className: css(_default$6.popoverTitleIcon, className) }, props), children));
+    };
+    PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
+
+    const PopoverHeaderText = (_a) => {
+        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("span", Object.assign({ className: css(_default$6.popoverTitleText, className) }, props), children));
+    };
+    PopoverHeaderText.displayName = 'PopoverHeaderText';
+
     const PopoverHeader = (_a) => {
-        var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement(PopoverContext.Consumer, null, ({ headerComponent }) => (React__namespace.createElement(Title, Object.assign({ headingLevel: headerComponent, size: TitleSizes.md, id: id }, props), children))));
+        var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest$1(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
+        const HeadingLevel = titleHeadingLevel;
+        return icon || alertSeverityVariant ? (React__namespace.createElement("header", Object.assign({ className: css('pf-c-popover__header', className), id: id }, props),
+            React__namespace.createElement(HeadingLevel, { className: css(_default$6.popoverTitle, icon && _default$6.modifiers.icon) },
+                icon && React__namespace.createElement(PopoverHeaderIcon, null, icon),
+                alertSeverityVariant && alertSeverityScreenReaderText && (React__namespace.createElement("span", { className: "pf-u-screen-reader" }, alertSeverityScreenReaderText)),
+                React__namespace.createElement(PopoverHeaderText, null, children)))) : (React__namespace.createElement(Title, Object.assign({ headingLevel: titleHeadingLevel, size: TitleSizes.md, id: id, className: className }, props), children));
     };
     PopoverHeader.displayName = 'PopoverHeader';
 
@@ -6366,10 +6383,17 @@
         PopoverPosition["rightStart"] = "right-start";
         PopoverPosition["rightEnd"] = "right-end";
     })(PopoverPosition || (PopoverPosition = {}));
+    const alertStyle = {
+        default: _default$6.modifiers.default,
+        info: _default$6.modifiers.info,
+        success: _default$6.modifiers.success,
+        warning: _default$6.modifiers.warning,
+        danger: _default$6.modifiers.danger
+    };
     const Popover = (_a) => {
-        var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, 
+        var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, 
         // For every initial starting position, there are 3 escape positions
-        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
+        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "headerIcon", "alertSeverityVariant", "alertSeverityScreenReaderText", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
         {
             boundary !== undefined &&
                 console.warn('The Popover boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.');
@@ -6515,7 +6539,7 @@
                     }
                     return node;
                 }
-            }, preventScrollOnDeactivate: true, className: css(_default$6.popover, hasNoPadding && _default$6.modifiers.noPadding, hasAutoWidth && _default$6.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+            }, preventScrollOnDeactivate: true, className: css(_default$6.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && _default$6.modifiers.noPadding, hasAutoWidth && _default$6.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
                 minWidth: hasCustomMinWidth ? minWidth : null,
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
@@ -6524,7 +6548,7 @@
             React__namespace.createElement(PopoverArrow, null),
             React__namespace.createElement(PopoverContent, null,
                 showClose && React__namespace.createElement(PopoverCloseButton, { onClose: closePopover, "aria-label": closeBtnAriaLabel }),
-                headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header` }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
+                headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header`, icon: headerIcon, alertSeverityVariant: alertSeverityVariant, alertSeverityScreenReaderText: alertSeverityScreenReaderText || `${alertSeverityVariant} alert:`, titleHeadingLevel: headerComponent }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
                 React__namespace.createElement(PopoverBody, { id: `popover-${uniqueId}-body` }, typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent),
                 footerContent && (React__namespace.createElement(PopoverFooter, { id: `popover-${uniqueId}-footer` }, typeof footerContent === 'function' ? footerContent(hide) : footerContent)))));
         return (React__namespace.createElement(PopoverContext.Provider, { value: { headerComponent } },

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

@@ -12606,123 +12606,6 @@ button.pf-c-breadcrumb__link {
   font-size: var(--pf-global--FontSize--lg);
 }
 
-.pf-c-expandable-section {
-  --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
-  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
-  --pf-c-expandable-section__toggle--PaddingLeft: 0;
-  --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
-  --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
-  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
-  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
-  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
-  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
-  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
-  --pf-c-expandable-section__toggle-icon--Rotate: 0;
-  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
-  --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-  --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
-  --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-expandable-section__content--MaxWidth: auto;
-  --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
-  --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
-  --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
-  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
-}
-
-.pf-c-expandable-section.pf-m-expanded {
-  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
-  --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
-  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
-  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
-}
-
-.pf-c-expandable-section.pf-m-detached {
-  --pf-c-expandable-section__content--MarginTop: 0;
-}
-
-.pf-c-expandable-section.pf-m-limit-width {
-  --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
-}
-
-.pf-c-expandable-section.pf-m-display-lg {
-  --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
-  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
-  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
-  --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
-  --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
-  --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
-  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
-  --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
-  position: relative;
-  box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
-}
-
-.pf-c-expandable-section.pf-m-display-lg::after {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--pf-c-expandable-section--m-display-lg--after--Width);
-  content: "";
-  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
-}
-
-.pf-c-expandable-section__toggle {
-  display: flex;
-  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
-  color: var(--pf-c-expandable-section__toggle--Color);
-  border: none;
-}
-
-.pf-c-expandable-section__toggle:hover {
-  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
-}
-
-.pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
-  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
-}
-
-.pf-c-expandable-section__toggle:focus {
-  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
-}
-
-.pf-c-expandable-section__toggle-icon {
-  color: var(--pf-c-expandable-section__toggle-icon--Color);
-  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
-  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
-}
-
-.pf-c-expandable-section__toggle-icon.pf-m-expand-top {
-  --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
-}
-
-.pf-c-expandable-section__toggle-text {
-  margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
-}
-
-.pf-c-expandable-section__content {
-  max-width: var(--pf-c-expandable-section__content--MaxWidth);
-  padding-right: var(--pf-c-expandable-section__content--PaddingRight);
-  padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
-  padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
-  margin-top: var(--pf-c-expandable-section__content--MarginTop);
-}
-
-.pf-m-overpass-font .pf-c-expandable-section__toggle {
-  font-weight: var(--pf-global--FontWeight--semi-bold);
-}
-
 .pf-c-file-upload {
   --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
@@ -17350,16 +17233,6 @@ ul.pf-c-list {
   left: 0;
 }
 
-.pf-l-bullseye {
-  --pf-l-bullseye--Padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--pf-l-bullseye--Padding);
-  margin: 0;
-}
-
 .pf-c-notification-badge {
   --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -17460,6 +17333,16 @@ ul.pf-c-list {
   margin-left: var(--pf-c-notification-badge__count--MarginLeft);
 }
 
+.pf-l-bullseye {
+  --pf-l-bullseye--Padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-l-bullseye--Padding);
+  margin: 0;
+}
+
 .pf-c-notification-drawer {
   --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
@@ -22285,6 +22168,123 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
 }
 
+.pf-c-expandable-section {
+  --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
+  --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-c-expandable-section__toggle-icon--Rotate: 0;
+  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
+  --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
+  --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-expandable-section__content--MaxWidth: auto;
+  --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
+  --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
+  --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
+  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
+}
+
+.pf-c-expandable-section.pf-m-expanded {
+  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
+  --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
+  --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
+  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
+}
+
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section__content--MarginTop: 0;
+}
+
+.pf-c-expandable-section.pf-m-limit-width {
+  --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
+}
+
+.pf-c-expandable-section.pf-m-display-lg {
+  --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
+  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
+  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
+  --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
+  --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
+  --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
+  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
+  --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
+  position: relative;
+  box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
+}
+
+.pf-c-expandable-section.pf-m-display-lg::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--pf-c-expandable-section--m-display-lg--after--Width);
+  content: "";
+  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
+}
+
+.pf-c-expandable-section__toggle {
+  display: flex;
+  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
+  color: var(--pf-c-expandable-section__toggle--Color);
+  border: none;
+}
+
+.pf-c-expandable-section__toggle:hover {
+  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
+}
+
+.pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
+  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
+}
+
+.pf-c-expandable-section__toggle:focus {
+  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
+}
+
+.pf-c-expandable-section__toggle-icon {
+  color: var(--pf-c-expandable-section__toggle-icon--Color);
+  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
+  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
+}
+
+.pf-c-expandable-section__toggle-icon.pf-m-expand-top {
+  --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+}
+
+.pf-c-expandable-section__toggle-text {
+  margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
+}
+
+.pf-c-expandable-section__content {
+  max-width: var(--pf-c-expandable-section__content--MaxWidth);
+  padding-right: var(--pf-c-expandable-section__content--PaddingRight);
+  padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
+  padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
+  margin-top: var(--pf-c-expandable-section__content--MarginTop);
+}
+
+.pf-m-overpass-font .pf-c-expandable-section__toggle {
+  font-weight: var(--pf-global--FontWeight--semi-bold);
+}
+
 .pf-c-content {
   --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);