Skip to content
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

[docs][Slider] Prevent long presses from triggering context menu or text selection #1339

Merged
merged 5 commits into from
Jan 21, 2025
Merged

[docs][Slider] Prevent long presses from triggering context menu or text selection #1339

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c6dd6d
fix(docs/slider): prevent context menu from appearing on long press o…
onehanddev Jan 15, 2025
490fc14
fix: moved touch and select none styles from slider thumb to track
onehanddev Jan 16, 2025
7c25836
fix: added user and touch selection to none for all elements used in …
onehanddev Jan 16, 2025
8006317
Merge branch 'master' into fix/slider-touch-context-menu
onehanddev Jan 16, 2025
825a67b
fix: removed redundant touch none styles from slider controls descend…
onehanddev Jan 20, 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
8 changes: 8 additions & 0 deletions ...rc/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
align-items: center;
width: 14rem;
padding-block: 0.75rem;
touch-action: none;
Copy link
Member

Choose a reason for hiding this comment

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

👍 makes total sense to put this on Control actually, though it isn't needed on any descendents:

This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

(user-select is though, it doesn't inherit)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point @mj12albert, I have removed the touch-action property from all of the slider controls's children elements in the latest commit, please do have a look.

user-select: none;
}

.Track {
Expand All @@ -12,11 +14,15 @@
background-color: var(--color-gray-200);
box-shadow: inset 0 0 0 1px var(--color-gray-200);
border-radius: 0.25rem;
touch-action: none;
user-select: none;
}

.Indicator {
border-radius: 0.25rem;
background-color: var(--color-gray-700);
touch-action: none;
user-select: none;
}

.Thumb {
Expand All @@ -25,6 +31,8 @@
border-radius: 100%;
background-color: white;
outline: 1px solid var(--color-gray-300);
touch-action: none;
user-select: none;

&:focus-visible {
outline: 2px solid var(--color-blue);
Expand Down
8 changes: 4 additions & 4 deletions docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Slider } from '@base-ui-components/react/slider';
export default function ExampleSlider() {
return (
<Slider.Root defaultValue={25}>
<Slider.Control className="flex w-56 items-center py-3">
<Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
<Slider.Indicator className="rounded bg-gray-700" />
<Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
<Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
<Slider.Track className="h-1 w-full touch-none rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
<Slider.Indicator className="touch-none rounded bg-gray-700 select-none" />
<Slider.Thumb className="size-4 touch-none rounded-full bg-white outline outline-1 outline-gray-300 select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
</Slider.Track>
</Slider.Control>
</Slider.Root>
Expand Down
Loading