Skip to content

Revert "feat(Switch): the touch presentation, for every pointer (#9636)" #9682

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

Closed
cixzhang wants to merge 1 commit into from
Closed

Revert "feat(Switch): the touch presentation, for every pointer (#9636)" #9682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 0 additions & 7 deletions .changeset/switch-every-pointer.md
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions .changeset/switch-touch-presentation.md
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions .changeset/uikit-switch-values.md
View file
Open in desktop

This file was deleted.

58 changes: 0 additions & 58 deletions apps/storybook/stories/Switch.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,61 +648,3 @@ export const PressedState: Story = {
);
},
};

export const BesideALink: Story = {
name: 'Beside a link',
parameters: {
docs: {
description: {
story:
'A small switch 8 px from a link. Under a coarse pointer the switch’s invisible hit area grows toward 44 × 44 px but stops halfway to the link, so a tap on the link opens it and a tap nearer the switch toggles it.',
},
},
},
render: () => {
const [value, setValue] = useState(false);
return (
<div style={{display: 'flex', alignItems: 'center', gap: 8}}>
<Switch
label="Wi-Fi"
isLabelHidden
size="sm"
value={value}
onChange={setValue}
/>
<a href="#wifi-details">Details</a>
</div>
);
},
};

export const InScrollingList: Story = {
name: 'In a scrolling list',
parameters: {
docs: {
description: {
story:
'Switches in rows of a list taller than the screen, as in a settings page. Under a finger, a vertical drag scrolls the page and changes nothing, even after the finger rests on a switch; a horizontal drag moves the thumb, and a tap toggles.',
},
},
},
render: () => {
const [values, setValues] = useState<boolean[]>(() =>
Array.from({length: 24}, (_, i) => i % 3 === 0),
);
return (
<div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
{values.map((value, i) => (
<Switch
key={i}
label={`Setting ${i + 1}`}
value={value}
onChange={next =>
setValues(current => current.map((v, j) => (j === i ? next : v)))
}
/>
))}
</div>
);
},
};
63 changes: 28 additions & 35 deletions docs/specs/AST-094-touch-presentations/motion-roles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,31 @@

Every motion role a registered table lists (`spec:AST-094` FR4, DEC-5): its kind, its default as the table measures it, and the record that names it. A role FR4 lists is named by FR4; any other role is one a component's own record measures, named by the current component records that carry its id.

