Carbon: Data table search input expand/collapse behavior

[emyarod]

Right now the collapased search bar can be seen moving from left to right across the action bar. Do we want this movement alongside the width change or should the search bar collapse while remaining aligned to the right side of the bar?

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[asudoh]

@emyarod Would you be able to elaborate on the alternate option? Thanks!

or should the search bar collapse while remaining aligned to the right side of the bar?

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[emyarod]

@asudoh having the search bar collapse instead of the whole icon moving across from left to right i.e. reversing the opening animation. currently the toolbar is immediately shrinking in size and then moving from left to right instead of remaining in the same position and just shrinking

[asudoh]

Hmm... Not sure if I understand what you are proposing while I see your point wrt the pain. CC @carbon-design-system/design to see if somebody gets the idea.

[shixiedesign]

@emyarod do you mean the search icon staying put and the box of search bar expand/collapse without affecting search icon?

[emyarod]

@shixiedesign I mean something like this when collapsing, as opposed to the gif in the first post

[shixiedesign]

@emyarod oh the focus outline! Yes your above gif☝️ is correct. Sorry I didn't even notice. Thanks!

[chrisconnors-ibm]

@shixiedesign while it not retaining focus WOULD BE FANTASTIC (that's a broader problem) I'm not sure that's what @emyarod is pointing out here. biggest difference I see is that the magnifying glass does not animate from its position on the left of the search box in the active state to the right in its resting state - it instantly appears on the right (the resting state position).

@shixiedesign @aagonzales @jeanservaas is that what we want as the transition here?

@emyarod have I described the choreography of the desired transition correctly?

[emyarod]

sort of @chrisconnors-ibm. what I mean is the search box's position is changing as opposed to its dimensions

just as the width of the element changes from square to rectangular when the user focuses on the search box, I expected the width to shrink (from rectangular to square) when losing focus. however the width is instantly reduced when the search box loses focus, and then the entire (now square instead of rectangular) element moves across the screen