@patternfly/react-styles 4.86.12 → 4.87.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.87.0 (2022-09-09)
+
+
+### Features
+
+* **Button:** new count number prop ([#7910](https://github.com/patternfly/patternfly-react/issues/7910)) ([a096b3c](https://github.com/patternfly/patternfly-react/commit/a096b3cba080b5bcd87777efe0e96e64c6da121f))
+
+
+
+
+
+## 4.86.14 (2022-09-08)
+
+
+### Bug Fixes
+
+* **Page:** Fixed page group props regression ([#7948](https://github.com/patternfly/patternfly-react/issues/7948)) ([044444e](https://github.com/patternfly/patternfly-react/commit/044444e11fb90d53dc8f783071d3e3dc517532a0))
+
+
+
+
+
+## 4.86.13 (2022-09-08)
+
+
+### Bug Fixes
+
+* **table:** fix bug in expandable demo ([#7945](https://github.com/patternfly/patternfly-react/issues/7945)) ([711b196](https://github.com/patternfly/patternfly-react/commit/711b19609dd8023b157a99f6988ff8618ccee35d))
+
+
+
+
+
 ## 4.86.12 (2022-09-07)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/FormControl/form-control.css

@@ -43,6 +43,8 @@
   --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
   --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+  --pf-c-form-control--readonly--m-plain--inset--base: 0;
   --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
   --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -163,6 +165,11 @@
   --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
   --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
 }
+.pf-c-form-control[readonly].pf-m-plain {
+  --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
+  --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
+  border-color: transparent;
+}
 .pf-c-form-control:hover {
   --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
 }

package/css/components/FormControl/form-control.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "formControl": "pf-c-form-control",
   "modifiers": {
     "success": "pf-m-success",
+    "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "icon": "pf-m-icon",
     "warning": "pf-m-warning",

package/css/components/FormControl/form-control.js

@@ -5,6 +5,7 @@ exports.default = {
   "formControl": "pf-c-form-control",
   "modifiers": {
     "success": "pf-m-success",
+    "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "icon": "pf-m-icon",
     "warning": "pf-m-warning",

package/css/components/FormControl/form-control.mjs

@@ -3,6 +3,7 @@ export default {
   "formControl": "pf-c-form-control",
   "modifiers": {
     "success": "pf-m-success",
+    "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "icon": "pf-m-icon",
     "warning": "pf-m-warning",

package/css/components/Icon/icon.css

@@ -0,0 +1,119 @@
+.pf-c-icon {
+  --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-inline--Width: 1em;
+  --pf-c-icon--m-inline--Height: 1em;
+  --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
+  --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
+  --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
+  --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
+  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
+  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
+  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
+  --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
+  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-inline__content--FontSize: 1em;
+  --pf-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pf-c-icon--Width);
+  height: var(--pf-c-icon--Height);
+}
+.pf-c-icon.pf-m-inline {
+  --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
+  --pf-c-icon__content--Color: currentcolor;
+  line-height: 1;
+}
+.pf-c-icon.pf-m-inline .pf-c-spinner {
+  --pf-c-spinner--diameter: 1em;
+}
+.pf-c-icon.pf-m-sm {
+  --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+}
+.pf-c-icon.pf-m-md {
+  --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+}
+.pf-c-icon.pf-m-lg {
+  --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+}
+.pf-c-icon.pf-m-xl {
+  --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+}
+.pf-c-icon.pf-m-in-progress {
+  --pf-c-icon__content--Opacity: 0;
+  --pf-c-icon__progress--Opacity: 1;
+}
+
+.pf-c-icon__content,
+.pf-c-icon__progress {
+  font-size: var(--pf-c-icon__content--FontSize);
+}
+.pf-c-icon__content svg,
+.pf-c-icon__progress svg {
+  vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
+}
+.pf-c-icon__content.pf-m-sm,
+.pf-c-icon__progress.pf-m-sm {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+}
+.pf-c-icon__content.pf-m-md,
+.pf-c-icon__progress.pf-m-md {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+}
+.pf-c-icon__content.pf-m-lg,
+.pf-c-icon__progress.pf-m-lg {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+}
+.pf-c-icon__content.pf-m-xl,
+.pf-c-icon__progress.pf-m-xl {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+}
+
+.pf-c-icon__content {
+  color: var(--pf-c-icon__content--Color);
+  opacity: var(--pf-c-icon__content--Opacity, 1);
+}
+.pf-c-icon__content.pf-m-danger {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
+}
+.pf-c-icon__content.pf-m-warning {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
+}
+.pf-c-icon__content.pf-m-success {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
+}
+.pf-c-icon__content.pf-m-info {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
+}
+.pf-c-icon__content.pf-m-default {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
+}
+
+.pf-c-icon__progress {
+  position: absolute;
+  top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
+  opacity: var(--pf-c-icon__progress--Opacity, 0);
+  transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
+}

package/css/components/Icon/icon.d.ts

@@ -0,0 +1,21 @@
+import './icon.css';
+declare const _default: {
+  "icon": "pf-c-icon",
+  "iconContent": "pf-c-icon__content",
+  "iconProgress": "pf-c-icon__progress",
+  "modifiers": {
+    "inline": "pf-m-inline",
+    "sm": "pf-m-sm",
+    "md": "pf-m-md",
+    "lg": "pf-m-lg",
+    "xl": "pf-m-xl",
+    "inProgress": "pf-m-in-progress",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "default": "pf-m-default"
+  },
+  "spinner": "pf-c-spinner"
+};
+export default _default;

package/css/components/Icon/icon.js

@@ -0,0 +1,22 @@
+"use strict";
+exports.__esModule = true;
+require('./icon.css');
+exports.default = {
+  "icon": "pf-c-icon",
+  "iconContent": "pf-c-icon__content",
+  "iconProgress": "pf-c-icon__progress",
+  "modifiers": {
+    "inline": "pf-m-inline",
+    "sm": "pf-m-sm",
+    "md": "pf-m-md",
+    "lg": "pf-m-lg",
+    "xl": "pf-m-xl",
+    "inProgress": "pf-m-in-progress",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "default": "pf-m-default"
+  },
+  "spinner": "pf-c-spinner"
+};

package/css/components/Icon/icon.mjs

@@ -0,0 +1,20 @@
+import('./icon.css');
+export default {
+  "icon": "pf-c-icon",
+  "iconContent": "pf-c-icon__content",
+  "iconProgress": "pf-c-icon__progress",
+  "modifiers": {
+    "inline": "pf-m-inline",
+    "sm": "pf-m-sm",
+    "md": "pf-m-md",
+    "lg": "pf-m-lg",
+    "xl": "pf-m-xl",
+    "inProgress": "pf-m-in-progress",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "default": "pf-m-default"
+  },
+  "spinner": "pf-c-spinner"
+};

package/css/components/ProgressStepper/progress-stepper.css

@@ -53,8 +53,7 @@
   --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
   --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
-  --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
+  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
   --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -148,10 +147,11 @@
   --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
   --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
   --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
-  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
+  --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
+  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
   --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
   --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
-  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
+  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
   --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
   --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
   grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -279,7 +279,10 @@
 }
 
 .pf-c-progress-stepper__step-main {
+  min-width: 0;
   margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
+  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
+  overflow-wrap: anywhere;
 }
 .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.86.12",
+  "version": "4.87.0",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.212.1",
+    "@patternfly/patternfly": "4.214.1",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "ef7593c96a44bb5c01f44c79d05ac667ada3b575"
+  "gitHead": "cd1d1c0a95c7a848754272964ee52c5575554829"
 }