ionic-framework
ionic-framework copied to clipboard
fix(range): indication when range knob is focused
Pull request checklist
Please check if your PR fulfills the following requirements:
- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
- Some docs updates need to be made in the
ionic-docs
repo, in a separate PR. See the contributing guide for details.
- Some docs updates need to be made in the
- [x] Build (
npm run build
) was run locally and any changes were pushed - [x] Lint (
npm run lint
) has passed locally and any fixes were made for failures
Pull request type
Please check the type of change your PR introduces:
- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] Documentation content changes
- [ ] Other (please describe):
What is the current behavior?
When the range knob is hover, focused or active, users do not receive any visual feedback.
Issue URL: Internal
What is the new behavior?
Android (md)
Implements the pattern for hover, focus and active statement as defined in this graphic:
- When the range knob is focused, the knob indicator will display a highlight surrounding the knob (themed to the background color of the knob).
- When the range knob is focused and the pin is enabled, the pin will display on focus.
iOS
- When the range knob is focused and the pin is enabled, the pin will display on focus.
Does this introduce a breaking change?
- [ ] Yes
- [x] No
Other information
I need to update the screenshot tests to capture the individual states with just the class assigned vs. Playwright performing focus/hover/etc.
Edit: It might actually just be a problem with hover, since we test on devices that don't support the media query.
Will re-ping once that is ready.
Thinking about this more, this is a new behavior so we should target feature-6.3
instead of main
. Also, is there a way to customize this focused state independent of the color
prop? Seems like you can do ::part(knob)::before
, right?