feat(search): minimized search #4115
Conversation
🦋 Changeset detectedLatest commit: 3579e94 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
File metricsSummaryTotal size: 1.44 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsalertbanner
assetcard
card
coachmark
combobox
dial
page
search
sidenav
stepper
treeview
tokens
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
📚 Branch previewPR #4115 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4115/index.html. |
There was a problem hiding this comment.
Nice work on this. I feel like I still mainly have questions, so I left a few for you 😊
I might consider just updating the changeset heading to "Collapsed" instead of "Minimized." Just personal preference though.
Have you reached out to design to ask about some of the focus and keyboard focus behaviors? I found the collapsed usage section in Figma, and the "focus state" of this button is just...open? That feels odd to me for some reason. Like if I was tabbing along, does it make sense for me to tab to this action button, and then it just be a completely different component? Anyways, I think this is more along the lines that I would expect, where I'm tabbing along, and I have to trigger the rest of the search field to open. I may be wrong though. Is that worth bringing up with design?
|
|
||
| ### Anatomy | ||
|
|
||
| The collapsed state consists of a single action button that only has a hover and disabled state. This state is triggered by the `is-collapsed` class on the search component. When the search field is in this state, the textfield is hidden and the search button is displayed. The button can be hovered and focused, and will expand the search field when clicked. |
There was a problem hiding this comment.
since we added keyboard focus back in, can we update this first sentence just a touch so that it doesn't say that it "only" has hover and disabled states? You mention focus later in the paragraph, even if you decide not to change it. 👍
|
|
||
| /* Animation for collapsible search expansion */ | ||
| &.is-collapsed { | ||
| transition: inline-size 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
There was a problem hiding this comment.
how would you feel about maybe using of any of the --spectrum-animation-duration-* tokens? Maybe we can use that here? Or was the 0.3 design directed? And just because I'm nosy, where did you find these timing curves?!
Should the cubic-beziers and even the transition-duration be set as custom props? Maybe it's not necessary, but we do use the same curve & durations twice 🤷♀️
Description
The search component allows for a minimized state where the search field is collapsed to an action button. When clicked the the search field is visible.
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Include steps for the PR reviewer that explain how they should test your PR. Example test outline:
trueis collapsed state (@cdransf)Regression testing
Validate:
Screenshots
To-do list