SearchInput - enable animation of expandable search input

[sg00dwin]

Core feature PR patternfly/patternfly#7451

Describe the feature
This feature will implement a transform animation to the opening and closing of the SearchInput component. In order for the animation to be performant, the search input field will transform the scaleX property.

Changes needed toSearchInput component
Several new classes are needed in order to incorporate and utilize those Core additions, along with additionally rendering the search input field, in the collapsed state, which will hidden and set to width: 0, by default.

A new pf-m-search-input class would be applied to the SearchInput parent node. <div class="pf-v6-c-input-group pf-m-search-input">

Currently, in it's closed state, the React component only has one InputGroupItem that generates the magnify glass button.

To transition the search input from a collapsed state of visibility: hidden and width: 0, an additional <InputGroupItem className="pf-m-search-text-input">{buildTextInputGroup()}</InputGroupItem> should be included. This new element would use a distinct pf-m-search-text-input class.

What is the expected behavior?

By default the search input will expand from left to right. For a search input to open from right to left, (right aligned), a modifier class pf-m-expand-left will need to be applied to the SearchInput component. Its corresponding css sets the translate-origin variable appropriately, and the scale transforms to the left when expanding.

search-input-expandable.mov