@patternfly/react-styles 3.7.3 → 3.7.8

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.7...@patternfly/react-styles@3.7.8) (2020-03-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.6...@patternfly/react-styles@3.7.7) (2020-03-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.5...@patternfly/react-styles@3.7.6) (2020-03-03)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.7.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.4...@patternfly/react-styles@3.7.5) (2020-02-27)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.7.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.3...@patternfly/react-styles@3.7.4) (2020-02-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## [3.7.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.2...@patternfly/react-styles@3.7.3) (2020-02-18)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/DataToolbar/data-toolbar.css

@@ -40,6 +40,7 @@
   --pf-c-data-toolbar__item--m-label--spacer: var(--pf-c-data-toolbar__item--spacer);
   --pf-c-data-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
+  --pf-c-data-toolbar--c-divider--m-vertical--spacer: var(--pf-c-data-toolbar--spacer--base);
   position: relative;
   row-gap: var(--pf-c-data-toolbar--RowGap);
   display: grid;
@@ -52,6 +53,17 @@
       --pf-c-data-toolbar__expandable-content--PaddingBottom: var(--pf-c-data-toolbar__expandable-content--lg--PaddingBottom);
       --pf-c-data-toolbar__expandable-content--PaddingLeft: var(--pf-c-data-toolbar__expandable-content--lg--PaddingLeft); } }
 
+.pf-c-data-toolbar__content-section > .pf-c-divider,
+.pf-c-data-toolbar__group > .pf-c-divider {
+  --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar--c-divider--m-vertical--spacer); }
+
+.pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical,
+.pf-c-data-toolbar__group > .pf-c-divider.pf-m-vertical {
+  margin-right: var(--pf-c-data-toolbar--spacer); }
+  .pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child,
+  .pf-c-data-toolbar__group > .pf-c-divider.pf-m-vertical:last-child {
+    --pf-c-data-toolbar--spacer: 0; }
+
 .pf-c-data-toolbar__group {
   --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--spacer);
   display: flex;
@@ -80,6 +92,10 @@
     .pf-c-data-toolbar__group.pf-m-toggle-group .pf-c-data-toolbar__toggle {
       display: inline-block;
       visibility: visible; }
+  .pf-c-data-toolbar__group.pf-m-align-right ~ *,
+  .pf-c-data-toolbar__group.pf-m-align-right ~ .pf-c-data-toolbar__item,
+  .pf-c-data-toolbar__group.pf-m-align-right ~ .pf-c-data-toolbar__group {
+    margin-left: 0; }
   .pf-c-data-toolbar__group:last-child {
     --pf-c-data-toolbar--spacer: 0; }
 
@@ -107,7 +123,9 @@
     margin-left: auto; }
     .pf-c-data-toolbar__item.pf-m-pagination .pf-c-pagination {
       flex-wrap: nowrap; }
