@patternfly/patternfly 6.1.0-prerelease.3 → 6.1.0-prerelease.5

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/_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;
 }

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"

package/docs/layouts/Level/examples/Level.css

@@ -3,8 +3,7 @@
   flex-wrap: wrap;
   min-height: 160px;
 }
-.ws-core-l-level .pf-v6-l-level__item,
-.ws-core-l-level .pf-v6-l-level {
+.ws-core-l-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Level/examples/Level.md

@@ -10,7 +10,11 @@ cssPrefix: pf-v6-l-level
 
 ```html
 <div class="pf-v6-l-level">
-  <div class="pf-v6-l-level__item">content</div>
+  <div class="pf-v6-l-level__item">
+    content
+    <br />content
+    <br />content
+  </div>
   <div class="pf-v6-l-level__item">content</div>
 </div>
 
@@ -21,7 +25,11 @@ cssPrefix: pf-v6-l-level
 ```html
 <div class="pf-v6-l-level">
   <div class="pf-v6-l-level__item">content</div>
-  <div class="pf-v6-l-level__item">content</div>
+  <div class="pf-v6-l-level__item">
+    content
+    <br />content
+    <br />content
+  </div>
   <div class="pf-v6-l-level__item">content</div>
 </div>
 
@@ -33,7 +41,11 @@ cssPrefix: pf-v6-l-level
 <div class="pf-v6-l-level pf-m-gutter">
   <div class="pf-v6-l-level__item">content with gutter</div>
   <div class="pf-v6-l-level__item">content with gutter</div>
-  <div class="pf-v6-l-level__item">content with gutter</div>
+  <div class="pf-v6-l-level__item">
+    content
+    <br />content
+    <br />content
+  </div>
 </div>
 
 ```

package/docs/layouts/Split/examples/Split.css

@@ -1,5 +1,4 @@
-.ws-core-l-split .pf-v6-l-split,
-.ws-core-l-split .pf-v6-l-split__item {
+.ws-core-l-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Split/examples/Split.md

@@ -54,14 +54,14 @@ cssPrefix: pf-v6-l-split
 
 ### Overview
 
-The split layout is designed to position items horizontally, with one item filling the available horizontal space.
+The split layout is designed to position items horizontally.
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-l-split` | `<div>`, `<section>`, or `<article>` | Initiates the split layout. |
-| `.pf-v6-l-split__item` | `<div>` | Initiates a split item. **Required** |
+| `.pf-v6-l-split` | `*` | Initiates the split layout. |
+| `.pf-v6-l-split__item` | `*` | Initiates a split item. |
 | `.pf-m-gutter` | `.pf-v6-l-split` | Adds space between children by using the globally defined gutter value. |
 | `.pf-m-wrap` | `.pf-v6-l-split` | Sets the split layout to wrap. |
-| `.pf-m-fill` | `.pf-v6-l-split__item` | Specifies which item(s) should fill the avaiable horizontal space. |
+| `.pf-m-fill` | `.pf-v6-l-split > *`, `.pf-v6-l-split__item` | Specifies which item(s) should fill the avaiable horizontal space. |

package/docs/layouts/Stack/examples/Stack.css

@@ -1,5 +1,4 @@
-.ws-core-l-stack .pf-v6-l-stack,
-.ws-core-l-stack .pf-v6-l-stack__item {
+.ws-core-l-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Stack/examples/Stack.md

@@ -32,13 +32,13 @@ cssPrefix: pf-v6-l-stack
 
 ### Overview
 
-The stack layout is designed to position items vertically, with one item filling the available vertical space.
+The stack layout is designed to position items vertically.
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-l-stack` | `<div>`, `<section>`, or `<article>` | Initiates the stack layout. |
-| `.pf-v6-l-stack__item` | `<div>` | Initiates a stack item. **Required**  |
+| `.pf-v6-l-stack` | `*` | Initiates the stack layout.  |
+| `.pf-v6-l-stack__item` | `*` | Initiates a stack item.  |
 | `.pf-m-gutter` | `.pf-v6-l-stack` | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-fill` | `.pf-v6-l-stack__item` | Specifies which item(s) should fill the avaiable vertical space. |
+| `.pf-m-fill` | `.pf-v6-l-stack > *`, `.pf-v6-l-stack__item` | Specifies which item(s) should fill the avaiable vertical space. |

package/layouts/Split/split.css

@@ -10,8 +10,7 @@
 .pf-v6-l-split.pf-m-wrap {
   flex-wrap: wrap;
 }
-
-.pf-v6-l-split__item.pf-m-fill {
+.pf-v6-l-split__item.pf-m-fill, .pf-v6-l-split > .pf-m-fill {
   flex-grow: 1;
 }
 

package/layouts/Split/split.scss

@@ -12,10 +12,11 @@
   &.pf-m-wrap {
     flex-wrap: wrap; // make default in a breaking change release
   }
-}
 
-.#{$split}__item.pf-m-fill {
-  flex-grow: 1;
+  @at-root .#{$split}__item.pf-m-fill,
+  & > .pf-m-fill {
+    flex-grow: 1;
+  }
 }
 
 .#{$split}.pf-m-gutter {

package/layouts/Stack/stack.css

@@ -7,8 +7,7 @@
   flex-direction: column;
   height: 100%;
 }
