Skip to content

feat(touch-action): adding touch action none to draggable components #3656

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.

Sign up for GitHub

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

Open
wants to merge 8 commits into
base: spectrum-two
Choose a base branch
from
Open

feat(touch-action): adding touch action none to draggable components #3656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe4cef8
feat(touch-action): adding touch action to draggable components
aramos-adobe Apr 3, 2025
d875a7f
chore(touch-action): restoring some metadata files
aramos-adobe Apr 3, 2025
4580ba2
Merge branch 'spectrum-two' into aramos-adobe/css1078-s2-touch-action…
aramos-adobe Apr 4, 2025
e1a0e42
Merge branch 'spectrum-two' into aramos-adobe/css1078-s2-touch-action…
aramos-adobe Apr 16, 2025
b8f7b08
Merge branch 'spectrum-two' into aramos-adobe/css1078-s2-touch-action…
aramos-adobe Apr 17, 2025
295ed1e
chore(touch-action): token files
aramos-adobe Apr 17, 2025
8de4da1
chore(touch-action): adding token files)
aramos-adobe Apr 17, 2025
8c1ff4f
Merge branch 'spectrum-two' into aramos-adobe/css1078-s2-touch-action…
aramos-adobe Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .changeset/thick-ears-win.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"@spectrum-css/colorhandle": minor
"@spectrum-css/colorslider": minor
"@spectrum-css/colorarea": minor
"@spectrum-css/slider": minor
Copy link
Collaborator

Choose a reason for hiding this comment

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

Color wheel should be added to this list, too!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@marissahuysentruyt already had it before these additions

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt Apr 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

It looks like the color wheel index.css file was changed, so it should be added to this list of components, right? So that it gets the proper minor version bump as well?

---

### 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.
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think "manages" should be past tense, "managed."


Adding `touch-action: none` to 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.
Copy link
Collaborator

Choose a reason for hiding this comment

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

I also think we can remove the hyphen between "zooming" and "from."

2 changes: 2 additions & 0 deletions components/colorarea/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));

touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */

&.is-focused {
z-index: 2;
}
Expand Down
3 changes: 3 additions & 0 deletions components/colorhandle/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@

transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);

touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
user-select: none; /* Prevent text selection when dragging the handle */

&::after {
content: "";
inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
Expand Down
2 changes: 2 additions & 0 deletions components/colorslider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width));

touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */

/* Otherwise we randomly drag a file icon */
user-select: none;

Expand Down
1 change: 1 addition & 0 deletions components/colorwheel/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size));
block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size));
touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
user-select: none;
cursor: default;

Expand Down
3 changes: 3 additions & 0 deletions components/slider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,9 @@
padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));

touch-action: none;
user-select: none;
Comment on lines +210 to +211
Copy link
Collaborator

Choose a reason for hiding this comment

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

You left really great comments in color handle CSS regarding these two properties. Did you want to add them here as well?

Not a blocker if you don't feel like it- I just really liked the comments! 😆

Copy link
Collaborator

Choose a reason for hiding this comment

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

@aramos-adobe I was trying to test this, and struggling with the slider. I wonder if it's because .spectrum-Slider-track and .spectrum-Slider-fill are only like, 2px high. This is the only component I feel like I can't really verify.

I also ended up with another question -do you think touch-action should go on the slider handle, also? What about the .spectrum-Slider-track ~ .spectrum-Slider-track selector?


&::before {
content: "";
display: block;
Expand Down
837 changes: 837 additions & 0 deletions tokens/dist/css/dark-vars.css
View file
Open in desktop

Large diffs are not rendered by default.

1,114 changes: 1,114 additions & 0 deletions tokens/dist/css/global-vars.css
View file
Open in desktop

Large diffs are not rendered by default.

4,347 changes: 4,347 additions & 0 deletions tokens/dist/css/index.css
View file
Open in desktop

Large diffs are not rendered by default.

803 changes: 803 additions & 0 deletions tokens/dist/css/large-vars.css
View file
Open in desktop

Large diffs are not rendered by default.

838 changes: 838 additions & 0 deletions tokens/dist/css/light-vars.css
View file
Open in desktop

Large diffs are not rendered by default.

801 changes: 801 additions & 0 deletions tokens/dist/css/medium-vars.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading