From 86da4ce8fb8cc0b84ebe1d9d9a69f67497c18629 Mon Sep 17 00:00:00 2001 From: LBU Date: Mon, 24 Aug 2026 10:08:13 +0200 Subject: [PATCH] FSHSP-161 docs(readme): document the data-motion="off" kill-switch Add a Motion section to the README (EN+FR) of both @4sh/ui-kit and @4sh/ui-kit-schematics, pointing consumers to the global data-motion="off" attribute already implemented and documented in Storybook (projects/ui-kit/motion/ui-motion.mdx). --- projects/ui-kit-schematics/README.fr.md | 15 +++++++++++++++ projects/ui-kit-schematics/README.md | 15 +++++++++++++++ projects/ui-kit/README.fr.md | 17 +++++++++++++++++ projects/ui-kit/README.md | 16 ++++++++++++++++ 4 files changed, 63 insertions(+) diff --git a/projects/ui-kit-schematics/README.fr.md b/projects/ui-kit-schematics/README.fr.md index e3d7e76..52b1f71 100644 --- a/projects/ui-kit-schematics/README.fr.md +++ b/projects/ui-kit-schematics/README.fr.md @@ -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 + +``` + +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 diff --git a/projects/ui-kit-schematics/README.md b/projects/ui-kit-schematics/README.md index a92b279..9523a75 100644 --- a/projects/ui-kit-schematics/README.md +++ b/projects/ui-kit-schematics/README.md @@ -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 + +``` + +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, diff --git a/projects/ui-kit/README.fr.md b/projects/ui-kit/README.fr.md index ae7f58d..00d1127 100644 --- a/projects/ui-kit/README.fr.md +++ b/projects/ui-kit/README.fr.md @@ -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 + +``` + +Ç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 diff --git a/projects/ui-kit/README.md b/projects/ui-kit/README.md index 495739d..41b1bd8 100644 --- a/projects/ui-kit/README.md +++ b/projects/ui-kit/README.md @@ -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 + +``` + +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