feat(search-input): animate expandable search input

[sg00dwin]

Feature #6603

This expand behavior is based off @mcokers POC codepen using scale transition for the search input that. It's set to display: none in the collapsed state.

To see the animation, use the chrome dev tools to toggle the pf-m-expanded modifier class. (Note: at closed state the X button will display because it requires the react component to switch the displayed icon to the magnifying glass.

These changes key off a pf-v6-c-input-group__search-expandable class along with modifier pf-m-expanded added to the <SearchInput... component.

The expanded text input uses an abbreviated scale(.7) value to transition from partial to full width scale(1) and by default the transition-origin direction is from left to right. Adding a pf-m-expand-left modifier will set the transition-origin to transition from right to left.

These changes necessitate a few changes to the React component.

In the “collapsed” state, an <InputGroupItem className="pf-v6-c-search-input">{buildTextInputGroup()}</InputGroupItem> is included with toggle button https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/SearchInput/SearchInput.tsx#L415-L417 Without the pf-m-expanded and pf-m-fill classes and will be set to display:none

Additional changes: The close button icon opacity fade-in specified in @keyframes animation-name: #{$input-group}-expandable-fade-in could be replaced by a generic fade mixin that is proposed for inclusion with this PR.

[patternfly-build]

Preview: https://patternfly-pr-7451.surge.sh

A11y report: https://patternfly-pr-7451-a11y.surge.sh

[sg00dwin]

@mcoker Please take another look

[sg00dwin]

search-input-expandable.mov

[srambach]

We should probably document the new classes.
Also, can we use $pf-prefix on the .pf-v6-c- classes here or no?
Otherwise, looks this looks good.

[sg00dwin]

I pushed updates to use $pf-prefix

[srambach]

Once the generic mixin is merged, it would be great to use it here too but otherwise,
L🔍TM!

[andrew-ronaldson]

I noticed the search icon shifts a bit in Chrome. It seems fine in both safari and Firefox.

Not a big deal but wanted to let you know

Screen.Recording.2025-05-27.at.5.06.49.PM.mov

[mcoker]

LGTM though left some comments

[mcoker]

Is there a reason this isn't .pf-m-expandable? You could also call it .pf-m-search-input, which might be more appropriate since IMO this needs some kind of modifier like that as it's a unique react component. That also gives us the room to use .pf-m-expandable later for a generally expandable input group.

[mcoker]

Since this isn't a component, it should probably be .pf-v6-c-input-group__item.pf-m-search-input but if you used .pf-m-search-input on the outer wrapper, it would probably be better to use something different here. Maybe .pf-v6-c-input-group__item.pf-m-search-text-input? We have a #{$text-input-group}__text-input so I I think .pf-m-search-text-input would be fine.

[mcoker]

Instead of transitioning display, can you transition visibility and width to hide it? Then it will work x-browser without needing allow-discrete and @starting-style

[mcoker]

Is there any way this can be a transition so it doesn't run on page load?

[sg00dwin]

@mcoker @thatblindgeye
With the new button click animation additions, the expandable search button now shows the click animation when going between the closed and expanded states. Presumably it's because the SearchInput component uses one button to handle both states and the component structure would need to be reworked to have separate buttons for each state?

Here's a slowed down example to show what is happening. Note that the click animation isn't triggered when using keyboard navigation.

Screen.Recording.2025-06-10.at.10.03.06.AM.mov

[mcoker]

To test this, just toggle the .pf-m-expanded class on the search input group expandable examples.

I added the docs for the new classes and hwhat-not under the input group - https://patternfly-pr-7451.surge.sh/components/input-group#usage. I'm not sure if that's the right place for them... Technically the classes apply to input group elements, but the example is listed under text input group (in core anyways, it's its own component in react). So I listed the docs under input group for now with a note that the examples are under text input group and the search input component pages. Let me know if anyone feels strongly about changing that and I'll update it.

[srambach]

Looks like something messed up the collapsed view?

[srambach]

🔍 GTM!

[patternfly-build]

🎉 This PR is included in version 6.3.0-prerelease.32 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