@patternfly/patternfly 6.1.0-prerelease.4 → 6.1.0-prerelease.6

package/components/DataList/data-list.css

@@ -503,6 +503,8 @@
   --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -556,6 +558,10 @@
 .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
   font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
 }
+.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
+  padding-block-start: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset));
+}
 .pf-v6-c-data-list.pf-m-drag-over {
   overflow-anchor: none;
 }

package/components/DataList/data-list.scss

@@ -132,6 +132,8 @@
   --#{$data-list}--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --#{$data-list}--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$data-list}--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$data-list}--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
+  --#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
   --#{$data-list}--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -175,6 +177,11 @@
     .#{$data-list}__check {
       font-size: var(--#{$data-list}--m-compact__check--FontSize);
     }
+
+    .#{$data-list}__item-action {
+      padding-block-start: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockStart) - var(--#{$data-list}--m-compact__item-action--PaddingBlockStart--offset));
+      padding-block-end: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd) - var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset));
+    }
   }
 
   &.pf-m-drag-over {

package/components/Table/table.css

@@ -27,7 +27,7 @@
   --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
-  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
   --pf-v6-c-table--cell--MaxWidth: none;
   --pf-v6-c-table--cell--Width: auto;
   --pf-v6-c-table--cell--Overflow: visible;
@@ -41,6 +41,8 @@
   --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
   --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
   --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart));
+  --pf-v6-c-table__text--MinWidth: 100%;
+  --pf-v6-c-table__text--m-truncate--MinWidth: 5ch;
   --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
   --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
   --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -429,11 +431,10 @@
 }
 
 .pf-v6-c-table__text {
-  --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
   display: block;
   width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--text--MinWidth);
+  min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
@@ -443,7 +444,7 @@
 }
 .pf-v6-c-table__text.pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: 100%;
-  --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
+  min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth));
 }
 .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
   overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -496,6 +497,7 @@
 .pf-v6-c-table__button-content .pf-v6-c-table__text,
 .pf-v6-c-table__column-help .pf-v6-c-table__text {
   min-width: auto;
+  max-width: 100%;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content,
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help,

package/components/Table/table.scss

@@ -48,7 +48,7 @@
   --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
 
   // * Table cell - default variables
-  --#{$table}--cell--MinWidth: 0;
+  --#{$table}--cell--MinWidth: calc(var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineEnd));
   --#{$table}--cell--MaxWidth: none;
   --#{$table}--cell--Width: auto;
   --#{$table}--cell--Overflow: visible;
@@ -70,6 +70,8 @@
   --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart));
 
   // * Table truncate
+  --#{$table}__text--MinWidth: 100%;
+  --#{$table}__text--m-truncate--MinWidth: 5ch;
   --#{$table}--m-truncate__text--MinWidth: 5ch;
 
   // * Table cell hidden visible
@@ -602,12 +604,10 @@
 
 // - Table text
 .#{$table}__text {
-  --#{$table}--cell--MaxWidth: 100%;
-
   position: relative;
   display: block;
   width: var(--#{$table}--cell--Width);
-  min-width: var(--#{$table}--text--MinWidth);
+  min-width: var(--#{$table}__text--MinWidth);
   max-width: var(--#{$table}--cell--MaxWidth);
   overflow: var(--#{$table}--cell--Overflow);
   line-height: var(--#{$table}--cell--LineHeight);
@@ -618,7 +618,8 @@
   // Only apply these settings if specifically modified
   &.pf-m-truncate {
     --#{$table}--cell--MinWidth: 100%;
-    --#{$table}--text--MinWidth: var(--#{$table}--m-truncate__text--MinWidth);
+
+    min-width: max(var(--#{$table}__text--m-truncate--MinWidth), var(--#{$table}__text--MinWidth));
 
     > :where(th, td) {
       overflow: var(--#{$table}--cell--Overflow);
@@ -682,6 +683,7 @@
 
   .#{$table}__text {
     min-width: auto;
+    max-width: 100%;
   }
 
   .#{$table} thead:where(.#{$table}__thead).pf-m-nowrap &,

package/components/_index.css

@@ -3728,6 +3728,8 @@ ul) {
   --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -3781,6 +3783,10 @@ ul) {
 .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
   font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
 }
+.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
+  padding-block-start: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset));
+}
 .pf-v6-c-data-list.pf-m-drag-over {
   overflow-anchor: none;
 }
@@ -16202,7 +16208,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
-  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
   --pf-v6-c-table--cell--MaxWidth: none;
   --pf-v6-c-table--cell--Width: auto;
   --pf-v6-c-table--cell--Overflow: visible;
@@ -16216,6 +16222,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
   --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
   --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart));
+  --pf-v6-c-table__text--MinWidth: 100%;
+  --pf-v6-c-table__text--m-truncate--MinWidth: 5ch;
   --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
   --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
   --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -16604,11 +16612,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 
 .pf-v6-c-table__text {
-  --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
   display: block;
   width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--text--MinWidth);
+  min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
@@ -16618,7 +16625,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 .pf-v6-c-table__text.pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: 100%;
-  --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
+  min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth));
 }
 .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
   overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -16671,6 +16678,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table__button-content .pf-v6-c-table__text,
 .pf-v6-c-table__column-help .pf-v6-c-table__text {
   min-width: auto;
+  max-width: 100%;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content,
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help,

package/docs/components/DataList/examples/DataList.md

@@ -573,7 +573,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -637,7 +637,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -702,7 +702,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1115,7 +1115,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1160,7 +1160,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1174,10 +1174,10 @@ When a list item includes more than one block of content, it can be difficult fo
       <div
         class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
       >
-        <button class="pf-v6-c-button pf-m-primary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
           <span class="pf-v6-c-button__text">Primary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
       </div>
@@ -1215,7 +1215,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1229,16 +1229,16 @@ When a list item includes more than one block of content, it can be difficult fo
       <div
         class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
       >
-        <button class="pf-v6-c-button pf-m-primary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
           <span class="pf-v6-c-button__text">Primary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
       </div>
@@ -1321,6 +1321,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
   </li>
 </ul>
+
 <h2 class="Preview__section-title">Flex modifiers - example 2</h2>
 <ul
   class="pf-v6-c-data-list"
@@ -1379,6 +1380,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
   </li>
 </ul>
+
 <h2 class="Preview__section-title">Flex modifiers - example 3</h2>
 <ul
   class="pf-v6-c-data-list"
@@ -1755,7 +1757,7 @@ When a list item includes more than one block of content, it can be difficult fo
   id="draggable-help"
 >Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
 <ul
-  class="pf-v6-c-data-list pf-m-compact"
+  class="pf-v6-c-data-list"
   role="list"
   aria-label="Draggable data list rows"
   id="data-list-draggable"