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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/DataList/data-list.css +6 -0
  2. package/components/DataList/data-list.scss +7 -0
  3. package/components/_index.css +6 -0
  4. package/docs/components/DataList/examples/DataList.md +15 -13
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +6 -0
  7. package/patternfly.css +6 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -503,6 +503,8 @@
503
503
  --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
504
504
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
505
505
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
506
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
507
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
506
508
  --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
507
509
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
508
510
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -556,6 +558,10 @@
556
558
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
557
559
  font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
558
560
  }
561
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
562
+ 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));
563
+ 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));
564
+ }
559
565
  .pf-v6-c-data-list.pf-m-drag-over {
560
566
  overflow-anchor: none;
561
567
  }
package/components/DataList/data-list.scss CHANGED
@@ -132,6 +132,8 @@
132
132
  --#{$data-list}--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
133
133
  --#{$data-list}--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
134
134
  --#{$data-list}--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
135
+ --#{$data-list}--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
136
+ --#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
135
137
  --#{$data-list}--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
136
138
  --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
137
139
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -175,6 +177,11 @@
175
177
  .#{$data-list}__check {
176
178
  font-size: var(--#{$data-list}--m-compact__check--FontSize);
177
179
  }
180
+
181
+ .#{$data-list}__item-action {
182
+ padding-block-start: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockStart) - var(--#{$data-list}--m-compact__item-action--PaddingBlockStart--offset));
183
+ padding-block-end: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd) - var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset));
184
+ }
178
185
  }
179
186
 
180
187
  &.pf-m-drag-over {
package/components/_index.css CHANGED
@@ -3728,6 +3728,8 @@ ul) {
3728
3728
  --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
3729
3729
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3730
3730
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3731
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
3732
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
3731
3733
  --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
3732
3734
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3733
3735
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -3781,6 +3783,10 @@ ul) {
3781
3783
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
3782
3784
  font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
3783
3785
  }
3786
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
3787
+ 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));
3788
+ 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));
3789
+ }
3784
3790
  .pf-v6-c-data-list.pf-m-drag-over {
3785
3791
  overflow-anchor: none;
3786
3792
  }
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -573,7 +573,7 @@ When a list item includes more than one block of content, it can be difficult fo
573
573
  </div>
574
574
  <div class="pf-v6-c-data-list__item-action">
575
575
  <button
576
- class="pf-v6-c-menu-toggle pf-m-plain"
576
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
577
577
  type="button"
578
578
  aria-expanded="false"
579
579
  aria-label="Menu toggle"
@@ -637,7 +637,7 @@ When a list item includes more than one block of content, it can be difficult fo
637
637
  </div>
638
638
  <div class="pf-v6-c-data-list__item-action">
639
639
  <button
640
- class="pf-v6-c-menu-toggle pf-m-plain"
640
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
641
641
  type="button"
642
642
  aria-expanded="false"
643
643
  aria-label="Menu toggle"
@@ -702,7 +702,7 @@ When a list item includes more than one block of content, it can be difficult fo
702
702
  </div>
703
703
  <div class="pf-v6-c-data-list__item-action">
704
704
  <button
705
- class="pf-v6-c-menu-toggle pf-m-plain"
705
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
706
706
  type="button"
707
707
  aria-expanded="false"
708
708
  aria-label="Menu toggle"
@@ -1115,7 +1115,7 @@ When a list item includes more than one block of content, it can be difficult fo
1115
1115
  </div>
1116
1116
  <div class="pf-v6-c-data-list__item-action">
1117
1117
  <button
1118
- class="pf-v6-c-menu-toggle pf-m-plain"
1118
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1119
1119
  type="button"
1120
1120
  aria-expanded="false"
1121
1121
  aria-label="Menu toggle"
@@ -1160,7 +1160,7 @@ When a list item includes more than one block of content, it can be difficult fo
1160
1160
  </div>
1161
1161
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1162
1162
  <button
1163
- class="pf-v6-c-menu-toggle pf-m-plain"
1163
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1164
1164
  type="button"
1165
1165
  aria-expanded="false"
1166
1166
  aria-label="Menu toggle"
