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.

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

feat(autocomplete): highlight text matching the inputValue #11155

Merged
merged 11 commits into from
Dec 31, 2024

Conversation

driskull
Copy link
Member

@driskull driskull commented Dec 27, 2024

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

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 27, 2024
@driskull driskull added the no changelog entry Use the commit override to avoid a changelog entry label Dec 27, 2024
@driskull driskull marked this pull request as ready for review December 30, 2024 18:46
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 30, 2024
@driskull driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 30, 2024
@driskull driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 30, 2024
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 🚀

packages/calcite-components/src/utils/text.tsx Outdated Show resolved Hide resolved
@@ -61,6 +61,12 @@
color: var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1));
}

.text-match {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you're adding a reusable util, can we move this into a mixin?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The mixin doesn't make sense at this time since the styles between autocomplete and combobox are not consistent. Hopefully #11173 can resolve that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. I'll add a note about this to the issue.

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 🚀

@driskull driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 31, 2024
Copy link

@ashetland ashetland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Visuals lookin' gewd

@driskull driskull merged commit a43982b into dev Dec 31, 2024
18 checks passed
@driskull driskull deleted the dris0000/autocomplete-text-match branch December 31, 2024 17:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. no changelog entry Use the commit override to avoid a changelog entry pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants