@patternfly/patternfly 6.0.0-alpha.153 → 6.0.0-alpha.155

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 (13) hide show
  1. package/components/ActionList/action-list.css +4 -4
  2. package/components/ActionList/action-list.scss +4 -4
  3. package/components/Card/card.css +11 -1
  4. package/components/Card/card.scss +14 -2
  5. package/components/Truncate/truncate.css +1 -1
  6. package/components/Truncate/truncate.scss +1 -1
  7. package/components/_index.css +16 -6
  8. package/docs/components/Truncate/examples/Truncate.css +0 -1
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +16 -6
  11. package/patternfly.css +16 -6
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/ActionList/action-list.css CHANGED
@@ -1,8 +1,8 @@
1
1
  :where(:root, .pf-v6-c-action-list) {
2
- --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
4
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
5
- --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
2
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
4
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
5
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
6
6
  }
7
7
 
8
8
  .pf-v6-c-action-list,
package/components/ActionList/action-list.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$action-list}) {
4
- --#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
5
- --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
4
+ --#{$action-list}--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
5
+ --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
6
6
 
7
7
  // * Action list group
8
- --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--md);
8
+ --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9
9
 
10
10
  // * Action list icons
11
- --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
11
+ --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12
12
  }
13
13
 
14
14
  // - Action list - Action list group
package/components/Card/card.css CHANGED
@@ -77,14 +77,24 @@
77
77
  flex-direction: column;
78
78
  overflow: auto;
79
79
  background-color: var(--pf-v6-c-card--BackgroundColor);
80
- border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
80
+ border: 0;
81
81
  border-radius: var(--pf-v6-c-card--BorderRadius);
82
82
  }
83
+ .pf-v6-c-card::before {
84
+ position: absolute;
85
+ inset: 0;
86
+ pointer-events: none;
87
+ content: "";
88
+ border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
89
+ border-radius: inherit;
90
+ }
83
91
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
84
92
  gap: 0;
85
93
  }
86
94
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
87
95
  isolation: isolate;
96
+ }
97
+ .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
88
98
  border: none;
89
99
  }
90
100
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
package/components/Card/card.scss CHANGED
@@ -108,9 +108,18 @@
108
108
  flex-direction: column;
109
109
  overflow: auto;
110
110
  background-color: var(--#{$card}--BackgroundColor);
111
- border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
111
+ border: 0;
112
112
  border-radius: var(--#{$card}--BorderRadius);
113
113
 
114
+ &::before {
115
+ position: absolute;
116
+ inset: 0;
117
+ pointer-events: none;
118
+ content: "";
119
+ border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
120
+ border-radius: inherit;
121
+ }
122
+
114
123
  // SELECTABLE CARDS
115
124
  &.pf-m-selectable {
116
125
  // disables the gap since these have an empty label
@@ -123,7 +132,10 @@
123
132
  &.pf-m-selectable,
124
133
  &.pf-m-clickable {
125
134
  isolation: isolate;
126
- border: none; // border will come from the input's ::before instead of the card so remove this so there's isn't a double border
135
+
136
+ &::before {
137
+ border: none; // border will come from the input's ::before instead of the card so remove this so there's isn't a double border
138
+ }
127
139
  }
128
140
 
129
141
  // stylelint-disable selector-max-class
package/components/Truncate/truncate.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-c-truncate) {
2
- --pf-v6-c-truncate--MinWidth: 12ch;
2
+ --pf-v6-c-truncate--MinWidth: 6ch;
3
3
  --pf-v6-c-truncate__start--MinWidth: 6ch;
4
4
  }
5
5
 
package/components/Truncate/truncate.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$truncate}) {
4
- --#{$truncate}--MinWidth: 12ch;
4
+ --#{$truncate}--MinWidth: 6ch;
5
5
  --#{$truncate}__start--MinWidth: 6ch;
6
6
  }
7
7
 
package/components/_index.css CHANGED
@@ -346,10 +346,10 @@
346
346
  }
347
347
 
348
348
  :where(:root, .pf-v6-c-action-list) {
349
- --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
350
- --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
351
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
352
- --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
349
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
350
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
351
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
352
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
353
353
  }
354
354
 
355
355
  .pf-v6-c-action-list,
@@ -2206,14 +2206,24 @@ button.pf-v6-c-breadcrumb__link {
2206
2206
  flex-direction: column;
2207
2207
  overflow: auto;
2208
2208
  background-color: var(--pf-v6-c-card--BackgroundColor);
2209
- border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
2209
+ border: 0;
2210
2210
  border-radius: var(--pf-v6-c-card--BorderRadius);
2211
2211
  }