-
-.pf-v6-l-stack__item.pf-m-fill {
+.pf-v6-l-stack__item.pf-m-fill, .pf-v6-l-stack > .pf-m-fill {
   flex-grow: 1;
 }
 

package/layouts/Stack/stack.scss

@@ -8,10 +8,11 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-}
 
-.#{$stack}__item.pf-m-fill {
-  flex-grow: 1;
+  @at-root .#{$stack}__item.pf-m-fill,
+  & > .pf-m-fill {
+    flex-grow: 1;
+  }
 }
 
 .#{$stack}.pf-m-gutter {

package/layouts/_index.css

@@ -3426,8 +3426,7 @@
 .pf-v6-l-split.pf-m-wrap {
   flex-wrap: wrap;
 }
-
-.pf-v6-l-split__item.pf-m-fill {
+.pf-v6-l-split__item.pf-m-fill, .pf-v6-l-split > .pf-m-fill {
   flex-grow: 1;
 }
 
@@ -3444,8 +3443,7 @@
   flex-direction: column;
   height: 100%;
 }
-
-.pf-v6-l-stack__item.pf-m-fill {
+.pf-v6-l-stack__item.pf-m-fill, .pf-v6-l-stack > .pf-m-fill {
   flex-grow: 1;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.1.0-prerelease.3",
+  "version": "6.1.0-prerelease.5",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -11190,6 +11190,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);
@@ -11243,6 +11245,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;
 }
@@ -33242,8 +33248,7 @@ label.pf-v6-c-tree-view__node-text {
 .pf-v6-l-split.pf-m-wrap {
   flex-wrap: wrap;
 }
-
-.pf-v6-l-split__item.pf-m-fill {
+.pf-v6-l-split__item.pf-m-fill, .pf-v6-l-split > .pf-m-fill {
   flex-grow: 1;
 }
 
@@ -33260,8 +33265,7 @@ label.pf-v6-c-tree-view__node-text {
   flex-direction: column;
   height: 100%;
 }
-
-.pf-v6-l-stack__item.pf-m-fill {
+.pf-v6-l-stack__item.pf-m-fill, .pf-v6-l-stack > .pf-m-fill {
   flex-grow: 1;
 }
 

package/patternfly.css

@@ -11326,6 +11326,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);
@@ -11379,6 +11381,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;
 }
@@ -33378,8 +33384,7 @@ label.pf-v6-c-tree-view__node-text {
 .pf-v6-l-split.pf-m-wrap {
   flex-wrap: wrap;
 }
-
-.pf-v6-l-split__item.pf-m-fill {
+.pf-v6-l-split__item.pf-m-fill, .pf-v6-l-split > .pf-m-fill {
   flex-grow: 1;
 }
 
@@ -33396,8 +33401,7 @@ label.pf-v6-c-tree-view__node-text {
   flex-direction: column;
   height: 100%;
 }
-
-.pf-v6-l-stack__item.pf-m-fill {
+.pf-v6-l-stack__item.pf-m-fill, .pf-v6-l-stack > .pf-m-fill {
   flex-grow: 1;
 }