@patternfly/patternfly 6.3.0-prerelease.31 → 6.3.0-prerelease.33

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 (15) hide show
  1. package/components/ExpandableSection/expandable-section.css +18 -0
  2. package/components/ExpandableSection/expandable-section.scss +28 -1
  3. package/components/InputGroup/input-group.css +80 -0
  4. package/components/InputGroup/input-group.scss +95 -0
  5. package/components/_index.css +98 -0
  6. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +11 -6
  8. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  9. package/docs/components/Slider/examples/Slider.md +2 -2
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +98 -0
  13. package/patternfly.css +98 -0
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -19,6 +19,8 @@
19
19
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
20
20
  --pf-v6-c-expandable-section__content--Opacity: 0;
21
21
  --pf-v6-c-expandable-section__content--TranslateY: 0;
22
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
23
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
22
24
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
23
25
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
24
26
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -42,6 +44,8 @@
42
44
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
43
45
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
44
46
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
47
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
48
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
45
49
  }
46
50
  }
47
51
 
@@ -66,6 +70,20 @@
66
70
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
67
71
  gap: var(--pf-v6-c-expandable-section--Gap);
68
72
  }
73
+ .pf-v6-c-expandable-section.pf-m-expand-top {
74
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
75
+ }
76
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
77
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
78
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
79
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
80
+ }
81
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
82
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
83
+ }
84
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
85
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
86
+ }
69
87
  .pf-v6-c-expandable-section.pf-m-limit-width {
70
88
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
71
89
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -23,6 +23,8 @@
23
23
  --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
24
24
  --#{$expandable-section}__content--Opacity: 0;
25
25
  --#{$expandable-section}__content--TranslateY: 0;
26
+ --#{$expandable-section}--m-expand-top__content--TranslateY: 0;
27
+ --#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
26
28
  --#{$expandable-section}--m-expanded__content--Opacity: 1;
27
29
  --#{$expandable-section}--m-expanded__content--TranslateY: 0;
28
30
 
@@ -30,6 +32,8 @@
30
32
  --#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
31
33
  --#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
32
34
  --#{$expandable-section}__content--TranslateY: -.5rem;
35
+ --#{$expandable-section}--m-expand-top__content--TranslateY: .5rem;
36
+ --#{$expandable-section}--m-expand-bottom__content--TranslateY: -.5rem;
33
37
  }
34
38
 
35
39
  // Content
@@ -81,6 +85,29 @@
81
85
  gap: var(--pf-v6-c-expandable-section--Gap);
82
86
  }
83
87
 
88
+ &.pf-m-expand-top {
89
+ --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
90
+ }
91
+
92
+ // The following selector is for ensuring we target only detached expandable section contents without introducing a breaking change
93
+ // (since typically both toggle and content would both be in the expandable section wrapper)
94
+ // In a breaking change we could update this to utilize the pf-m-detached class
95
+ &:has(.#{$expandable-section}__content:only-child) {
96
+ &:not(.pf-m-expand-top, .pf-m-expand-bottom) {
97
+ --#{$expandable-section}__content--TranslateY: 0;
98
+ --#{$expandable-section}__content--TransitionDuration--expand--fade: 0s;
99
+ --#{$expandable-section}__content--TransitionDuration--collapse--fade: 0s;
100
+ }
101
+
102
+ &.pf-m-expand-top:not(.pf-m-expanded) {
103
+ --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-top__content--TranslateY);
104
+ }
105
+
106
+ &.pf-m-expand-bottom:not(.pf-m-expanded) {
107
+ --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-bottom__content--TranslateY);
108
+ }
109
+ }
110
+
84
111
  &.pf-m-limit-width {
85
112
  --#{$expandable-section}__content--MaxWidth: var(--#{$expandable-section}--m-limit-width__content--MaxWidth);
86
113
  }
@@ -122,7 +149,7 @@
122
149
  transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
123
150
  transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
124
151
 
125
- &.pf-m-expand-top {
152
+ &.pf-m-expand-top { // TODO: Remove this block in breaking change in favor of using modifier on outer expandable section wrapper
126
153
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
127
154
  }
128
155
  }
