@patternfly/patternfly 6.0.0-alpha.156 → 6.0.0-alpha.158

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 (12) hide show
  1. package/components/Menu/menu.css +11 -0
  2. package/components/Menu/menu.scss +13 -0
  3. package/components/TextInputGroup/text-input-group.css +20 -18
  4. package/components/TextInputGroup/text-input-group.scss +23 -22
  5. package/components/_index.css +31 -18
  6. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +31 -18
  10. package/patternfly.css +31 -18
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
13
13
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
14
14
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
16
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15
17
  --pf-v6-c-menu--m-plain--BoxShadow: none;
16
18
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
17
19
  --pf-v6-c-menu__content--Height: auto;
@@ -25,6 +27,9 @@
25
27
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
26
28
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
27
29
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
30
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
31
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
28
33
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
29
34
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
30
35
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -195,6 +200,8 @@
195
200
  background-color: var(--pf-v6-c-menu--BackgroundColor);
196
201
  border-radius: var(--pf-v6-c-menu--BorderRadius);
197
202
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
203
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
204
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
198
205
  }
199
206
  .pf-v6-c-menu .pf-v6-c-menu {
200
207
  min-width: 100%;
@@ -366,6 +373,9 @@
366
373
  .pf-v6-c-menu__list-item {
367
374
  align-items: baseline;
368
375
  min-width: 0;
376
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
377
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
378
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
369
379
  }
370
380
  .pf-v6-c-menu__list-item > * {
371
381
  position: relative;
@@ -375,6 +385,7 @@
375
385
  inset: 0;
376
386
  content: "";
377
387
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
388
+ transition: inherit;
378
389
  }
379
390
  .pf-v6-c-menu__list-item.pf-m-load {
380
391
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
package/components/Menu/menu.scss CHANGED
@@ -15,6 +15,8 @@
15
15
  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
16
16
  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17
17
  --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
18
+ --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19
+ --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
20
 
19
21
  // * Menu plain
20
22
  --#{$menu}--m-plain--BoxShadow: none;
@@ -38,6 +40,9 @@
38
40
  // * Menu list item
39
41
  --#{$menu}__list-item--Color: var(--pf-t--global--text--color--regular);
40
42
  --#{$menu}__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
43
+ --#{$menu}__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
44
+ --#{$menu}__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
45
+ --#{$menu}__list-item--TransitionProperty: background-color;
41
46
  --#{$menu}__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
42
47
  --#{$menu}__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
43
48
  --#{$menu}__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -200,6 +205,10 @@
200
205
  background-color: var(--#{$menu}--BackgroundColor);
201
206
  border-radius: var(--#{$menu}--BorderRadius);
202
207
  box-shadow: var(--#{$menu}--BoxShadow);
208
+ // stylelint-disable declaration-no-important
209
+ transition-timing-function: var(--#{$menu}--TransitionTimingFunction) !important; // Note that this timing function is overriding the default that Popper is using
210
+ transition-duration: var(--#{$menu}--TransitionDuration) !important; // Note that this duration is overriding whatever value is supplied as a prop to Popper
211
+ // stylelint-enable declaration-no-important
203
212
 
204
213
  .#{$menu} {
205
214
  min-width: 100%;
@@ -437,6 +446,9 @@
437
446
  .#{$menu}__list-item {
438
447
  align-items: baseline;
439
448
  min-width: 0; // allow list item to shrink for text overflow
449
+ transition-timing-function: var(--#{$menu}__list-item--TransitionTimingFunction);
450
+ transition-duration: var(--#{$menu}__list-item--TransitionDuration);
451
+ transition-property: var(--#{$menu}__list-item--TransitionProperty);
440
452
 
441
453
  > * {
442
454
  position: relative;
@@ -447,6 +459,7 @@
447
459
  inset: 0;
448
460
  content: "";
449
461
  background-color: var(--#{$menu}__list-item--BackgroundColor);
462
+ transition: inherit;
450
463
  }
451
464
 
452
465
  // - Menu item load
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -2,15 +2,19 @@
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
4
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
5
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
6
5
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
7
6
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
8
7
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9
8
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
10
9
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
11
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
12
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
11
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
12
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
13
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
14
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
15
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
14
18
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15
19
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
20
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -36,15 +40,6 @@
36
40
  width: 100%;
37
41
  color: var(--pf-v6-c-text-input-group--Color, inherit);
38
42
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
39
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
40
- }
41
- .pf-v6-c-text-input-group::before {
42
- position: absolute;
43
- inset: 0;
44
- pointer-events: none;
45
- content: "";
46
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
47
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
48
43
  }
49
44
  .pf-v6-c-text-input-group:hover {
50
45
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -58,7 +53,7 @@
58
53
  .pf-v6-c-text-input-group.pf-m-plain {
59
54
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
60
55
  }
61
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
56
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
62
57
  border: 0;
63
58
  }
64
59
 
@@ -73,12 +68,14 @@
73
68
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
74
69
  }
75
70
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
71
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
72
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
76
73
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
77
74
  }
78
75
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
79
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
80
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
81
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
76
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
77
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
78
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
82
79
  }
83
80
 
84
81
  .pf-v6-c-text-input-group__text {
@@ -87,11 +84,16 @@
87
84
  grid-template-areas: "text-input";
88
85
  grid-template-columns: 1fr;
89
86
  }
90
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
87
+ .pf-v6-c-text-input-group__text::before {
91
88
  position: absolute;
92
89
  inset: 0;
93
90
  pointer-events: none;
94
91
  content: "";
92
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
93
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
94
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
95
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
96
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
95
97
  }
96
98
 
97
99
  .pf-v6-c-text-input-group__icon {
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
5
  --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
6
6
  --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
7
- --#{$text-input-group}--BorderRadius: var(--pf-t--global--border--radius--small);
8
7
 
9
8
  // Border hover
10
9
  --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -15,10 +14,17 @@
15
14
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
16
15
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
17
16
 
18
- // Chip group
19
- --#{$text-input-group}--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
20
- --#{$text-input-group}--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
21
- --#{$text-input-group}--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17
+ // Text wrapper
18
+ --#{$text-input-group}__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19
+ --#{$text-input-group}__text--BorderStartStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
20
+ --#{$text-input-group}__text--BorderStartEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
21
+ --#{$text-input-group}__text--BorderEndEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
22
+ --#{$text-input-group}__text--BorderEndStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
23
+
24
+ // Label group
25
+ --#{$text-input-group}--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
+ --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
27
+ --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
22
28
 
23
29
  // Text input
24
30
  --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -52,16 +58,6 @@
52
58
  width: 100%; // when child of flex layout, take up space
53
59
  color: var(--#{$text-input-group}--Color, inherit);
54
60
  background-color: var(--#{$text-input-group}--BackgroundColor);
55
- border-radius: var(--#{$text-input-group}--BorderRadius);
56
-
57
- &::before {
58
- position: absolute;
59
- inset: 0;
60
- pointer-events: none;
61
- content: "";
62
- border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
63
- border-radius: var(--#{$text-input-group}--BorderRadius);
64
- }
65
61
 
66
62
  &:hover {
67
63
  --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
@@ -79,8 +75,7 @@
79
75
  --#{$text-input-group}--BackgroundColor: transparent;
80
76
 
81
77
  .#{$text-input-group}__text {
82
- &::before,
83
- &::after {
78
+ &::before {
84
79
  border: 0;
85
80
  }
86
81
  }
@@ -99,13 +94,15 @@
99
94
  }
100
95
 
101
96
  > :first-child:not(.#{$text-input-group}__text) {
97
+ padding-block-start: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockStart);
98
+ padding-block-end: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockEnd);
102
99
  margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
103
100
  }
104
101
 
105
102
  .#{$label-group}__main {
106
- padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockStart);
107
- padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockEnd);
108
- padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingInlineEnd);
103
+ padding-block-start: var(--#{$text-input-group}--c-label-group__main--PaddingBlockStart);
104
+ padding-block-end: var(--#{$text-input-group}--c-label-group__main--PaddingBlockEnd);
105
+ padding-inline-end: var(--#{$text-input-group}--c-label-group__main--PaddingInlineEnd);
109
106
  }
110
107
  }
111
108
 
@@ -115,12 +112,16 @@
115
112
  grid-template-areas: "text-input";
116
113
  grid-template-columns: 1fr;
117
114
 
118
- &::before,
119
- &::after {
115
+ &::before {
120
116
  position: absolute;
121
117
  inset: 0;
122
118
  pointer-events: none;
123
119
  content: "";
120
+ border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
121
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
122
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
123
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
124
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
124
125
  }
125
126
  }
126
127
 
package/components/_index.css CHANGED
@@ -9394,6 +9394,8 @@ ul.pf-v6-c-list {
9394
9394
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9395
9395
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9396
9396
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9397
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9398
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9397
9399
  --pf-v6-c-menu--m-plain--BoxShadow: none;
9398
9400
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
9399
9401
  --pf-v6-c-menu__content--Height: auto;
@@ -9407,6 +9409,9 @@ ul.pf-v6-c-list {
9407
9409
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
9408
9410
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
9409
9411
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9412
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
9413
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9414
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
9410
9415
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
9411
9416
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
9412
9417
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -9577,6 +9582,8 @@ ul.pf-v6-c-list {
9577
9582
  background-color: var(--pf-v6-c-menu--BackgroundColor);
9578
9583
  border-radius: var(--pf-v6-c-menu--BorderRadius);
9579
9584
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
9585
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
9586
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
9580
9587
  }
9581
9588
  .pf-v6-c-menu .pf-v6-c-menu {
9582
9589
  min-width: 100%;
@@ -9748,6 +9755,9 @@ ul.pf-v6-c-list {
9748
9755
  .pf-v6-c-menu__list-item {
9749
9756
  align-items: baseline;
9750
9757
  min-width: 0;
9758
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
9759
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
9760
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
9751
9761
  }
9752
9762
  .pf-v6-c-menu__list-item > * {
9753
9763
  position: relative;
@@ -9757,6 +9767,7 @@ ul.pf-v6-c-list {
9757
9767
  inset: 0;
9758
9768
  content: "";
9759
9769
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
9770
+ transition: inherit;
9760
9771
  }
9761
9772
  .pf-v6-c-menu__list-item.pf-m-load {
9762
9773
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
@@ -19004,15 +19015,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19004
19015
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19005
19016
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
19006
19017
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
19007
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
19008
19018
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
19009
19019
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
19010
19020
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
19011
19021
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
19012
19022
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
19013
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19014
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19015
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19023
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19024
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19025
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19026
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19027
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19028
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19029
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19030
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19016
19031
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19017
19032
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19018
19033
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19038,15 +19053,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19038
19053
  width: 100%;
19039
19054
  color: var(--pf-v6-c-text-input-group--Color, inherit);
19040
19055
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
19041
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19042
- }
19043
- .pf-v6-c-text-input-group::before {
19044
- position: absolute;
19045
- inset: 0;
19046
- pointer-events: none;
19047
- content: "";
19048
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19049
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19050
19056
  }
19051
19057
  .pf-v6-c-text-input-group:hover {
19052
19058
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -19060,7 +19066,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19060
19066
  .pf-v6-c-text-input-group.pf-m-plain {
19061
19067
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
19062
19068
  }
19063
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
19069
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
19064
19070
  border: 0;
19065
19071
  }
19066
19072
 
@@ -19075,12 +19081,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19075
19081
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
19076
19082
  }
19077
19083
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
19084
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
19085
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
19078
19086
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
19079
19087
  }
19080
19088
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
19081
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
19082
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
19083
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
19089
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
19090
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
19091
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
19084
19092
  }
19085
19093
 
19086
19094
  .pf-v6-c-text-input-group__text {
@@ -19089,11 +19097,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19089
19097
  grid-template-areas: "text-input";
19090
19098
  grid-template-columns: 1fr;
19091
19099
  }
19092
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
19100
+ .pf-v6-c-text-input-group__text::before {
19093
19101
  position: absolute;
19094
19102
  inset: 0;
19095
19103
  pointer-events: none;
19096
19104
  content: "";
19105
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19106
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
19107
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
19108
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
19109
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
19097
19110
  }
19098
19111
 
19099
19112
  .pf-v6-c-text-input-group__icon {
package/docs/components/TextInputGroup/examples/TextInputGroup.css CHANGED
@@ -13,3 +13,7 @@
13
13
  #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
14
14
  height: 540px;
15
15
  }
16
+
17
+ #ws-core-c-text-input-group-plain {
18
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
19
+ }
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -43,6 +43,27 @@ cssPrefix: pf-v6-c-text-input-group
43
43
 
44
44
  ```
45
45
 
46
+ ### Plain
47
+
48
+ The following example shows a `TextInputGroup` with the `.pf-m-plain` class applied. A plain `TextInputGroup` must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
49
+ For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.
50
+
51
+ ```html
52
+ <div class="pf-v6-c-text-input-group pf-m-plain">
53
+ <div class="pf-v6-c-text-input-group__main">
54
+ <span class="pf-v6-c-text-input-group__text">
55
+ <input
56
+ class="pf-v6-c-text-input-group__text-input"
57
+ type="text"
58
+ value="Text input group with plain styling"
59
+ aria-label="Type to filter"
60
+ />
61
+ </span>
62
+ </div>
63
+ </div>
64
+
65
+ ```
66
+
46
67
  ### Utilities and icon with placeholder text
47
68
 
48
69
  ```html
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.156",
4
+ "version": "6.0.0-alpha.158",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15414,6 +15414,8 @@ ul.pf-v6-c-list {
15414
15414
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
15415
15415
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
15416
15416
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15417
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15418
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15417
15419
  --pf-v6-c-menu--m-plain--BoxShadow: none;
15418
15420
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
15419
15421
  --pf-v6-c-menu__content--Height: auto;
@@ -15427,6 +15429,9 @@ ul.pf-v6-c-list {
15427
15429
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
15428
15430
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
15429
15431
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
15432
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
15433
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15434
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
15430
15435
  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
15431
15436
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
15432
15437
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -15597,6 +15602,8 @@ ul.pf-v6-c-list {
15597
15602
  background-color: var(--pf-v6-c-menu--BackgroundColor);
15598
15603
  border-radius: var(--pf-v6-c-menu--BorderRadius);
15599
15604
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
15605
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
15606
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
15600
15607
  }
15601
15608
  .pf-v6-c-menu .pf-v6-c-menu {
15602
15609
  min-width: 100%;
@@ -15768,6 +15775,9 @@ ul.pf-v6-c-list {
15768
15775
  .pf-v6-c-menu__list-item {
15769
15776
  align-items: baseline;
15770
15777
  min-width: 0;
15778
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
15779
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
15780
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
15771
15781
  }
15772
15782
  .pf-v6-c-menu__list-item > * {
15773
15783
  position: relative;
@@ -15777,6 +15787,7 @@ ul.pf-v6-c-list {
15777
15787
  inset: 0;
15778
15788
  content: "";
15779
15789
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
15790
+ transition: inherit;
15780
15791
  }
15781
15792
  .pf-v6-c-menu__list-item.pf-m-load {
15782
15793
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
@@ -25024,15 +25035,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25024
25035
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25025
25036
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25026
25037
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25027
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25028
25038
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25029
25039
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25030
25040
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25031
25041
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25032
25042
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25033
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25034
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25035
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25043
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25044
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25045
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25046
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25047
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25048
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25049
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25050
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25036
25051
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25037
25052
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25038
25053
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25058,15 +25073,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25058
25073
  width: 100%;
25059
25074
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25060
25075
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25061
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25062
- }
25063
- .pf-v6-c-text-input-group::before {
25064
- position: absolute;
25065
- inset: 0;
25066
- pointer-events: none;
25067
- content: "";
25068
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25069
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25070
25076
  }
25071
25077
  .pf-v6-c-text-input-group:hover {
25072
25078
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25080,7 +25086,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25080
25086
  .pf-v6-c-text-input-group.pf-m-plain {
25081
25087
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25082
25088
  }
25083
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25089
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25084
25090
  border: 0;
25085
25091
  }
25086
25092
 
@@ -25095,12 +25101,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25095
25101
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25096
25102
  }
25097
25103
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25104
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25105
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25098
25106
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25099
25107
  }
25100
25108
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25101
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25102
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25103
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25109
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25110
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25111
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25104
25112
  }
25105
25113
 
25106
25114
  .pf-v6-c-text-input-group__text {
@@ -25109,11 +25117,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25109
25117
  grid-template-areas: "text-input";
25110
25118
  grid-template-columns: 1fr;
25111
25119
  }
25112
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25120
+ .pf-v6-c-text-input-group__text::before {
25113
25121
  position: absolute;
25114
25122
  inset: 0;
25115
25123
  pointer-events: none;
25116
25124
  content: "";
25125
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25126
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25127
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25128
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25129
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25117
25130
  }
25118
25131
 
25119
25132
  .pf-v6-c-text-input-group__icon {