@patternfly/react-styles 4.39.1 → 4.39.5

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.39.5 (2022-01-18)
+
+
+### Bug Fixes
+
+* **Tabs:** enable tabs scroll button for small window ([#6784](https://github.com/patternfly/patternfly-react/issues/6784)) ([a29b430](https://github.com/patternfly/patternfly-react/commit/a29b43094ae3d5ce7f4b26e4041cd595e675ee58))
+
+
+
+
+
+## 4.39.4 (2022-01-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.39.3 (2022-01-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.39.2 (2022-01-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.39.1 (2022-01-18)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/DescriptionList/description-list.css

@@ -11,9 +11,14 @@
   --pf-c-description-list__group--GridColumn: auto;
   --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
   --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-description-list__term--Display: inline;
+  --pf-c-description-list__term--sm--Display: flex;
   --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
+  --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
   --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
   --pf-c-description-list--m-horizontal__term--width: 12ch;
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
@@ -34,6 +39,11 @@
   column-gap: var(--pf-c-description-list--ColumnGap);
   grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
 }
+@media screen and (min-width: 576px) {
+  .pf-c-description-list {
+    --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
+  }
+}
 .pf-c-description-list[class*=pf-m-horizontal] {
   --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
 }
@@ -136,6 +146,7 @@
 }
 
 .pf-c-description-list__term {
+  display: var(--pf-c-description-list__term--Display);
   font-size: var(--pf-c-description-list__term--FontSize);
   font-weight: var(--pf-c-description-list__term--FontWeight);
   line-height: var(--pf-c-description-list__term--LineHeight);
@@ -144,6 +155,13 @@
   display: inline;
 }
 
+.pf-c-description-list__term-icon {
+  flex-shrink: 0;
+  min-width: var(--pf-c-description-list__term-icon--MinWidth);
+  margin-right: var(--pf-c-description-list__term-icon--MarginRight);
+  color: var(--pf-c-description-list__term-icon--Color);
+}
+
 .pf-c-description-list__text.pf-m-help-text {
   text-decoration: underline;
   cursor: pointer;

package/css/components/DescriptionList/description-list.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "descriptionListDescription": "pf-c-description-list__description",
   "descriptionListGroup": "pf-c-description-list__group",
   "descriptionListTerm": "pf-c-description-list__term",
+  "descriptionListTermIcon": "pf-c-description-list__term-icon",
   "descriptionListText": "pf-c-description-list__text",
   "modifiers": {
     "inlineGrid": "pf-m-inline-grid",

package/css/components/DescriptionList/description-list.js

@@ -6,6 +6,7 @@ exports.default = {
   "descriptionListDescription": "pf-c-description-list__description",
   "descriptionListGroup": "pf-c-description-list__group",
   "descriptionListTerm": "pf-c-description-list__term",
+  "descriptionListTermIcon": "pf-c-description-list__term-icon",
   "descriptionListText": "pf-c-description-list__text",
   "modifiers": {
     "inlineGrid": "pf-m-inline-grid",

package/css/components/Truncate/truncate.css

@@ -1,45 +1,33 @@
 .pf-c-truncate {
-  --pf-c-truncate--FontSize: 1rem;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
 }
 
 .pf-c-truncate__start,
 .pf-c-truncate__end {
-  flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
 .pf-c-truncate__end {
   direction: rtl;
-  text-align: left;
 }
 
-@supports (text-overflow: "") {
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    text-overflow: "";
-  }
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
 }
-@supports not (text-overflow: "") {
-  .pf-c-truncate__start + .pf-c-truncate__end {
-    font-size: 0;
-  }
-  .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
-    font-size: var(--pf-c-truncate--FontSize);
-  }
-}
-@supports (-webkit-hyphens: none) {
-  .pf-c-truncate {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 
+@supports (-webkit-hyphens: none) {
   .pf-c-truncate__end {
     direction: ltr;
   }

package/css/components/Truncate/truncate.d.ts

@@ -2,7 +2,6 @@ import './truncate.css';
 declare const _default: {
   "truncate": "pf-c-truncate",
   "truncateEnd": "pf-c-truncate__end",
-  "truncateStart": "pf-c-truncate__start",
-  "truncateText": "pf-c-truncate__text"
+  "truncateStart": "pf-c-truncate__start"
 };
 export default _default;

package/css/components/Truncate/truncate.js

@@ -4,6 +4,5 @@ require('./truncate.css');
 exports.default = {
   "truncate": "pf-c-truncate",
   "truncateEnd": "pf-c-truncate__end",
-  "truncateStart": "pf-c-truncate__start",
-  "truncateText": "pf-c-truncate__text"
+  "truncateStart": "pf-c-truncate__start"
 };

package/css/docs/components/Truncate/examples/Truncate.css

@@ -0,0 +1,9 @@
+.pf-c-truncate--example {
+  width: 320px;
+  resize: horizontal;
+  overflow: auto;
+  min-width: 161px;
+  max-width: 100%;
+  padding: var(--pf-global--spacer--md);
+  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+}

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

@@ -0,0 +1,5 @@
+import './Truncate.css';
+declare const _default: {
+  "truncateExample": "pf-c-truncate--example"
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+require('./Truncate.css');
+exports.default = {
+  "truncateExample": "pf-c-truncate--example"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.39.1",
+  "version": "4.39.5",
   "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.166.4",
+    "@patternfly/patternfly": "4.167.0",
     "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": "a634131168ee7e2c61e9a68080a1fd9b2b7bb46d"
+  "gitHead": "01c8b913108c70fcddb6ee6d7bdf523dffc620b7"
 }