package/components/InputGroup/input-group.css CHANGED
@@ -19,6 +19,30 @@
19
19
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
20
20
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
21
21
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
22
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
24
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
25
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
26
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
27
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
28
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
29
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
30
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
31
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
32
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
33
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
34
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
35
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
36
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
37
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
38
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
39
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
40
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
41
+ }
42
+ @media (prefers-reduced-motion: no-preference) {
43
+ .pf-v6-c-input-group {
44
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
45
+ }
22
46
  }
23
47
 
24
48
  .pf-v6-c-input-group {
@@ -26,6 +50,62 @@
26
50
  gap: var(--pf-v6-c-input-group--Gap);
27
51
  width: 100%;
28
52
  }
53
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
54
+ --pf-v6-c-input-group--Gap: 0;
55
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
56
+ }
57
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
58
+ flex-grow: 1;
59
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
60
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
61
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
62
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
63
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
64
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
65
+ transition-property: opacity, scale, visibility, max-width;
66
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
67
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
68
+ }
69
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
70
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
71
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
72
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
73
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
74
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
75
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
76
+ transition-property: opacity, visibility, max-width;
77
+ }
78
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
79
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
80
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
81
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
82
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
83
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
84
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
85
+ transition-property: opacity, visibility, max-width;
86
+ }
87
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
88
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
89
+ }
90
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
91
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
92
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
93
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
94
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
95
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
96
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
97
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
98
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
99
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
100
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
101
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
102
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
103
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
104
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
105
+ }
106
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
107
+ transition-delay: 0s;
108
+ }
29
109
 
30
110
  .pf-v6-c-input-group__item {
31
111
  position: relative;
package/components/InputGroup/input-group.scss CHANGED
@@ -31,12 +31,107 @@
31
31
  // Input group text, disabled variant
32
32
  --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
33
33
  --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
34
+
35
+ // Input group search expanded
36
+ --#{$input-group}__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
37
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
38
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
39
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
40
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
41
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade);
42
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide);
43
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
44
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start: 100%;
45
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end: 0;
46
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end);
47
+ --#{$input-group}__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
48
+ --#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade: 0s;
49
+ --#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
50
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade);
51
+ --#{$input-group}__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
52
+ --#{$input-group}__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
53
+ --#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade);
55
+
56
+ @media (prefers-reduced-motion: no-preference) {
57
+ --#{$input-group}__item--m-search-text-input--ScaleX: .7;
58
+ }
34
59
  }
35
60
 
36
61
  .#{$input-group} {
37
62
  display: flex;
