feat(Search): use ds-suggestion under the hood to support clear button in pure html - #5126
Conversation
Clears and focuses the sibling `<input>` when a `.ds-search button[type="reset"]` is clicked. Bails out when the click was already handled (e.g. by React's `Search.Clear`).
🦋 Changeset detectedLatest commit: a9c7d79 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 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 |
…selector-based-delegation
|
Note, this solution now looks for a This makes the functionality independent of CSS (making JSDOM tests happy), but it will also potentially catch non-Designsystemet components, if all conditions are met, which is problematic. In my opinion, I think we should consider removing the Maybe we should also as well as supporting a "Søk" button, but I must also admit I personally do not see why the search button is connected to the input. This could be a wrapper component (for example "Toolbar") instead, being able to "connect" buttons and/or inputs placed next to each other if we'd like that. This would not make a "special case" button styling for a single component, but enable our consumers to mix and match as needed – IF we feel like we should ship a connected input-button at all that is.. |
|
Updated the code to use |
https://www-pr-5126.victoriousglacier-eb9399b9.norwayeast.azurecontainerapps.io/no/components/docs/search/overview
|
Barsnes
left a comment
Barsnes
left a comment
There was a problem hiding this comment.
Add a changeset about the internals of react search.clear changing and we are good 🔥
Right, but this would break people who have implemented this themselves, since it would not target their reset button anymore |
Rewrote the setup, so need new review
| /* .ds-search is kept for backwards compatibility */ | ||
| .ds-search { | ||
| --dsc-search-padding-inline: var(--dsc-suggestion-clear-gap); | ||
| --dsc-search-clear-padding: var(--dsc-suggestion-clear-padding); | ||
| --dsc-search-clear-size: var(--dsc-suggestion-clear-size); | ||
| --dsc-search-clear-icon-url: var(--dsc-suggestion-clear-icon-url); | ||
| --dsc-search-magnifying-icon-url: var(--dsc-suggestion-search-icon-url); | ||
| --dsc-search-magnifying-icon-size: var(--dsc-suggestion-search-icon-size); | ||
| } | ||
| .ds-search, |
There was a problem hiding this comment.
I think it would be cleaner to keep this as a separate file. It will be easier to just delete that file later on.
There was a problem hiding this comment.
But the .ds-search, .ds-suggestion selector needs to be in the same file, and using CSS modules, a file can not reference a className from another file, as classnames are often hashed based on the content of the file, so if anyone does individual imports, this is safer :)
There was a problem hiding this comment.
ok, but removing search.css is a breaking change.
There was a problem hiding this comment.
Feel free to add it again :)
There was a problem hiding this comment.
Added search.css again, importing suggestion.css, but not including search.css in index.css as the backwards compatibility is only needed when importing individual css files
Co-authored-by: Michael Marszalek <mimarz@gmail.com>
Co-authored-by: Michael Marszalek <mimarz@gmail.com>
Summary
Adds a
@digdir/designsystemet-web/searchmodule (also imported at@digdir/designsystemet-web) which clears and focuses the sibling<input>when a.ds-search button[type="reset"]is clicked. Bails out when the click was already handled (e.g. by React'sSearch.Clear).Checks
pnpm changesetif relevant)