fix(alert, action-sheet): show scrollbar for long list of options #28369
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
thetaPC
changed the title
thetaPC
changed the title
thetaPC
changed the title
thetaPC
requested review from
a team and
liamdebeasi
and removed request for
a team
liamdebeasi
reviewed
Oct 19, 2023
liamdebeasi
approved these changes
Oct 23, 2023
There was a problem hiding this comment.
Implementation looks good. When merging, I recommend making it clear on the linked issue that scrollbars for action sheet and alert will now show up on non-touch devices, so during development developers should expect to see scrollbars (but not on actual mobile devices)
Comment on lines
145
to
154
| // Scrollbars on mobile devices will be hidden. | ||
| // Users can still scroll the content by swiping. | ||
| // If a user has a pointing device, such as a | ||
| // mouse or trackpad, then scrollbars will be | ||
| // visible. This allows users to scroll the | ||
| // content with their pointing device. | ||
| // Otherwise, the user would have to use the | ||
| // keyboard to navigate through the options. | ||
| // This may not be intuitive for users who | ||
| // are not familiar with keyboard navigation. |
There was a problem hiding this comment.
~ Can we use multi-line comments instead?
core/src/components/alert/alert.scss
Outdated
Comment on lines
94
to
103
| // Scrollbars on mobile devices will be hidden. | ||
| // Users can still scroll the content by swiping. | ||
| // If a user has a pointing device, such as a | ||
| // mouse or trackpad, then scrollbars will be | ||
| // visible. This allows users to scroll the | ||
| // content with their pointing device. | ||
| // Otherwise, the user would have to use the | ||
| // keyboard to navigate through the options. | ||
| // This may not be intuitive for users who | ||
| // are not familiar with keyboard navigation. |
There was a problem hiding this comment.
~ Can we use multi-line comments instead?
core/src/components/alert/alert.scss
Outdated
| display: none; | ||
| // Scrollbars on mobile devices will be hidden. | ||
| // Users can still scroll the content by swiping. | ||
| // If a user has a pointing device, such as a |
There was a problem hiding this comment.
Suggested change
| // If a user has a pointing device, such as a | |
| // If a user has a fine pointing device, such as a |
| display: none; | ||
| // Scrollbars on mobile devices will be hidden. | ||
| // Users can still scroll the content by swiping. | ||
| // If a user has a pointing device, such as a |
There was a problem hiding this comment.
Suggested change
| // If a user has a pointing device, such as a | |
| // If a user has a fine pointing device, such as a |
sean-perkins
pushed a commit
that referenced
this pull request
Oct 27, 2023
…8369) Issue number: resolves #18487 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Web-based users do not get a scrollbar when: - alert has a long list of inputs (this also happens on `ion-select` with the alert interface) - `ion-select` uses the action-sheet interface and has a long list of options This makes it difficult for users to navigate through the options by forcing them to use their keyboards. Some users may also not be used to using their keyboards for navigation. Additionally, this can lead to potential confusion that there are no other options. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Web-based users get a scrollbar when: - alert has a long list of inputs (this also happens on `ion-select` with the alert interface) - `ion-select` uses the action-sheet interface and has a long list of options ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The issue was filed for the alert interface but it's also happening on the action-sheet interface. Dev build: 7.5.1-dev.11697570585.1774584d
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #18487
What is the current behavior?
Web-based users do not get a scrollbar when:
ion-selectwith the alert interface)ion-selectuses the action-sheet interface and has a long list of optionsThis makes it difficult for users to navigate through the options by forcing them to use their keyboards. Some users may also not be used to using their keyboards for navigation. Additionally, this can lead to potential confusion that there are no other options.
What is the new behavior?
Web-based users get a scrollbar when:
ion-selectwith the alert interface)ion-selectuses the action-sheet interface and has a long list of optionsDoes this introduce a breaking change?
Other information
The issue was filed for the alert interface but it's also happening on the action-sheet interface.
Dev build: 7.5.1-dev.11697570585.1774584d