2212
+ .pf-v6-c-card::before {
2213
+ position: absolute;
2214
+ inset: 0;
2215
+ pointer-events: none;
2216
+ content: "";
2217
+ border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
2218
+ border-radius: inherit;
2219
+ }
2212
2220
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
2213
2221
  gap: 0;
2214
2222
  }
2215
2223
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
2216
2224
  isolation: isolate;
2225
+ }
2226
+ .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
2217
2227
  border: none;
2218
2228
  }
2219
2229
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
@@ -22540,7 +22550,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22540
22550
  }
22541
22551
 
22542
22552
  :where(:root, .pf-v6-c-truncate) {
22543
- --pf-v6-c-truncate--MinWidth: 12ch;
22553
+ --pf-v6-c-truncate--MinWidth: 6ch;
22544
22554
  --pf-v6-c-truncate__start--MinWidth: 6ch;
22545
22555
  }
22546
22556
 
package/docs/components/Truncate/examples/Truncate.css CHANGED
@@ -2,7 +2,6 @@
2
2
  width: 320px;
3
3
  resize: horizontal;
4
4
  overflow: auto;
5
- min-width: 161px;
6
5
  max-width: 100%;
7
6
  padding: var(--pf-t--global--spacer--sm);
8
7
  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
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.0.0-alpha.153",
4
+ "version": "6.0.0-alpha.155",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -6366,10 +6366,10 @@
6366
6366
  }
6367
6367
 
6368
6368
  :where(:root, .pf-v6-c-action-list) {
6369
- --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
6370
- --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
6371
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
6372
- --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
6369
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
6370
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
6371
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
6372
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
6373
6373
  }
6374
6374
 
6375
6375
  .pf-v6-c-action-list,
@@ -8226,14 +8226,24 @@ button.pf-v6-c-breadcrumb__link {
8226
8226
  flex-direction: column;
8227
8227
  overflow: auto;
8228
8228
  background-color: var(--pf-v6-c-card--BackgroundColor);
8229
- border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
8229
+ border: 0;
8230
8230
  border-radius: var(--pf-v6-c-card--BorderRadius);
8231
8231
  }
8232
+ .pf-v6-c-card::before {
8233
+ position: absolute;
8234
+ inset: 0;
8235
+ pointer-events: none;
8236
+ content: "";
8237
+ border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
8238
+ border-radius: inherit;
8239
+ }
8232
8240
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
8233
8241
  gap: 0;
8234
8242
  }
8235
8243
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
8236
8244
  isolation: isolate;
8245
+ }
8246
+ .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
8237
8247
  border: none;
8238
8248
  }
8239
8249
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
@@ -28560,7 +28570,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28560
28570
  }
28561
28571
 
28562
28572
  :where(:root, .pf-v6-c-truncate) {
28563
- --pf-v6-c-truncate--MinWidth: 12ch;
28573
+ --pf-v6-c-truncate--MinWidth: 6ch;
28564
28574
  --pf-v6-c-truncate__start--MinWidth: 6ch;
28565
28575
  }
28566
28576
 
package/patternfly.css CHANGED
@@ -6487,10 +6487,10 @@ button) {
6487
6487
  }
6488
6488
 
6489
6489
  :where(:root, .pf-v6-c-action-list) {
6490
- --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
6491
- --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
6492
- --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
6493
- --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
6490
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
6491
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
6492
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
6493
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
6494
6494
  }
6495
6495
 
6496
6496
  .pf-v6-c-action-list,
@@ -8347,14 +8347,24 @@ button.pf-v6-c-breadcrumb__link {
8347
8347
  flex-direction: column;
8348
8348
  overflow: auto;
8349
8349
  background-color: var(--pf-v6-c-card--BackgroundColor);
8350
- border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
8350
+ border: 0;
8351
8351
  border-radius: var(--pf-v6-c-card--BorderRadius);
8352
8352
  }
8353
+ .pf-v6-c-card::before {
8354
+ position: absolute;
8355
+ inset: 0;
8356
+ pointer-events: none;
8357
+ content: "";
8358
+ border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
8359
+ border-radius: inherit;
8360
+ }
8353
8361
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
8354
8362
  gap: 0;
8355
8363
  }
8356
8364
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
8357
8365
  isolation: isolate;
8366
+ }
8367
+ .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
8358
8368
  border: none;
8359
8369
  }
8360
8370
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
@@ -28681,7 +28691,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28681
28691
  }
28682
28692
 
28683
28693
  :where(:root, .pf-v6-c-truncate) {
28684
- --pf-v6-c-truncate--MinWidth: 12ch;
28694
+ --pf-v6-c-truncate--MinWidth: 6ch;
28685
28695
  --pf-v6-c-truncate__start--MinWidth: 6ch;
28686
28696
  }
28687
28697