ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

fix(range): indication when range knob is focused

Open sean-perkins opened this issue 1 year ago • 2 comments

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.
  • [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

sean-perkins avatar Aug 25 '22 20:08 sean-perkins

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.

sean-perkins avatar Sep 01 '22 16:09 sean-perkins

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?

liamdebeasi avatar Sep 13 '22 23:09 liamdebeasi