chore(storybook): DS base typography on the story canvas (deliberate re-baseline)#151
Merged
Merged
Conversation
Deliberate, standalone re-baseline (the follow-up flagged when Checkbox's first raw-text story exposed this). Storybook rendered inherited text in its own default font because nothing set a base on the canvas; Pharos components set their own font, but raw markup and font-inheriting elements fell back to Storybook's default — so Chromatic snapshotted them in the wrong typeface. - Add a `#storybook-root` rule in preview.css: DS base type (font-family sans + 14/20 + neutral-900), scoped to the canvas so docs (#storybook-docs) are untouched. Mirrors a real consumer that sets the DS type as its base (per D8/D9 the consumer provides typography). - Drop the now-redundant per-story decorator from Checkbox.stories. Consequence: ~50 Chromatic snapshots re-baseline (typography/color of inherited text only — no behaviour change). REQUIRES reviewing the diffs and accepting them knowingly. Storybook-only (never bundled, D9). No changeset. typecheck + test:storybook a11y (99) + build-storybook green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AgnovjGivnndpV7Yzt6AmY
|
Tip All tests passed and all changes approved!🟢 UI Tests: 49 visual and accessibility changes accepted as baselines |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Qué
La tarea que priorizamos tras el Checkbox. Storybook renderizaba el texto heredado en su fuente por defecto: los componentes Pharos fijan su propio
font-family, pero el texto crudo (un<label>) y cualquier elemento que solo hereda caían a la default de Storybook → Chromatic los snapshotaba con la tipografía equivocada.Cambio (solo Storybook)
#storybook-rootenpreview.csscon la tipografía base del DS (font-family sans + 14/20 + neutral-900), acotada al canvas (docs =#storybook-docsintactos). Simula un consumidor real que fija la tipografía del DS como base (por D8/D9 la tipografía la pone el consumidor).decoratorpor-story del Checkbox (ya redundante).Esto re-baselina ~50 snapshots de Chromatic: cambia la tipografía y el color del texto heredado en las stories de casi todos los componentes. No hay cambio de comportamiento.
Qué hacer al revisar en Chromatic: confirmar que los diffs son solo tipografía/color (Outfit + 14/20 + neutral-900 en el texto heredado) y aceptarlos conscientemente. Si ves algún diff que NO sea tipográfico (layout roto, solape, recorte), páralo y avísame.
Nota de diseño (posible follow-up)
Esto asume el contrato "el consumidor fija la tipografía base" (como hace
examples/saas-demodesde #149). Alternativa más robusta a evaluar aparte: que cada componente que hoy hereda fije su propiofont-family, para consumidores que no pongan base. No en esta PR.Verificación
typecheck · test:storybook a11y (99) · build-storybook — verdes. Storybook-only, sin changeset.
🤖 Generated with Claude Code
https://claude.ai/code/session_01AgnovjGivnndpV7Yzt6AmY