38
63
  gap: var(--#{$input-group}--Gap);
39
64
  width: 100%;
65
+
66
+ &.pf-m-search-expandable {
67
+ &:not(.pf-m-expanded) {
68
+ --#{$input-group}--Gap: 0;
69
+
70
+ transition: gap 0s var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
71
+ }
72
+
73
+ .#{$input-group}__item {
74
+ &.pf-m-search-input {
75
+ flex-grow: 1;
76
+ max-width: var(--#{$input-group}__item--m-search-text-input--MaxWidth, 0);
77
+ visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
78
+ opacity: var(--#{$input-group}__item--m-search-text-input--Opacity, 0);
79
+ transition-delay: 0s, 0s, var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
80
+ transition-timing-function: var(--#{$input-group}__item--m-search-text-input--TransitionTimingFunction);
81
+ transition-duration: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
82
+ transition-property: opacity, scale, visibility, max-width;
83
+ transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
84
+ scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
85
+ }
86
+
87
+ // the expand button (magnifying glass)
88
+ &.pf-m-search-expand {
89
+ max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
90
+ visibility: var(--#{$input-group}__item--m-search-expand--Visibility, visible);
91
+ opacity: var(--#{$input-group}__item--m-search-expand--Opacity, 1);
92
+ transition-delay: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
93
+ transition-timing-function: var(--#{$input-group}__item--m-search-expand--TransitionTimingFunction);
94
+ transition-duration: var(--#{$input-group}__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
95
+ transition-property: opacity, visibility, max-width;
96
+ }
97
+
98
+ // other input group items adjacent to the search input that are shown when expanded
99
+ &.pf-m-search-action {
100
+ max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
101
+ visibility: var(--#{$input-group}__item--m-search-action--Visibility, hidden);
102
+ opacity: var(--#{$input-group}__item--m-search-action--Opacity, 0);
103
+ transition-delay: 0s, var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
104
+ transition-timing-function: var(--#{$input-group}__item--m-search-action--TransitionTimingFunction);
105
+ transition-duration: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), 0s, 0s;
106
+ transition-property: opacity, visibility, max-width;
107
+ }
108
+ }
109
+
110
+ &.pf-m-expand-start {
111
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start);
112
+ }
113
+
114
+ &.pf-m-expanded {
115
+ --#{$input-group}__item--m-search-text-input--MaxWidth: 100%;
116
+ --#{$input-group}__item--m-search-text-input--Visibility: visible;
117
+ --#{$input-group}__item--m-search-text-input--Opacity: 1;
118
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade);
119
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide);
120
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
121
+ --#{$input-group}__item--m-search-action--MaxWidth: 100%;
122
+ --#{$input-group}__item--m-search-action--Visibility: visible;
123
+ --#{$input-group}__item--m-search-action--Opacity: 1;
124
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--expand--fade);
125
+ --#{$input-group}__item--m-search-expand--MaxWidth: 0;
126
+ --#{$input-group}__item--m-search-expand--Visibility: hidden;
127
+ --#{$input-group}__item--m-search-expand--Opacity: 0;
128
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade);
129
+
130
+ .#{$input-group}__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
131
+ transition-delay: 0s;
132
+ }
133
+ }
134
+ }
40
135
  }
41
136
 
42
137
  .#{$input-group}__item {
package/components/_index.css CHANGED
@@ -6581,6 +6581,8 @@ ul) {
6581
6581
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6582
6582
  --pf-v6-c-expandable-section__content--Opacity: 0;
6583
6583
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6584
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6585
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6584
6586
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6585
6587
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6586
6588
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -6604,6 +6606,8 @@ ul) {
6604
6606
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6605
6607
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6606
6608
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6609
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
6610
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
6607
6611
  }
6608
6612
  }
6609
6613
 
@@ -6628,6 +6632,20 @@ ul) {
6628
6632
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6629
6633
  gap: var(--pf-v6-c-expandable-section--Gap);
6630
6634
  }
6635
+ .pf-v6-c-expandable-section.pf-m-expand-top {
6636
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6637
+ }
6638
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
6639
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
6640
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
6641
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
6642
+ }
6643
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
6644
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
6645
+ }
6646
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
6647
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
6648
+ }
6631
6649
  .pf-v6-c-expandable-section.pf-m-limit-width {
6632
6650
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
6633
6651
  }
@@ -8189,6 +8207,30 @@ ul) {
8189
8207
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
8190
8208
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
8191
8209
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8210
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8211
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8212
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8213
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
8214
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
8215
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
8216
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
8217
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8218
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
8219
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
8220
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
8221
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
8222
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
8223
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
8224
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
8225
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8226
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8227
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8228
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
8229
+ }
8230
+ @media (prefers-reduced-motion: no-preference) {
8231
+ .pf-v6-c-input-group {
8232
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
8233
+ }
8192
8234
  }
8193
8235
 
8194
8236
  .pf-v6-c-input-group {
@@ -8196,6 +8238,62 @@ ul) {
8196
8238
  gap: var(--pf-v6-c-input-group--Gap);
8197
8239
  width: 100%;
8198
8240
  }
8241
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
8242
+ --pf-v6-c-input-group--Gap: 0;
8243
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8244
+ }
8245
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
8246
+ flex-grow: 1;
8247
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
8248
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
8249
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
8250
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8251
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
8252
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
8253
+ transition-property: opacity, scale, visibility, max-width;
8254
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
8255
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
8256
+ }
8257
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
8258
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
8259
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
8260
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
8261
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8262
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
8263
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
8264
+ transition-property: opacity, visibility, max-width;
8265
+ }
8266
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
8267
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
8268
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
8269
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
8270
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8271
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
8272
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
8273
+ transition-property: opacity, visibility, max-width;
8274
+ }
8275
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
8276
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
8277
+ }
8278
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
8279
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
8280
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
8281
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
8282
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
8283
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
8284
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8285
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
8286
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
8287
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
8288
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
8289
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
8290
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
8291
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
8292
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
8293
+ }
8294
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
8295
+ transition-delay: 0s;
8296
+ }
8199
8297
 