@@ -1174,10 +1174,10 @@ When a list item includes more than one block of content, it can be difficult fo
1174
1174
  <div
1175
1175
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
1176
1176
  >
1177
- <button class="pf-v6-c-button pf-m-primary" type="button">
1177
+ <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
1178
1178
  <span class="pf-v6-c-button__text">Primary</span>
1179
1179
  </button>
1180
- <button class="pf-v6-c-button pf-m-secondary" type="button">
1180
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
1181
1181
  <span class="pf-v6-c-button__text">Secondary</span>
1182
1182
  </button>
1183
1183
  </div>
@@ -1215,7 +1215,7 @@ When a list item includes more than one block of content, it can be difficult fo
1215
1215
  </div>
1216
1216
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1217
1217
  <button
1218
- class="pf-v6-c-menu-toggle pf-m-plain"
1218
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
1219
1219
  type="button"
1220
1220
  aria-expanded="false"
1221
1221
  aria-label="Menu toggle"
@@ -1229,16 +1229,16 @@ When a list item includes more than one block of content, it can be difficult fo
1229
1229
  <div
1230
1230
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
1231
1231
  >
1232
- <button class="pf-v6-c-button pf-m-primary" type="button">
1232
+ <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
1233
1233
  <span class="pf-v6-c-button__text">Primary</span>
1234
1234
  </button>
1235
- <button class="pf-v6-c-button pf-m-secondary" type="button">
1235
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
1236
1236
  <span class="pf-v6-c-button__text">Secondary</span>
1237
1237
  </button>
1238
- <button class="pf-v6-c-button pf-m-secondary" type="button">
1238
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
1239
1239
  <span class="pf-v6-c-button__text">Secondary</span>
1240
1240
  </button>
1241
- <button class="pf-v6-c-button pf-m-secondary" type="button">
1241
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
1242
1242
  <span class="pf-v6-c-button__text">Secondary</span>
1243
1243
  </button>
1244
1244
  </div>
@@ -1321,6 +1321,7 @@ When a list item includes more than one block of content, it can be difficult fo
1321
1321
  </div>
1322
1322
  </li>
1323
1323
  </ul>
1324
+
1324
1325
  <h2 class="Preview__section-title">Flex modifiers - example 2</h2>
1325
1326
  <ul
1326
1327
  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
1379
1380
  </div>
1380
1381
  </li>
1381
1382
  </ul>
1383
+
1382
1384
  <h2 class="Preview__section-title">Flex modifiers - example 3</h2>
1383
1385
  <ul
1384
1386
  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
1755
1757
  id="draggable-help"
1756
1758
  >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>
1757
1759
  <ul
1758
- class="pf-v6-c-data-list pf-m-compact"
1760
+ class="pf-v6-c-data-list"
1759
1761
  role="list"
1760
1762
  aria-label="Draggable data list rows"
1761
1763
  id="data-list-draggable"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.1.0-prerelease.4",
4
+ "version": "6.1.0-prerelease.5",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11190,6 +11190,8 @@ ul) {
11190
11190
  --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
11191
11191
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11192
11192
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11193
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
11194
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
11193
11195
  --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
11194
11196
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11195
11197
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -11243,6 +11245,10 @@ ul) {
11243
11245
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
11244
11246
  font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
11245
11247
  }
11248
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
11249
+ 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));
11250
+ 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));
11251
+ }
11246
11252
  .pf-v6-c-data-list.pf-m-drag-over {
11247
11253
  overflow-anchor: none;
11248
11254
  }
package/patternfly.css CHANGED
@@ -11326,6 +11326,8 @@ ul) {
11326
11326
  --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
11327
11327
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11328
11328
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11329
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
11330
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
11329
11331
  --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
11330
11332
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11331
11333
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -11379,6 +11381,10 @@ ul) {
11379
11381
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
11380
11382
  font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
11381
11383
  }
11384
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
11385
+ 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));
11386
+ 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));
11387
+ }
11382
11388
  .pf-v6-c-data-list.pf-m-drag-over {
11383
11389
  overflow-anchor: none;
11384
11390
  }