@patternfly/react-styles 6.0.0-alpha.9 → 6.0.0-prerelease.2

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

@@ -1,27 +1,34 @@
 import './label.css';
 declare const _default: {
-  "button": "pf-v5-c-button",
-  "label": "pf-v5-c-label",
-  "labelActions": "pf-v5-c-label__actions",
-  "labelContent": "pf-v5-c-label__content",
-  "labelIcon": "pf-v5-c-label__icon",
-  "labelText": "pf-v5-c-label__text",
+  "button": "pf-v6-c-button",
+  "label": "pf-v6-c-label",
+  "labelActions": "pf-v6-c-label__actions",
+  "labelContent": "pf-v6-c-label__content",
+  "labelIcon": "pf-v6-c-label__icon",
+  "labelText": "pf-v6-c-label__text",
   "modifiers": {
     "blue": "pf-m-blue",
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "danger": "pf-m-danger",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "compact": "pf-m-compact",
+    "filled": "pf-m-filled",
     "outline": "pf-m-outline",
     "editable": "pf-m-editable",
     "editableActive": "pf-m-editable-active",
-    "add": "pf-m-add",
     "overflow": "pf-m-overflow",
-    "clickable": "pf-m-clickable"
+    "add": "pf-m-add",
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };
 export default _default;

package/css/components/Label/label.js

@@ -2,27 +2,34 @@
 exports.__esModule = true;
 require('./label.css');
 exports.default = {
-  "button": "pf-v5-c-button",
-  "label": "pf-v5-c-label",
-  "labelActions": "pf-v5-c-label__actions",
-  "labelContent": "pf-v5-c-label__content",
-  "labelIcon": "pf-v5-c-label__icon",
-  "labelText": "pf-v5-c-label__text",
+  "button": "pf-v6-c-button",
+  "label": "pf-v6-c-label",
+  "labelActions": "pf-v6-c-label__actions",
+  "labelContent": "pf-v6-c-label__content",
+  "labelIcon": "pf-v6-c-label__icon",
+  "labelText": "pf-v6-c-label__text",
   "modifiers": {
     "blue": "pf-m-blue",
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "danger": "pf-m-danger",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "compact": "pf-m-compact",
+    "filled": "pf-m-filled",
     "outline": "pf-m-outline",
     "editable": "pf-m-editable",
     "editableActive": "pf-m-editable-active",
-    "add": "pf-m-add",
     "overflow": "pf-m-overflow",
-    "clickable": "pf-m-clickable"
+    "add": "pf-m-add",
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/Label/label.mjs

@@ -1,26 +1,33 @@
 import './label.css';
 export default {
-  "button": "pf-v5-c-button",
-  "label": "pf-v5-c-label",
-  "labelActions": "pf-v5-c-label__actions",
-  "labelContent": "pf-v5-c-label__content",
-  "labelIcon": "pf-v5-c-label__icon",
-  "labelText": "pf-v5-c-label__text",
+  "button": "pf-v6-c-button",
+  "label": "pf-v6-c-label",
+  "labelActions": "pf-v6-c-label__actions",
+  "labelContent": "pf-v6-c-label__content",
+  "labelIcon": "pf-v6-c-label__icon",
+  "labelText": "pf-v6-c-label__text",
   "modifiers": {
     "blue": "pf-m-blue",
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "danger": "pf-m-danger",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "compact": "pf-m-compact",
+    "filled": "pf-m-filled",
     "outline": "pf-m-outline",
     "editable": "pf-m-editable",
     "editableActive": "pf-m-editable-active",
-    "add": "pf-m-add",
     "overflow": "pf-m-overflow",
-    "clickable": "pf-m-clickable"
+    "add": "pf-m-add",
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
   }
 };

package/css/components/List/list.css

@@ -1,74 +1,71 @@
-.pf-v5-c-list {
-  --pf-v5-c-list--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-list--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-list--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-list--ul--ListStyle: var(--pf-v5-global--ListStyle);
-  --pf-v5-c-list--li--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
-  --pf-v5-c-list__item-icon--MarginTop: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-list__item-icon--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v5-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
-  --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
-  --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
-  padding-inline-start: var(--pf-v5-c-list--PaddingLeft);
-}
-.pf-v5-c-list ol,
-.pf-v5-c-list ul {
-  margin-block-start: var(--pf-v5-c-list--nested--MarginTop);
-  margin-inline-start: var(--pf-v5-c-list--nested--MarginLeft);
-}
-.pf-v5-c-list li + li {
-  margin-block-start: var(--pf-v5-c-list--li--MarginTop);
-}
-ul.pf-v5-c-list {
-  list-style: var(--pf-v5-c-list--ul--ListStyle);
+:root,
+.pf-v6-c-list {
+  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
+  --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap);
+  --pf-v6-c-list--m-plain--PaddingInlineStart: 0;
+  --pf-v6-c-list--m-inline--PaddingInlineStart: 0;
+  --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-list--m-bordered--li--PaddingBlockStart: var(--pf-v6-c-list--Gap);
+  --pf-v6-c-list--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-list--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
+  --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
+  --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
+  --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
 }
 
-.pf-v5-c-list .pf-v5-c-list__item {
+.pf-v6-c-list {
   display: flex;
+  flex-direction: column;
+  gap: var(--pf-v6-c-list--Gap);
+  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
 }
-.pf-v5-c-list .pf-v5-c-list__item-icon {
-  flex-shrink: 0;
-  min-width: var(--pf-v5-c-list__item-icon--MinWidth);
-  margin-block-start: var(--pf-v5-c-list__item-icon--MarginTop);
-  margin-inline-end: var(--pf-v5-c-list__item-icon--MarginRight);
-  font-size: var(--pf-v5-c-list__item-icon--FontSize);
-  line-height: 1;
-  color: var(--pf-v5-c-list__item-icon--Color);
+.pf-v6-c-list .pf-v6-c-list {
+  padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart);
+}
+ul.pf-v6-c-list {
+  list-style: var(--pf-v6-c-list--ul--ListStyle);
 }
-.pf-v5-c-list.pf-m-icon-lg {
-  --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-c-list--m-icon-lg__item-icon--MinWidth);
-  --pf-v5-c-list__item-icon--MarginTop: 0;
-  --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-c-list--m-icon-lg__item-icon--MarginRight);
-  --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-c-list--m-icon-lg__item-icon--FontSize);
+
+.pf-v6-c-list.pf-m-icon-lg {
+  --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
+  --pf-v6-c-list__item-icon--MarginBlockStart: 0;
+  --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd);
+  --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
 }
-.pf-v5-c-list.pf-m-plain {
-  --pf-v5-c-list--PaddingLeft: 0;
+.pf-v6-c-list.pf-m-plain {
+  --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-plain--PaddingInlineStart);
   list-style: none;
 }
-.pf-v5-c-list.pf-m-inline {
-  --pf-v5-c-list--PaddingLeft: 0;
-  display: flex;
+.pf-v6-c-list.pf-m-inline {
+  --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-inline--PaddingInlineStart);
+  --pf-v6-c-list--Gap: var(--pf-v6-c-list--m-inline--RowGap) var(--pf-v6-c-list--m-inline--ColumnGap);
+  flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
 }
-.pf-v5-c-list.pf-m-inline li {
-  --pf-v5-c-list--li--MarginTop: 0;
-}
-.pf-v5-c-list.pf-m-inline li:not(:last-child) {
-  margin-inline-end: var(--pf-v5-c-list--m-inline--li--MarginRight);
+.pf-v6-c-list.pf-m-bordered > * + * {
+  padding-block-start: var(--pf-v6-c-list--m-bordered--li--PaddingBlockStart);
+  border-block-start: var(--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockStartColor);
 }
-.pf-v5-c-list.pf-m-bordered > * {
-  padding-block-end: var(--pf-v5-c-list--m-bordered--li--PaddingBottom);
-  border-block-end: var(--pf-v5-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-v5-c-list--m-bordered--li--BorderBottomColor);
+
+.pf-v6-c-list__item {
+  display: flex;
 }
-.pf-v5-c-list.pf-m-bordered > :last-child {
-  --pf-v5-c-list--m-bordered--li--PaddingBottom: 0;
-  --pf-v5-c-list--m-bordered--li--BorderBottomWidth: 0;
+
+.pf-v6-c-list__item-icon {
+  flex-shrink: 0;
+  min-width: var(--pf-v6-c-list__item-icon--MinWidth);
+  margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
+  margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
+  font-size: var(--pf-v6-c-list__item-icon--FontSize);
+  line-height: 1;
+  color: var(--pf-v6-c-list__item-icon--Color);
 }

package/css/components/List/list.d.ts

@@ -1,8 +1,8 @@
 import './list.css';
 declare const _default: {
-  "list": "pf-v5-c-list",
-  "listItem": "pf-v5-c-list__item",
-  "listItemIcon": "pf-v5-c-list__item-icon",
+  "list": "pf-v6-c-list",
+  "listItem": "pf-v6-c-list__item",
+  "listItemIcon": "pf-v6-c-list__item-icon",
   "modifiers": {
     "iconLg": "pf-m-icon-lg",
     "plain": "pf-m-plain",

package/css/components/List/list.js

@@ -2,9 +2,9 @@
 exports.__esModule = true;
 require('./list.css');
 exports.default = {
-  "list": "pf-v5-c-list",
-  "listItem": "pf-v5-c-list__item",
-  "listItemIcon": "pf-v5-c-list__item-icon",
+  "list": "pf-v6-c-list",
+  "listItem": "pf-v6-c-list__item",
+  "listItemIcon": "pf-v6-c-list__item-icon",
   "modifiers": {
     "iconLg": "pf-m-icon-lg",
     "plain": "pf-m-plain",

package/css/components/List/list.mjs

@@ -1,8 +1,8 @@
 import './list.css';
 export default {
-  "list": "pf-v5-c-list",
-  "listItem": "pf-v5-c-list__item",
-  "listItemIcon": "pf-v5-c-list__item-icon",
+  "list": "pf-v6-c-list",
+  "listItem": "pf-v6-c-list__item",
+  "listItemIcon": "pf-v6-c-list__item-icon",
   "modifiers": {
     "iconLg": "pf-m-icon-lg",
     "plain": "pf-m-plain",