Skip to content

FSHSP-161 docs(readme): document the data-motion="off" kill-switch #81

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

Merged
LBU4SH merged 1 commit into from
Aug 24, 2026
Merged

FSHSP-161 docs(readme): document the data-motion="off" kill-switch #81

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
15 changes: 15 additions & 0 deletions projects/ui-kit-schematics/README.fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,21 @@ savoir : les stories de `ui-card` et `ui-read-only` s'appuient sur les classes
Gridaflex (`flex-x`, `flex-gap-x`…) pour leur mise en page : sans la grille, ces
deux-là s'affichent à plat.

### Motion, et sa désactivation

Copiés sous `src/app/shared/ui-core/motion/` : la directive `UiMotion` et ses
presets d'animation, entièrement pilotés par les tokens `--transition-*` —
aucun composant ne code une durée en dur. Un consommateur qui ne veut aucun
motion pose un seul attribut, rien à toucher composant par composant :

```html
<html data-motion="off"></html>
```

Même réinitialisation que celle déjà appliquée automatiquement pour
`prefers-reduced-motion: reduce`. Référence complète, une fois votre Storybook
posé (voir ci-dessus) : **Foundations → Motion**.

### Agent IA (serveur MCP)

Posé par défaut aussi : un petit serveur MCP copié dans `.ui-kit-mcp/` (un fichier
Expand Down
15 changes: 15 additions & 0 deletions projects/ui-kit-schematics/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,21 @@ later never removes what an earlier install put in place. Note that the `ui-card
and `ui-read-only` stories use Gridaflex classes (`flex-x`, `flex-gap-x`…) for
their layout: without the grid, those two render flat.

### Motion, and turning it off

Copied under `src/app/shared/ui-core/motion/`: the `UiMotion` directive and its
animation presets, driven entirely by `--transition-*` tokens — no component
hardcodes a duration. A consumer who wants no motion at all sets one attribute,
nothing to touch component by component:

```html
<html data-motion="off"></html>
```

Same reset the kit already applies automatically for `prefers-reduced-motion:
reduce`. Full reference, once your own Storybook is up (see above): **Foundations
→ Motion**.

### AI agent (MCP server)

Also set up by default: a small MCP server copied into `.ui-kit-mcp/` (a bundled,
Expand Down
17 changes: 17 additions & 0 deletions projects/ui-kit/README.fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,23 @@ Pour changer une valeur, trois niveaux, du plus large au plus étroit :
Référence complète (chaque variable, son rôle, sa valeur mesurée) : Storybook →
_Spécifications → Thème & Système de Tokens_.

### Motion, et sa désactivation

Chaque transition et animation du kit est pilotée par les tokens `--transition-*`
et les presets `UiMotion` — aucun composant ne code une durée en dur. Désactiver
le motion est donc un seul interrupteur global, pas un réglage par composant :

```html
<html data-motion="off"></html>
```

Ça neutralise d'un coup toutes les animations et transitions du kit — la même
réinitialisation déjà appliquée automatiquement quand la préférence système
`prefers-reduced-motion: reduce` est active. Il existe aussi un opt-out par
élément (`[motionDisabled]` sur la directive `UiMotion`, depuis
`@4sh/ui-kit/motion`). Référence complète, presets d'animation compris :
Storybook → **Foundations → Motion**.

---

## `@4sh/ui-kit/forms` — socle des champs
Expand Down
16 changes: 16 additions & 0 deletions projects/ui-kit/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,22 @@ To change a value, three levels, from the broadest to the narrowest:
Full reference (every variable, its role and its measured value): Storybook →
_Spécifications → Thème & Système de Tokens_.

### Motion, and turning it off

Every transition and animation in the kit is driven by the `--transition-*`
tokens and the `UiMotion` presets — no component hardcodes a duration. Turning
motion off is therefore a single global switch, not a per-component setting:

```html
<html data-motion="off"></html>
```

This neutralizes every animation and transition in the kit at once — the same
reset already applied automatically when the OS-level `prefers-reduced-motion:
reduce` preference is on. A per-element opt-out also exists (`[motionDisabled]`
on the `UiMotion` directive, from `@4sh/ui-kit/motion`). Full reference,
including the animation presets: Storybook → **Foundations → Motion**.

---

## `@4sh/ui-kit/forms` — form field foundation
Expand Down
Loading