-  .pf-c-data-toolbar__item.pf-m-align-right ~ * {
+  .pf-c-data-toolbar__item.pf-m-align-right ~ *,
+  .pf-c-data-toolbar__item.pf-m-align-right ~ .pf-c-data-toolbar__item,
+  .pf-c-data-toolbar__item.pf-m-align-right ~ .pf-c-data-toolbar__group {
     margin-left: 0; }
   .pf-c-data-toolbar__item:last-child {
     --pf-c-data-toolbar--spacer: 0; }

package/css/components/DataToolbar/data-toolbar.d.ts

@@ -1,20 +1,23 @@
 import './data-toolbar.css';
 declare const _default: {
     dataToolbar: string;
+    dataToolbarContentSection: string;
+    divider: string;
     dataToolbarGroup: string;
     dataToolbarItem: string;
     dataToolbarToggle: string;
     pagination: string;
     dataToolbarContent: string;
-    dataToolbarContentSection: string;
     dataToolbarExpandableContent: string;
     chipGroup: string;
     button: string;
     modifiers: {
+        'vertical': string;
         'buttonGroup': string;
         'iconButtonGroup': string;
         'filterGroup': string;
         'toggleGroup': string;
+        'alignRight': string;
         'separator': string;
         'overflowMenu': string;
         'bulkSelect': string;
@@ -22,7 +25,6 @@ declare const _default: {
         'chipGroup': string;
         'label': string;
         'pagination': string;
-        'alignRight': string;
         'expanded': string;
         'chipContainer': string;
         'plain': string;

package/css/components/DataToolbar/data-toolbar.js

@@ -3,20 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./data-toolbar.css");
 exports.default = {
     dataToolbar: 'pf-c-data-toolbar',
+    dataToolbarContentSection: 'pf-c-data-toolbar__content-section',
+    divider: 'pf-c-divider',
     dataToolbarGroup: 'pf-c-data-toolbar__group',
     dataToolbarItem: 'pf-c-data-toolbar__item',
     dataToolbarToggle: 'pf-c-data-toolbar__toggle',
     pagination: 'pf-c-pagination',
     dataToolbarContent: 'pf-c-data-toolbar__content',
-    dataToolbarContentSection: 'pf-c-data-toolbar__content-section',
     dataToolbarExpandableContent: 'pf-c-data-toolbar__expandable-content',
     chipGroup: 'pf-c-chip-group',
     button: 'pf-c-button',
     modifiers: {
+        'vertical': 'pf-m-vertical',
         'buttonGroup': 'pf-m-button-group',
         'iconButtonGroup': 'pf-m-icon-button-group',
         'filterGroup': 'pf-m-filter-group',
         'toggleGroup': 'pf-m-toggle-group',
+        'alignRight': 'pf-m-align-right',
         'separator': 'pf-m-separator',
         'overflowMenu': 'pf-m-overflow-menu',
         'bulkSelect': 'pf-m-bulk-select',
@@ -24,7 +27,6 @@ exports.default = {
         'chipGroup': 'pf-m-chip-group',
         'label': 'pf-m-label',
         'pagination': 'pf-m-pagination',
-        'alignRight': 'pf-m-align-right',
         'expanded': 'pf-m-expanded',
         'chipContainer': 'pf-m-chip-container',
         'plain': 'pf-m-plain',

package/css/components/Divider/divider.css

@@ -1,7 +1,121 @@
 .pf-c-divider {
   --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
   --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  height: var(--pf-c-divider--Height);
-  background-color: var(--pf-c-divider--BackgroundColor);
-  border: 0;
-  flex-shrink: 0; }
+  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+  width: 100%;
+  border: 0; }
+  .pf-c-divider::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
+    align-self: stretch;
+    height: var(--pf-c-divider--after--Height);
+    content: "";
+    background-color: var(--pf-c-divider--after--BackgroundColor);
+    justify-self: center; }
+  .pf-c-divider.pf-m-vertical {
+    display: inline-flex;
+    flex-direction: column;
+    width: auto;
+    height: inherit;
+    min-height: 100%;
+    max-height: 100%; }
+    .pf-c-divider.pf-m-vertical::after {
+      flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+      width: var(--pf-c-divider--m-vertical--after--Width); }
+  .pf-c-divider.pf-m-inset-none {
+    --pf-c-divider--after--Inset: 0%; }
+  .pf-c-divider.pf-m-inset-sm {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+  .pf-c-divider.pf-m-inset-md {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+  .pf-c-divider.pf-m-inset-lg {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+  .pf-c-divider.pf-m-inset-xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+  .pf-c-divider.pf-m-inset-2xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+  .pf-c-divider.pf-m-inset-3xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); }
+  @media (min-width: 576px) {
+    .pf-c-divider.pf-m-inset-none-on-sm {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 768px) {
+    .pf-c-divider.pf-m-inset-none-on-md {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 992px) {
+    .pf-c-divider.pf-m-inset-none-on-lg {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 1200px) {
+    .pf-c-divider.pf-m-inset-none-on-xl {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 1450px) {
+    .pf-c-divider.pf-m-inset-none-on-2xl {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }

package/css/components/Divider/divider.d.ts

@@ -1,6 +1,50 @@
 import './divider.css';
 declare const _default: {
     divider: string;
-    modifiers: {};
+    modifiers: {
+        'vertical': string;
+        'insetNone': string;
+        'insetSm': string;
+        'insetMd': string;
+        'insetLg': string;
+        'insetXl': string;
+        'inset_2xl': string;
+        'inset_3xl': string;
+        'insetNoneOnSm': string;
+        'insetSmOnSm': string;
+        'insetMdOnSm': string;
+        'insetLgOnSm': string;
+        'insetXlOnSm': string;
+        'inset_2xlOnSm': string;
+        'inset_3xlOnSm': string;
+        'insetNoneOnMd': string;
+        'insetSmOnMd': string;
+        'insetMdOnMd': string;
+        'insetLgOnMd': string;
+        'insetXlOnMd': string;
+        'inset_2xlOnMd': string;
+        'inset_3xlOnMd': string;
+        'insetNoneOnLg': string;
+        'insetSmOnLg': string;
+        'insetMdOnLg': string;
+        'insetLgOnLg': string;
+        'insetXlOnLg': string;
+        'inset_2xlOnLg': string;
+        'inset_3xlOnLg': string;
+        'insetNoneOnXl': string;
+        'insetSmOnXl': string;
+        'insetMdOnXl': string;
+        'insetLgOnXl': string;
+        'insetXlOnXl': string;
+        'inset_2xlOnXl': string;
+        'inset_3xlOnXl': string;
+        'insetNoneOn_2xl': string;
+        'insetSmOn_2xl': string;
+        'insetMdOn_2xl': string;
+        'insetLgOn_2xl': string;
+        'insetXlOn_2xl': string;
+        'inset_2xlOn_2xl': string;
+        'inset_3xlOn_2xl': string;
+    };
 };
 export default _default;

package/css/components/Divider/divider.js

@@ -3,5 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./divider.css");
 exports.default = {
     divider: 'pf-c-divider',
-    modifiers: {}
+    modifiers: {
+        'vertical': 'pf-m-vertical',
+        'insetNone': 'pf-m-inset-none',
+        'insetSm': 'pf-m-inset-sm',
+        'insetMd': 'pf-m-inset-md',
+        'insetLg': 'pf-m-inset-lg',
+        'insetXl': 'pf-m-inset-xl',
+        'inset_2xl': 'pf-m-inset-2xl',
+        'inset_3xl': 'pf-m-inset-3xl',
+        'insetNoneOnSm': 'pf-m-inset-none-on-sm',
+        'insetSmOnSm': 'pf-m-inset-sm-on-sm',
+        'insetMdOnSm': 'pf-m-inset-md-on-sm',
+        'insetLgOnSm': 'pf-m-inset-lg-on-sm',
+        'insetXlOnSm': 'pf-m-inset-xl-on-sm',
+        'inset_2xlOnSm': 'pf-m-inset-2xl-on-sm',
+        'inset_3xlOnSm': 'pf-m-inset-3xl-on-sm',
+        'insetNoneOnMd': 'pf-m-inset-none-on-md',
+        'insetSmOnMd': 'pf-m-inset-sm-on-md',
+        'insetMdOnMd': 'pf-m-inset-md-on-md',
+        'insetLgOnMd': 'pf-m-inset-lg-on-md',
+        'insetXlOnMd': 'pf-m-inset-xl-on-md',
+        'inset_2xlOnMd': 'pf-m-inset-2xl-on-md',
+        'inset_3xlOnMd': 'pf-m-inset-3xl-on-md',
+        'insetNoneOnLg': 'pf-m-inset-none-on-lg',
+        'insetSmOnLg': 'pf-m-inset-sm-on-lg',
+        'insetMdOnLg': 'pf-m-inset-md-on-lg',
+        'insetLgOnLg': 'pf-m-inset-lg-on-lg',
+        'insetXlOnLg': 'pf-m-inset-xl-on-lg',
+        'inset_2xlOnLg': 'pf-m-inset-2xl-on-lg',
+        'inset_3xlOnLg': 'pf-m-inset-3xl-on-lg',
+        'insetNoneOnXl': 'pf-m-inset-none-on-xl',
+        'insetSmOnXl': 'pf-m-inset-sm-on-xl',
+        'insetMdOnXl': 'pf-m-inset-md-on-xl',
+        'insetLgOnXl': 'pf-m-inset-lg-on-xl',
+        'insetXlOnXl': 'pf-m-inset-xl-on-xl',
+        'inset_2xlOnXl': 'pf-m-inset-2xl-on-xl',
+        'inset_3xlOnXl': 'pf-m-inset-3xl-on-xl',
+        'insetNoneOn_2xl': 'pf-m-inset-none-on-2xl',
+        'insetSmOn_2xl': 'pf-m-inset-sm-on-2xl',
+        'insetMdOn_2xl': 'pf-m-inset-md-on-2xl',
+        'insetLgOn_2xl': 'pf-m-inset-lg-on-2xl',
+        'insetXlOn_2xl': 'pf-m-inset-xl-on-2xl',
+        'inset_2xlOn_2xl': 'pf-m-inset-2xl-on-2xl',
+        'inset_3xlOn_2xl': 'pf-m-inset-3xl-on-2xl'
+    }
 };