@patternfly/react-styles 4.77.7 → 4.78.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.78.0 (2022-07-29)
+
+
+### Features
+
+* **Tabs:** add horizontal overflow option ([#7742](https://github.com/patternfly/patternfly-react/issues/7742)) ([2745cd1](https://github.com/patternfly/patternfly-react/commit/2745cd199669b0c0a5cdbd5c3d4e7453c6e1c435))
+
+
+
+
+
+## 4.77.9 (2022-07-28)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.77.8 (2022-07-28)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.77.7 (2022-07-28)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/AppLauncher/app-launcher.css

@@ -56,8 +56,8 @@
   --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
   --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
   --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -219,6 +219,4 @@
   --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }

package/css/components/Dropdown/dropdown.css

@@ -121,8 +121,8 @@
   --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
   --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
   --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-dropdown__toggle-image--MarginTop: 0;
   --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -633,8 +633,6 @@
   --pf-c-dropdown__menu--Top: 100%;
   --pf-c-dropdown--m-top__menu--TranslateY: -100%;
   --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }
 :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
   color: var(--pf-global--palette--black-100);

package/css/components/Menu/menu.css

@@ -140,8 +140,8 @@
   --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
   --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
   --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -635,6 +635,4 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
 }

package/css/components/OptionsMenu/options-menu.css

@@ -61,8 +61,8 @@
   --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
   --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
   --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -252,8 +252,6 @@
   --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-options-menu__menu--Top: 100%;
 }
 :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {

package/css/components/Select/select.css

@@ -145,8 +145,8 @@
   --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
   --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
   --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);

package/css/components/Tabs/tabs.css

@@ -410,6 +410,10 @@
 .pf-c-tabs.pf-m-page-insets {
   --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
 }
+.pf-c-tabs.pf-m-overflow,
+.pf-c-tabs.pf-m-overflow .pf-c-tabs__list {
+  overflow: visible;
+}
 
 .pf-c-tabs__toggle {
   display: var(--pf-c-tabs__toggle--Display);

package/css/components/Tabs/tabs.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "overflow": "pf-m-overflow",
     "action": "pf-m-action",
     "active": "pf-m-active",
     "disabled": "pf-m-disabled",

package/css/components/Tabs/tabs.js

@@ -27,6 +27,7 @@ exports.default = {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "overflow": "pf-m-overflow",
     "action": "pf-m-action",
     "active": "pf-m-active",
     "disabled": "pf-m-disabled",

package/css/components/Tabs/tabs.mjs

@@ -25,6 +25,7 @@ export default {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "overflow": "pf-m-overflow",
     "action": "pf-m-action",
     "active": "pf-m-active",
     "disabled": "pf-m-disabled",

package/css/components/Timestamp/timestamp.css

@@ -0,0 +1,31 @@
+.pf-c-timestamp {
+  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
+  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
+  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+  font-size: var(--pf-c-timestamp--FontSize);
+  color: var(--pf-c-timestamp--Color);
+}
+.pf-c-timestamp.pf-m-help-text {
+  cursor: pointer;
+  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+}
+.pf-c-timestamp.pf-m-help-text:hover {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
+}
+.pf-c-timestamp.pf-m-help-text:focus {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
+}

package/css/components/Timestamp/timestamp.d.ts

@@ -0,0 +1,8 @@
+import './timestamp.css';
+declare const _default: {
+  "modifiers": {
+    "helpText": "pf-m-help-text"
+  },
+  "timestamp": "pf-c-timestamp"
+};
+export default _default;

package/css/components/Timestamp/timestamp.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+require('./timestamp.css');
+exports.default = {
+  "modifiers": {
+    "helpText": "pf-m-help-text"
+  },
+  "timestamp": "pf-c-timestamp"
+};

package/css/components/Timestamp/timestamp.mjs

@@ -0,0 +1,7 @@
+import('./timestamp.css');
+export default {
+  "modifiers": {
+    "helpText": "pf-m-help-text"
+  },
+  "timestamp": "pf-c-timestamp"
+};

package/css/components/TreeView/tree-view.css

@@ -264,20 +264,14 @@
 .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
   --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
 }
-.pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
-}
-.pf-c-tree-view__node:hover,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
 }
-.pf-c-tree-view__node:focus,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
 }
-.pf-c-tree-view__node:active,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
 }
 
 .pf-c-tree-view__node-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.77.7",
+  "version": "4.78.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.204.3",
+    "@patternfly/patternfly": "4.206.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": "86dc74f93f58bd72ce6ac164e9bda25422494ca0"
+  "gitHead": "f02b0e0e72ea0aa326e1d512b1da0397b10e7f9a"
 }