8200
8298
  .pf-v6-c-input-group__item {
8201
8299
  position: relative;
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -83,7 +83,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
83
83
  kind: HelmChartRepository
84
84
  metadata:
85
85
  name: azure-sample-repo<div
86
- class="pf-v6-c-expandable-section"
86
+ class="pf-v6-c-expandable-section pf-m-detached"
87
87
  ><div
88
88
  class="pf-v6-c-expandable-section__content"
89
89
  hidden
@@ -95,7 +95,7 @@ name: azure-sample-repo<div
95
95
  </div>
96
96
  </code>
97
97
  </pre>
98
- <div class="pf-v6-c-expandable-section">
98
+ <div class="pf-v6-c-expandable-section pf-m-detached">
99
99
  <div class="pf-v6-c-expandable-section__toggle">
100
100
  <button
101
101
  class="pf-v6-c-button pf-m-link"
@@ -153,7 +153,7 @@ name: azure-sample-repo<div
153
153
  kind: HelmChartRepository
154
154
  metadata:
155
155
  name: azure-sample-repo<div
156
- class="pf-v6-c-expandable-section pf-m-expanded"
156
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached"
157
157
  ><div
158
158
  class="pf-v6-c-expandable-section__content"
159
159
  id="code-block-expandable-expanded-content"
@@ -164,7 +164,7 @@ name: azure-sample-repo<div
164
164
  </div>
165
165
  </code>
166
166
  </pre>
167
- <div class="pf-v6-c-expandable-section pf-m-expanded">
167
+ <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached">
168
168
  <div class="pf-v6-c-expandable-section__toggle">
169
169
  <button
170
170
  class="pf-v6-c-button pf-m-link"
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -141,7 +141,9 @@ cssPrefix: pf-v6-c-expandable-section
141
141
  ```html
142
142
  <div class="pf-v6-l-stack pf-m-gutter">
143
143
  <div class="pf-v6-l-stack__item">
144
- <div class="pf-v6-c-expandable-section pf-m-expanded">
144
+ <div
145
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
146
+ >
145
147
  <div
146
148
  class="pf-v6-c-expandable-section__content"
147
149
  id="detached-toggle-content"
@@ -150,7 +152,9 @@ cssPrefix: pf-v6-c-expandable-section
150
152
  </div>
151
153
 
152
154
  <div class="pf-v6-l-stack__item">
153
- <div class="pf-v6-c-expandable-section pf-m-expanded">
155
+ <div
156
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
157
+ >
154
158
  <div class="pf-v6-c-expandable-section__toggle">
155
159
  <button
156
160
  class="pf-v6-c-button pf-m-link"
@@ -159,9 +163,7 @@ cssPrefix: pf-v6-c-expandable-section
159
163
  aria-controls="detached-toggle-content"
160
164
  >
161
165
  <span class="pf-v6-c-button__icon pf-m-start">
162
- <span
163
- class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
- >
166
+ <span class="pf-v6-c-expandable-section__toggle-icon">
165
167
  <i class="fas fa-angle-right" aria-hidden="true"></i>
166
168
  </span>
167
169
  </span>
@@ -232,8 +234,11 @@ cssPrefix: pf-v6-c-expandable-section
232
234
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
233
235
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
234
236
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
237
+ | `.pf-m-detached` | `.pf-v6-c-expandable-section` | Modifies the component for a detached variant. |
238
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. We recommend the new method of applying this class directly to the `.pf-v6-c-expandable-section` wrapper element. |
239
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation and icon rotation directions for detached expandable sections. **Required** when the content is above the toggle. |
240
+ | `.pf-m-expand-bottom` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation direction for detached expandable sections. **Required** when the content is below the toggle. |
235
241
  | `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
236
242
  | `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
237
243
  | `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
238
- | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
239
244
  | `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -252,7 +252,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
252
252
  />
253
253
  </span>
254
254
  </div>
255
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-plain">
255
+ <div class="pf-v6-c-input-group__item pf-m-plain pf-m-box">
256
256
  <span class="pf-v6-c-input-group__text">%</span>
257
257
  </div>
258
258
  </div>
@@ -280,3 +280,7 @@ When using the `.pf-v6-c-input-group` always ensure labels are used outside the
280
280
  | `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
281
281
  | `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
282
282
  | `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |
283
+ | `.pf-m-search-expandable` | `.pf-v6-c-input-group` | Modifies an input group to be an expandable search input. **Note:** The expandable search input can be found in the [search input](/components/search-input/) component docs for react and [text input group](/components/text-input-group/html#search-input-group-expandable) component docs for core. |
284
+ | `.pf-m-search-input` | `.pf-v6-c-input-group__item` | Identifies the text input an expandable search input. |
285
+ | `.pf-m-search-expand` | `.pf-v6-c-input-group__item` | Identifies the expand button in an expandable search input. |
286
+ | `.pf-m-search-action` | `.pf-v6-c-input-group__item` | Identifies actions adjacent to the search input when an expandable search input is expanded. |
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -427,7 +427,7 @@ cssPrefix: pf-v6-c-slider
427
427
  />
428
428
  </span>
429
429
  </div>
430
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
430
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
431
431
  <span class="pf-v6-c-input-group__text">%</span>
432
432
  </div>
433
433
  </div>
@@ -632,7 +632,7 @@ cssPrefix: pf-v6-c-slider
632
632
  />
633
633
  </span>
634
634
  </div>
635
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
635
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
636
636
  <span class="pf-v6-c-input-group__text">%</span>
637
637
  </div>
638
638
  </div>
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -741,6 +741,8 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
741
741
 
742
742
  ### Search input group
743
743
 
744
+ The React implementation can be found in the [search input](/components/search-input) component.
745
+
744
746
  ```html
745
747
  <div class="pf-v6-c-text-input-group">
746
748
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
@@ -867,8 +869,26 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
867
869
  ```html
868
870
  <h3>Collapsed</h3>
869
871
  <br />
870
- <div class="pf-v6-c-input-group pf-m-plain">
871
- <div class="pf-v6-c-input-group__item pf-m-plain">
872
+ <div class="pf-v6-c-input-group pf-m-search-expandable pf-m-plain">
873
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
874
+ <div class="pf-v6-c-text-input-group">
875
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
876
+ <span class="pf-v6-c-text-input-group__text">
877
+ <span class="pf-v6-c-text-input-group__icon">
878
+ <i class="fas fa-fw fa-search"></i>
879
+ </span>
880
+ <input
881
+ class="pf-v6-c-text-input-group__text-input"
882
+ type="text"
883
+ placeholder="Search"
884
+ value
885
+ aria-label="Search input"
886
+ />
887
+ </span>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
872
892
  <button
873
893
  class="pf-v6-c-button pf-m-plain"
874
894
  type="button"
@@ -879,13 +899,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
879
899
  </span>
880
900
  </button>
881
901
  </div>
902
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
903
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
904
+ <span class="pf-v6-c-button__icon">
905
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
906
+ </span>
907
+ </button>
908
+ </div>
882
909
  </div>
883
910
  <br />
884
911
  <br />
885
912
  <h3>Expanded</h3>
886
913
  <br />
887
- <div class="pf-v6-c-input-group pf-m-plain">
888
- <div class="pf-v6-c-input-group__item pf-m-fill">
914
+ <div
915
+ class="pf-v6-c-input-group pf-m-expanded pf-m-search-expandable pf-m-plain"
916
+ >
917
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
889
918
  <div class="pf-v6-c-text-input-group">
890
919
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
891
920
  <span class="pf-v6-c-text-input-group__text">
@@ -903,7 +932,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
903
932
  </div>
904
933
  </div>
905
934
  </div>
906
- <div class="pf-v6-c-input-group__item pf-m-plain">
935
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
936
+ <button
937
+ class="pf-v6-c-button pf-m-plain"
938
+ type="button"
939
+ aria-label="Open search"
940
+ >
941
+ <span class="pf-v6-c-button__icon">
942
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
943
+ </span>
944
+ </button>
945
+ </div>
946
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
907
947
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
908
948
  <span class="pf-v6-c-button__icon">
909
949
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>