@patternfly/react-table 4.52.10 → 4.53.2

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.53.2 (2022-01-10)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## 4.53.1 (2022-01-10)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+# 4.53.0 (2022-01-10)
+
+
+### Features
+
+* **Dropdown:** add plain-text variant support ([#6721](https://github.com/patternfly/patternfly-react/issues/6721)) ([e5000e3](https://github.com/patternfly/patternfly-react/commit/e5000e36194e36b9c6ae49efdb0a513125efcb70))
+
+
+
+
+
+## 4.52.11 (2022-01-10)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
 ## 4.52.10 (2022-01-10)
 
 

package/dist/umd/react-table.css

@@ -620,7 +620,7 @@
 .pf-c-table .pf-c-table__icon,
 .pf-c-table .pf-m-fit-content {
   --pf-c-table--cell--MinWidth: fit-content;
-  --pf-c-table--cell--MaxWidth: fit-content;
+  --pf-c-table--cell--MaxWidth: none;
   --pf-c-table--cell--Width: 1%;
   --pf-c-table--cell--Overflow: visible;
   --pf-c-table--cell--TextOverflow: clip;
@@ -4995,6 +4995,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
   --pf-c-button__progress--Opacity: 0;
   --pf-c-button__progress--TranslateY: -50%;
+  --pf-c-button__progress--TranslateX: 0;
   --pf-c-button__progress--Top: 50%;
   --pf-c-button__progress--Left: var(--pf-global--spacer--md);
   --pf-c-button--m-progress--TransitionProperty: padding;
@@ -5003,6 +5004,9 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
   --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
+  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
+  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   position: relative;
   display: inline-block;
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -5350,11 +5354,21 @@ label.pf-c-check, .pf-c-check__label,
   transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
 }
 
-.pf-c-button.pf-m-in-progress {
+.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
   --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
 }
 
+.pf-c-button.pf-m-in-progress.pf-m-plain {
+  --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
+  --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
+  --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
+}
+
+.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
+  opacity: 0;
+}
+
 .pf-c-button__icon.pf-m-start {
   margin-right: var(--pf-c-button__icon--m-start--MarginRight);
 }
@@ -5368,7 +5382,7 @@ label.pf-c-check, .pf-c-check__label,
   top: var(--pf-c-button__progress--Top);
   left: var(--pf-c-button__progress--Left);
   line-height: 1;
-  transform: translateY(var(--pf-c-button__progress--TranslateY));
+  transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 }
 
 .pf-c-button__progress .pf-c-spinner {
@@ -14442,6 +14456,7 @@ ul.pf-c-list {
 }
 
 .pf-c-login__main {
+  align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
   grid-area: main;

package/dist/umd/react-table.js

@@ -4037,9 +4037,9 @@
             }
         }
         render() {
-            const _a = this.props, { children, className, direction, dropdownItems, isOpen, isPlain, isGrouped, isFullHeight, 
+            const _a = this.props, { children, className, direction, dropdownItems, isOpen, isPlain, isText, isGrouped, isFullHeight, 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onSelect, position, toggle, autoFocus, menuAppendTo } = _a, props = __rest$1(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isGrouped", "isFullHeight", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo"]);
+            onSelect, position, toggle, autoFocus, menuAppendTo } = _a, props = __rest$1(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isText", "isGrouped", "isFullHeight", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo"]);
             const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
             let component;
             let renderedContent;
@@ -4065,6 +4065,7 @@
                         isOpen,
                         id,
                         isPlain,
+                        isText,
                         'aria-haspopup': ariaHasPopup,
                         onEnter: () => {
                             this.onEnter();
@@ -4090,6 +4091,7 @@
         dropdownItems: [],
         isOpen: false,
         isPlain: false,
+        isText: false,
         isGrouped: false,
         position: DropdownPosition.left,
         direction: DropdownDirection.down,
@@ -4421,12 +4423,12 @@
             };
         }
         render() {
-            const _a = this.props, { className, children, isOpen, isDisabled, isPlain, isPrimary, isSplitButton, toggleVariant, onToggle, 'aria-haspopup': ariaHasPopup, 
+            const _a = this.props, { className, children, isOpen, isDisabled, isPlain, isText, isPrimary, isSplitButton, toggleVariant, onToggle, 'aria-haspopup': ariaHasPopup, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
             isActive, bubbleEvent, onEnter, parentRef, getMenuRef, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            id, type } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isPrimary", "isSplitButton", "toggleVariant", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
-            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$e.dropdownToggleButton : toggleClass || _default$e.dropdownToggle, isActive && _default$e.modifiers.active, isPlain && _default$e.modifiers.plain, isPrimary && _default$e.modifiers.primary, buttonVariantStyles[toggleVariant], className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
+            id, type } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isText", "isPrimary", "isSplitButton", "toggleVariant", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
+            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$e.dropdownToggleButton : toggleClass || _default$e.dropdownToggle, isActive && _default$e.modifiers.active, isPlain && _default$e.modifiers.plain, isText && _default$e.modifiers.text, isPrimary && _default$e.modifiers.primary, buttonVariantStyles[toggleVariant], className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
         }
     }
     Toggle.displayName = 'Toggle';
@@ -4436,6 +4438,7 @@
         isActive: false,
         isDisabled: false,
         isPlain: false,
+        isText: false,
         isPrimary: false,
         isSplitButton: false,
         onToggle: () => { },

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

@@ -620,7 +620,7 @@
 .pf-c-table .pf-c-table__icon,
 .pf-c-table .pf-m-fit-content {
   --pf-c-table--cell--MinWidth: fit-content;
-  --pf-c-table--cell--MaxWidth: fit-content;
+  --pf-c-table--cell--MaxWidth: none;
   --pf-c-table--cell--Width: 1%;
   --pf-c-table--cell--Overflow: visible;
   --pf-c-table--cell--TextOverflow: clip;
@@ -4995,6 +4995,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
   --pf-c-button__progress--Opacity: 0;
   --pf-c-button__progress--TranslateY: -50%;
+  --pf-c-button__progress--TranslateX: 0;
   --pf-c-button__progress--Top: 50%;
   --pf-c-button__progress--Left: var(--pf-global--spacer--md);
   --pf-c-button--m-progress--TransitionProperty: padding;
@@ -5003,6 +5004,9 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
   --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
+  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
+  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   position: relative;
   display: inline-block;
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -5350,11 +5354,21 @@ label.pf-c-check, .pf-c-check__label,
   transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
 }
 
-.pf-c-button.pf-m-in-progress {
+.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
   --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
 }
 
+.pf-c-button.pf-m-in-progress.pf-m-plain {
+  --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
+  --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
+  --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
+}
+
+.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
+  opacity: 0;
+}
+
 .pf-c-button__icon.pf-m-start {
   margin-right: var(--pf-c-button__icon--m-start--MarginRight);
 }
@@ -5368,7 +5382,7 @@ label.pf-c-check, .pf-c-check__label,
   top: var(--pf-c-button__progress--Top);
   left: var(--pf-c-button__progress--Left);
   line-height: 1;
-  transform: translateY(var(--pf-c-button__progress--TranslateY));
+  transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 }
 
 .pf-c-button__progress .pf-c-spinner {
@@ -14442,6 +14456,7 @@ ul.pf-c-list {
 }
 
 .pf-c-login__main {
+  align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
   grid-area: main;