@patternfly/react-styles 4.33.0 → 4.33.4

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.33.4 (2022-01-06)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.33.3 (2022-01-06)
+
+
+### Bug Fixes
+
+* **TopologyControlBar:** Update screen reader className to latest ([#6739](https://github.com/patternfly/patternfly-react/issues/6739)) ([ed9da57](https://github.com/patternfly/patternfly-react/commit/ed9da575fddf9fe7af8a891972f7a66520785411))
+
+
+
+
+
+## 4.33.2 (2022-01-06)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.33.1 (2022-01-06)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 # 4.33.0 (2022-01-05)
 
 

package/css/components/ExpandableSection/expandable-section.css

@@ -8,6 +8,7 @@
   --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--MinWidth: 1em;
   --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;
@@ -30,6 +31,7 @@
   --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--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
 }
 .pf-c-expandable-section.pf-m-expanded {
   --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -64,6 +66,9 @@
   content: "";
   background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
 }
+.pf-c-expandable-section.pf-m-indented {
+  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
@@ -82,6 +87,7 @@
 }
 
 .pf-c-expandable-section__toggle-icon {
+  min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
   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));

package/css/components/ExpandableSection/expandable-section.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
     "detached": "pf-m-detached",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
+    "indented": "pf-m-indented",
     "active": "pf-m-active",
     "expandTop": "pf-m-expand-top",
     "overpassFont": "pf-m-overpass-font"

package/css/components/ExpandableSection/expandable-section.js

@@ -12,6 +12,7 @@ exports.default = {
     "detached": "pf-m-detached",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
+    "indented": "pf-m-indented",
     "active": "pf-m-active",
     "expandTop": "pf-m-expand-top",
     "overpassFont": "pf-m-overpass-font"

package/css/components/Label/label.css

@@ -93,6 +93,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label__text--MaxWidth: 16ch;
@@ -107,6 +108,18 @@
   --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -125,6 +138,7 @@
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
   --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+  --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
 }
 .pf-c-label.pf-m-blue {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -215,7 +229,23 @@
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
 }
 
+.pf-c-label.pf-m-editable {
+  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+  cursor: var(--pf-c-label--m-editable--Cursor);
+  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:hover {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:focus {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+}
 .pf-c-label.pf-m-editable-active {
+  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -223,6 +253,13 @@
 .pf-c-label.pf-m-editable-active .pf-c-button {
   visibility: hidden;
 }
+.pf-c-label .pf-c-label__editable-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label__editable-text--MaxWidth);
+  border-width: var(--pf-c-label__editable-text--BorderWidth);
+}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/css/components/Label/label.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "button": "pf-c-button",
   "label": "pf-c-label",
   "labelContent": "pf-c-label__content",
+  "labelEditableText": "pf-c-label__editable-text",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",
   "modifiers": {
@@ -15,6 +16,7 @@ declare const _default: {
     "cyan": "pf-m-cyan",
     "outline": "pf-m-outline",
     "overflow": "pf-m-overflow",
+    "editable": "pf-m-editable",
     "editableActive": "pf-m-editable-active"
   }
 };

package/css/components/Label/label.js

@@ -5,6 +5,7 @@ exports.default = {
   "button": "pf-c-button",
   "label": "pf-c-label",
   "labelContent": "pf-c-label__content",
+  "labelEditableText": "pf-c-label__editable-text",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",
   "modifiers": {
@@ -17,6 +18,7 @@ exports.default = {
     "cyan": "pf-m-cyan",
     "outline": "pf-m-outline",
     "overflow": "pf-m-overflow",
+    "editable": "pf-m-editable",
     "editableActive": "pf-m-editable-active"
   }
 };

package/css/components/LogViewer/log-viewer.css

@@ -1,4 +1,5 @@
-.pf-c-log-viewer__header {
+.pf-c-log-viewer__header,
+.pf-c-log-viewer__footer {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -107,7 +108,15 @@
   position: absolute;
   right: 0;
   left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
-  overflow: auto;
+}
+.pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
+  position: absolute;
+  top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
+  bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
+  left: 0;
+  width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
+  content: "";
+  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
 }
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -125,10 +134,14 @@
 }
 
 .pf-c-log-viewer__header {
-  color: var(--pf-global--Color--100);
   margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
 }
 
+.pf-c-log-viewer__header,
+.pf-c-log-viewer__footer {
+  color: var(--pf-global--Color--100);
+}
+
 .pf-c-log-viewer__main {
   display: flex;
   flex-direction: column;
@@ -136,18 +149,6 @@
   background-color: var(--pf-c-log-viewer__main--BackgroundColor);
   border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
 }
-.pf-m-line-numbers .pf-c-log-viewer__main {
-  position: relative;
-}
-.pf-m-line-numbers .pf-c-log-viewer__main::before {
-  position: absolute;
-  top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
-  bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
-  left: var(--pf-c-log-viewer__index--Width);
-  width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
-  content: "";
-  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
-}
 
 .pf-c-log-viewer__scroll-container {
   position: relative;
@@ -188,6 +189,7 @@
   font-family: var(--pf-c-log-viewer__index--FontFamily);
   font-size: var(--pf-c-log-viewer__index--FontSize);
   color: var(--pf-c-log-viewer__index--Color);
+  user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
 }
 

package/css/components/LogViewer/log-viewer.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "button": "pf-c-button",
   "card": "pf-c-card",
   "logViewer": "pf-c-log-viewer",
+  "logViewerFooter": "pf-c-log-viewer__footer",
   "logViewerHeader": "pf-c-log-viewer__header",
   "logViewerIndex": "pf-c-log-viewer__index",
   "logViewerList": "pf-c-log-viewer__list",

package/css/components/LogViewer/log-viewer.js

@@ -5,6 +5,7 @@ exports.default = {
   "button": "pf-c-button",
   "card": "pf-c-card",
   "logViewer": "pf-c-log-viewer",
+  "logViewerFooter": "pf-c-log-viewer__footer",
   "logViewerHeader": "pf-c-log-viewer__header",
   "logViewerIndex": "pf-c-log-viewer__index",
   "logViewerList": "pf-c-log-viewer__list",

package/css/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -0,0 +1,3 @@
+.ws-core-c-notification-badge {
+  background: var(--pf-global--BackgroundColor--dark-100);
+}

package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts

@@ -0,0 +1,5 @@
+import './NotificationBadge.css';
+declare const _default: {
+  "wsCoreCNotificationBadge": "ws-core-c-notification-badge"
+};
+export default _default;

package/css/docs/components/NotificationBadge/examples/NotificationBadge.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+require('./NotificationBadge.css');
+exports.default = {
+  "wsCoreCNotificationBadge": "ws-core-c-notification-badge"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.33.0",
+  "version": "4.33.4",
   "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.164.2",
+    "@patternfly/patternfly": "4.165.1",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "66422523fe55a104080eb333b7ea0ea5db5e08c3"
+  "gitHead": "c3d126fe3f5b45d8a0c24ae7e2268d55529dd8fe"
 }