Add core component CatalogAutocomplete and use for Catalog entity filters #27363
+467
−238
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Changed Packages
|
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
3 times, most recently
from
a95df1f to
105f44b
Compare
camilaibs
approved these changes
Oct 29, 2024
camilaibs
reviewed
Oct 29, 2024
packages/core-components/src/components/Autocomplete/Autocomplete.tsx
Outdated
Show resolved
Hide resolved
packages/core-components/src/components/Autocomplete/Autocomplete.tsx
Outdated
Show resolved
Hide resolved
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
3 times, most recently
from
3e75b52 to
6acafa2
Compare
jroebu14
changed the title
vinzscam
reviewed
Nov 15, 2024
.changeset/fluffy-jars-protect.md
Outdated
| '@backstage/plugin-catalog-react': patch | ||
| --- | ||
|
|
||
| Uses new Autocomplete component from core-components that aligns with Select component UI for consistent a dropdown UI for all catalog filters |
There was a problem hiding this comment.
Perhaps we could split this changeset in two to have a better description for the changes in core-components
jroebu14
requested review from
a team,
awanlin and
pjungermann
as code owners
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
from
6775b74 to
791515f
Compare
5 tasks
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
2 times, most recently
from
ff18be1 to
1a578b9
Compare
|
This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution! |
|
Hi @jroebu14 and @backstage/maintainers would we like to proceed with this pull request, or will this component be added to Canon? |
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
2 times, most recently
from
b202772 to
2782323
Compare
@camilaibs we've decided to remove the Autcomplete component from core-components and place it in catalog-react. When there is a need for this component to exist in a few more places then we can revisit adding it to core-components. This of course means the PR will need re-reviewed. |
jroebu14
changed the title
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
jroebu14
force-pushed
the
select-and-autocomplete-ui-alignments
branch
from
2782323 to
893e92f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hey, I just made a Pull Request!
Adds a new component
CatalogAutocompleteto@backstage/catalog-reactthat has opinion on label and input styles and composition as well as the options popup animation style.The new
CatalogAutocompletetries not to deviate from the original MUIAutocompletecomponent with regards to the API.Use the
CatalogAutocompletecomponent to align autocompletes visual style and labelling with theSelectcomponent from@backstage/core-components.Demo
Below is a before and after video demoing the interacting with the catalog filters. The top 2 filters are
Selectcomponents and the rest areAutocompletecomponents.Before
Notice the visual differences such as bgColor, icon positioning, labels and popup animations.
Autocomplete_Select.Before.mp4
After
The
SelectandAutocompletecomponents are aligned visually by use of a reusable component added to@backstage/core-components.Autocomplete_Select.After.mp4
✔️ Checklist
Signed-off-byline in the message. (more info)