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

Update options for styling component inputs #649

Merged
merged 8 commits into from
Jan 30, 2024
Merged

Conversation

romaricpascal
Copy link
Member

When using the autoselect option, the component renders a hint when the value typed by the user matches the start of a suggestion. The styles of this hint need to match some of the styles of the input the user types in so the texts overlap properly. This PR adds a new hintClasses to complement inputClasses.

It uses the value of inputClasses when left null, but can take its own value if necessary to allow either:

  • the styling of the hint on its own
  • not styling the hint when stylint the inputClasses (by setting an empty string).

examples/index.html Outdated Show resolved Hide resolved
test/wdio.config.js Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
@romaricpascal romaricpascal force-pushed the styling-props branch 2 times, most recently from 2329f73 to 375bd0b Compare January 26, 2024 14:56
@romaricpascal romaricpascal marked this pull request as ready for review January 26, 2024 15:02
@romaricpascal romaricpascal added this to the Next milestone Jan 26, 2024
README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
examples/index.html Outdated Show resolved Hide resolved
@colinrotherham colinrotherham self-requested a review January 26, 2024 18:15
Copy link
Contributor

@colinrotherham colinrotherham left a comment

Choose a reason for hiding this comment

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

Looking good 🙌

Just the .only() to remove, the docs changes aren't blockers

README.md Outdated Show resolved Hide resolved
romaricpascal and others added 2 commits January 29, 2024 09:54
Co-authored-by: Colin Rotherham <work@colinr.com>
Copy link
Contributor

@colinrotherham colinrotherham left a comment

Choose a reason for hiding this comment

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

Looks good to me

Would be ace to see tests for:

  1. Class only on input and NOT on the hint
  2. Class only on hint and NOT on the input

Just to make sure hintClasses: '' etc are working

@romaricpascal
Copy link
Member Author

Yeah, I think it'd be good to look at how to make it easy to have that kind of tests without cluttering the examples:

  • Karma tests don't have a system to wait for the UI to have changed before running assertions like WebDriver IO have
  • More tests in WebDriver mean more examples on that example page, which is not ideal either. 😔

@romaricpascal romaricpascal merged commit 3906cdc into main Jan 30, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

2 participants