feat(touch-action): adding touch action none to draggable components #3656
+8,763
−0
Conversation
This file contains hidden or 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
🦋 Changeset detectedLatest commit: 8de4da1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
File metricsSummaryTotal size: 1.38 MB*
File change detailscolorarea
colorhandle
colorslider
colorwheel
slider
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3656--spectrum-css.netlify.app |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -2,7 +2,8 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/templ | |||
| import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; | |||
| import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; | |||
| import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; | |||
| import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; | |||
| import { getRandomId } from "@spectrum-css/preview/decorators"; | |||
| import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; | |||
There was a problem hiding this comment.
🚫 [eslint] <no-unused-vars> reported by reviewdog 🐶
'Typography' is defined but never used.
aramos-adobe
force-pushed
the
aramos-adobe/css1078-s2-touch-action-components
branch
from
90388d1 to
fe4cef8
Compare
aramos-adobe
added
ready-for-review
size-2 S
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.
Including the touch action rule for draggable content
The slider, color slider, color area, color wheel, color handle all deserve to have their touch-action property manages so that trying to set the value of those interfaces doesn't cause page scrolling in touch context.
Adding
touch-action: noneto a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming—from interfering with the component's intended interaction.How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Regression testing
Validate:
Screenshots
To-do list
Remove
touch-action: nonein listed components in SWCI have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