@patternfly/patternfly 6.6.0-prerelease.34 → 6.6.0-prerelease.35

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 (11) hide show
  1. package/components/DataList/data-list.css +11 -9
  2. package/components/DataList/data-list.scss +7 -5
  3. package/components/_index.css +11 -9
  4. package/docs/components/DataList/examples/DataList.md +129 -126
  5. package/docs/demos/DataList/examples/DataList.md +27 -27
  6. package/docs/demos/Table/examples/Table.md +15 -15
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +11 -9
  9. package/patternfly.css +11 -9
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -470,7 +470,7 @@
470
470
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
471
471
  --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
472
472
  --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
473
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
473
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
474
474
  --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
475
475
  --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
476
476
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -485,7 +485,7 @@
485
485
  --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
486
486
  --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
487
487
  --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
488
- --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
488
+ --pf-v6-c-data-list__check--MarginBlockStart: 0;
489
489
  --pf-v6-c-data-list__item-action--Display: flex;
490
490
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
491
491
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -528,7 +528,7 @@
528
528
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
529
529
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
530
530
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
531
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
531
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
532
532
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
533
533
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
534
534
  }
@@ -658,9 +658,10 @@
658
658
  cursor: pointer;
659
659
  }
660
660
 
661
- .pf-v6-c-data-list__item-draggable-button {
661
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain {
662
662
  display: flex;
663
663
  flex-direction: column;
664
+ justify-content: start;
664
665
  padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
665
666
  padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
666
667
  padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
@@ -668,24 +669,25 @@
668
669
  margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
669
670
  margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
670
671
  margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
672
+ line-height: 1lh;
671
673
  background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
672
674
  border: 0;
673
675
  }
674
- .pf-v6-c-data-list__item-draggable-button:hover {
676
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:hover {
675
677
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
676
678
  cursor: grab;
677
679
  }
678
- .pf-v6-c-data-list__item-draggable-button:focus {
680
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:focus {
679
681
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
680
682
  }
681
- .pf-v6-c-data-list__item-draggable-button:active {
683
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:active {
682
684
  cursor: grabbing;
683
685
  }
684
- .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
686
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:is(:disabled, .pf-m-disabled) {
685
687
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
686
688
  pointer-events: none;
687
689
  }
688
- .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
690
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain .pf-v6-c-data-list__item-draggable-icon {
689
691
  color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
690
692
  }
691
693
 
package/components/DataList/data-list.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  --#{$data-list}__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
74
74
  --#{$data-list}__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
75
75
  --#{$data-list}__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
76
- --#{$data-list}__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
76
+ --#{$data-list}__item-draggable-button--PaddingBlockStart: var(--#{$data-list}__cell--PaddingBlockStart);
77
77
  --#{$data-list}__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
78
78
  --#{$data-list}__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
79
79
  --#{$data-list}__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -92,7 +92,7 @@
92
92
 
93
93
  // check
94
94
  --#{$data-list}__check--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
95
- --#{$data-list}__check--MarginBlockStart: #{pf-size-prem(-1px)}; // slightly offset input
95
+ --#{$data-list}__check--MarginBlockStart: 0;
96
96
 
97
97
  // actions
98
98
  --#{$data-list}__item-action--Display: flex;
@@ -141,7 +141,7 @@
141
141
  --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
142
142
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
143
143
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
144
- --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
144
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--#{$data-list}--m-compact__cell--PaddingBlockStart);
145
145
  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
146
146
  --#{$data-list}--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
147
147
  }
@@ -288,9 +288,10 @@
288
288
  }
289
289
  }
290
290
 
291
- .#{$data-list}__item-draggable-button {
291
+ .#{$data-list}__item-draggable-button.#{$button}.pf-m-plain {
292
292
  display: flex;
293
293
  flex-direction: column; // fixes safari alignment
294
+ justify-content: start;
294
295
  padding-block-start: var(--#{$data-list}__item-draggable-button--PaddingBlockStart);
295
296
  padding-block-end: var(--#{$data-list}__item-draggable-button--PaddingBlockEnd);
296
297
  padding-inline-start: var(--#{$data-list}__item-draggable-button--PaddingInlineStart);
@@ -298,6 +299,7 @@
298
299
  margin-block-start: var(--#{$data-list}__item-draggable-button--MarginBlockStart);
299
300
  margin-block-end: var(--#{$data-list}__item-draggable-button--MarginBlockEnd);
300
301
  margin-inline-start: var(--#{$data-list}__item-draggable-button--MarginInlineStart);
302
+ line-height: 1lh; // inherit line height from parent, fixes compact alignment
301
303
  background-color: var(--#{$data-list}__item-draggable-button--BackgroundColor);
302
304
  border: 0;
303
305
 
@@ -315,7 +317,7 @@
315
317
  cursor: grabbing;
316
318
  }
317
319
 
318
- &.pf-m-disabled {
320
+ &:is(:disabled, .pf-m-disabled) {
319
321
  --#{$data-list}__item-draggable-button-icon--Color: var(--#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color);
320
322
 
321
323
  pointer-events: none;
package/components/_index.css CHANGED
@@ -5051,7 +5051,7 @@ ul) {
5051
5051
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
5052
5052
  --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
5053
5053
  --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
5054
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
5054
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
5055
5055
  --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
5056
5056
  --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
5057
5057
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -5066,7 +5066,7 @@ ul) {
5066
5066
  --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
5067
5067
  --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
5068
5068
  --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
5069
- --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
5069
+ --pf-v6-c-data-list__check--MarginBlockStart: 0;
5070
5070
  --pf-v6-c-data-list__item-action--Display: flex;
5071
5071
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
5072
5072
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -5109,7 +5109,7 @@ ul) {
5109
5109
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5110
5110
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
5111
5111
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
5112
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
5112
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
5113
5113
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
5114
5114
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5115
5115
  }
@@ -5239,9 +5239,10 @@ ul) {
5239
5239
  cursor: pointer;
5240
5240
  }
5241
5241
 
5242
- .pf-v6-c-data-list__item-draggable-button {
5242
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain {
5243
5243
  display: flex;
5244
5244
  flex-direction: column;
5245
+ justify-content: start;
5245
5246
  padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
5246
5247
  padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
5247
5248
  padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
@@ -5249,24 +5250,25 @@ ul) {
5249
5250
  margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
5250
5251
  margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
5251
5252
  margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
5253
+ line-height: 1lh;
5252
5254
  background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
5253
5255
  border: 0;
5254
5256
  }
5255
- .pf-v6-c-data-list__item-draggable-button:hover {
5257
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:hover {
5256
5258
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5257
5259
  cursor: grab;
5258
5260
  }
5259
- .pf-v6-c-data-list__item-draggable-button:focus {
5261
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:focus {
5260
5262
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5261
5263
  }
5262
- .pf-v6-c-data-list__item-draggable-button:active {
5264
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:active {
5263
5265
  cursor: grabbing;
5264
5266
  }
5265
- .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
5267
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:is(:disabled, .pf-m-disabled) {
5266
5268
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5267
5269
  pointer-events: none;
5268
5270
  }
5269
- .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
5271
+ .pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain .pf-v6-c-data-list__item-draggable-icon {
5270
5272
  color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
5271
5273
  }
5272
5274