| Role | Kind | Default | Named by |
| ------------------------------- | -------- | --------------------------------------------------------------- | ----------------------- |
| `progress.curves.fill` | curve | cubic-bezier(0, 0, 1, 1) | `component:ProgressBar` |
| `progress.fillTrackMs` | duration | 1000 ms | `component:ProgressBar` |
| `progress.reducedMotionPulseMs` | duration | 2000 ms | `component:ProgressBar` |
| `springs.contextMenuDismiss` | spring | response 0.35 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.contextMenuLift` | spring | response 0.32 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.contextMenuMorph` | spring | response 0.3 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.directChange` | spring | response 0.5 s, damping ratio 0.825 | `spec:AST-094` FR4 |
| `springs.emphasis` | spring | duration 0.5 s, bounce 0.3 | `spec:AST-094` FR4 |
| `springs.fingerTracking` | spring | response 0.15 s, damping ratio 0.86 | `spec:AST-094` FR4 |
| `springs.menuClose` | spring | response 0.35 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.menuOpen` | spring | response 0.32 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.quickChange` | spring | duration 0.5 s, bounce 0.15 | `spec:AST-094` FR4 |
| `springs.settle` | spring | duration 0.5 s, bounce 0 | `spec:AST-094` FR4 |
| `springs.sliderDrop` | spring | response 0.5 s, damping ratio 0.7 | `component:Slider` |
| `springs.sliderLift` | spring | response 0.215 s, damping ratio 0.6 | `component:Slider` |
| `springs.sliderRelease` | spring | response 0.4 s, damping ratio 1 | `component:Slider` |
| `springs.stateChange` | spring | response 0.55 s, damping ratio 1 | `spec:AST-094` FR4 |
| `springs.subMenuBack` | spring | response 0.4 s, damping ratio 1 | `spec:AST-094` FR4 |
| `springs.subMenuOpen` | spring | response 0.4 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.timedChange` | spring | duration 0.5 s, bounce 0 | `spec:AST-094` FR4 |
| `springs.viewChange` | spring | mass 3, stiffness 1000, damping 500 | `spec:AST-094` FR4 |
| `switchControl.lift` | spring | response 0.23 s, damping ratio 0.55 | `component:Switch` |
| `switchControl.minimumLiftMs` | duration | 235 ms | `component:Switch` |
| `switchControl.settle` | spring | response 0.5 s, damping ratio 0.7 | `component:Switch` |
| `switchControl.tracking` | spring | response 0.36 s, damping ratio 1 | `component:Switch` |
| `switchControl.travel` | spring | response 0.3 s, damping ratio 1 | `component:Switch` |
| `switchControl.wellOff` | spring | mass 1, stiffness 246.74011002723395, damping 31.41592653589793 | `component:Switch` |
| `switchControl.wellOn` | spring | mass 1, stiffness 85.37720070146501, damping 18.47995678582231 | `component:Switch` |
| `timing.curves.entrance` | curve | cubic-bezier(0, 0, 0.58, 1) | `spec:AST-094` FR4 |
| `timing.curves.exit` | curve | cubic-bezier(0.42, 0, 1, 1) | `spec:AST-094` FR4 |
| `timing.curves.move` | curve | cubic-bezier(0.42, 0, 0.58, 1) | `spec:AST-094` FR4 |
| `timing.curves.viewChange` | curve | cubic-bezier(0.25, 0.1, 0.25, 1) | `spec:AST-094` FR4 |
| `timing.stateChangeMs` | duration | 250 ms | `spec:AST-094` FR4 |
| Role | Kind | Default | Named by |
| ------------------------------- | -------- | ----------------------------------- | ----------------------- |
| `progress.curves.fill` | curve | cubic-bezier(0, 0, 1, 1) | `component:ProgressBar` |
| `progress.fillTrackMs` | duration | 1000 ms | `component:ProgressBar` |
| `progress.reducedMotionPulseMs` | duration | 2000 ms | `component:ProgressBar` |
| `springs.contextMenuDismiss` | spring | response 0.35 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.contextMenuLift` | spring | response 0.32 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.contextMenuMorph` | spring | response 0.3 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.directChange` | spring | response 0.5 s, damping ratio 0.825 | `spec:AST-094` FR4 |
| `springs.emphasis` | spring | duration 0.5 s, bounce 0.3 | `spec:AST-094` FR4 |
| `springs.fingerTracking` | spring | response 0.15 s, damping ratio 0.86 | `spec:AST-094` FR4 |
| `springs.menuClose` | spring | response 0.35 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.menuOpen` | spring | response 0.32 s, damping ratio 0.8 | `spec:AST-094` FR4 |
| `springs.quickChange` | spring | duration 0.5 s, bounce 0.15 | `spec:AST-094` FR4 |
| `springs.settle` | spring | duration 0.5 s, bounce 0 | `spec:AST-094` FR4 |
| `springs.sliderDrop` | spring | response 0.5 s, damping ratio 0.7 | `component:Slider` |
| `springs.sliderLift` | spring | response 0.215 s, damping ratio 0.6 | `component:Slider` |
| `springs.sliderRelease` | spring | response 0.4 s, damping ratio 1 | `component:Slider` |
| `springs.stateChange` | spring | response 0.55 s, damping ratio 1 | `spec:AST-094` FR4 |
| `springs.subMenuBack` | spring | response 0.4 s, damping ratio 1 | `spec:AST-094` FR4 |
| `springs.subMenuOpen` | spring | response 0.4 s, damping ratio 0.85 | `spec:AST-094` FR4 |
| `springs.timedChange` | spring | duration 0.5 s, bounce 0 | `spec:AST-094` FR4 |
| `springs.viewChange` | spring | mass 3, stiffness 1000, damping 500 | `spec:AST-094` FR4 |
| `timing.curves.entrance` | curve | cubic-bezier(0, 0, 0.58, 1) | `spec:AST-094` FR4 |
| `timing.curves.exit` | curve | cubic-bezier(0.42, 0, 1, 1) | `spec:AST-094` FR4 |
| `timing.curves.move` | curve | cubic-bezier(0.42, 0, 0.58, 1) | `spec:AST-094` FR4 |
| `timing.curves.viewChange` | curve | cubic-bezier(0.25, 0.1, 0.25, 1) | `spec:AST-094` FR4 |
| `timing.stateChangeMs` | duration | 250 ms | `spec:AST-094` FR4 |
2 changes: 1 addition & 1 deletion docs/specs/AST-094-touch-presentations/spec.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ a measured, sourced difference exists.
activation stays the browser's click, except that an action a
`family:action-groups` member tracks activates at the lift (FR26), and a toggle
under `spec:AST-020` FR9's slide-off exception (Switch, Checkbox,
CheckboxListItem) may also complete on a lift after the finger slid off; and a Switch completes its own toggle at the lift of a finger hold or a flipping drag, rather than through the browser's click (`component:Switch` FR15). Where the engine hit-tests an element a compositor animation moves at the motion's start (iOS WebKit), a touch on moving content goes to what was drawn under the finger at touch-down, and a tap there (no recognizer claimed it, the browser did not take it, and it stayed within 45 pt) MUST activate it: the browser's own click for that touch is cancelled or swallowed, and that element receives one click, an editable focused first.
CheckboxListItem) may also complete on a lift after the finger slid off. Where the engine hit-tests an element a compositor animation moves at the motion's start (iOS WebKit), a touch on moving content goes to what was drawn under the finger at touch-down, and a tap there (no recognizer claimed it, the browser did not take it, and it stayed within 45 pt) MUST activate it: the browser's own click for that touch is cancelled or swallowed, and that element receives one click, an editable focused first.
Under a fine pointer a control uses a third profile with no delay: its
press paint starts at once on `pointerdown`, through the same press
controller and release fade as a finger's, in place of CSS `:active`; the
Expand Down
Loading