Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Autocomplete] highlight text matching the inputValue #11154

Open
1 of 5 tasks
driskull opened this issue Dec 27, 2024 · 3 comments
Open
1 of 5 tasks

[Autocomplete] highlight text matching the inputValue #11154

driskull opened this issue Dec 27, 2024 · 3 comments
Assignees
@driskull @SkyeSeitz @ashetland
Labels
2 - in development Issues that are actively being worked on. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2025-01-30 - 3.0....

Comments

@driskull
Copy link
Member

driskull commented Dec 27, 2024 •
edited
Loading

Check existing issues

Description

bold and highlight autocomplete-items that match the inputValue

Acceptance Criteria

autocomplete items that match the input value are highlighted in some form

Relevant Info

No response

Which Component

autocomplete

Example Use Case

Something like this

image

https://codepen.io/Matt-Driscoll/pen/wBwqpye?editors=1010

Priority impact

impact - p3 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript
@driskull driskull added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. design Issues that need design consultation prior to development. labels Dec 27, 2024
@github-actions github-actions bot added ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Dec 27, 2024
@driskull driskull changed the title [Autocomplete] bold and highlight autocomplete-items that match the inputValue [Autocomplete] bold and highlight text matching the inputValue Dec 27, 2024
@driskull driskull changed the title [Autocomplete] bold and highlight text matching the inputValue [Autocomplete] highlight text matching the inputValue Dec 27, 2024
driskull added a commit that referenced this issue Dec 27, 2024
@driskull
feat(autocomplete): highlight text matching the inputValue #11154
bdff345
@driskull driskull mentioned this issue Dec 27, 2024
Merged
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 28, 2024
@driskull
Copy link
Member Author

@ashetland @SkyeSeitz Can you help out with the design here? I can copy what combobox has but to me it seems a bit too much with the background color highlight.

@ashetland
Copy link

I think we could simplify this to just the weight increase. We should also update Combobox to match if we move forward with that. I think the styling in Combobox stemmed from work on Input Time Zone, but I think the simplified styling would work there too. cc @jcfranco @emmilaakso212

@driskull
Copy link
Member Author

Thanks @ashetland, ill proceed with just the bold weight font. Can you create issues to update the other components and figma?

@ashetland ashetland mentioned this issue Dec 30, 2024
Open
5 tasks
driskull added a commit that referenced this issue Dec 31, 2024
@driskull
feat(autocomplete): highlight text matching the inputValue (#11155)
a43982b 
**Related Issue:** #11154

## Summary

- add highlight styles to `autocomplete-item` elements
- add utility to highlight text to promote code reuse
- add story screenshot test

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@driskull driskull

@SkyeSeitz SkyeSeitz

@ashetland ashetland

Labels
2 - in development Issues that are actively being worked on. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2025-01-30 - 3.0.0 Jan Breaking Chang...
Development

No branches or pull requests
4 participants
@driskull @geospatialem @SkyeSeitz @ashetland