Skip to content

Fix v3 documentation code snippets to match live previews#40

Open
diederik-lascaris wants to merge 1 commit intotallstackui:3.xfrom
diederik-lascaris:fix/docs-code-snippet-preview-mismatches
Open

Fix v3 documentation code snippets to match live previews#40
diederik-lascaris wants to merge 1 commit intotallstackui:3.xfrom
diederik-lascaris:fix/docs-code-snippet-preview-mismatches

Conversation

@diederik-lascaris
Copy link
Copy Markdown

Summary

Eight component examples in the v3 docs had drift between the rendered live preview and the code snippet shown under the copy button, so users copying the snippet could not reproduce what they saw above it. This PR aligns each snippet with its preview.

Changes

  • Ui/Card COLOR — add missing light attribute to the "Light Variation" card
  • Ui/Avatar PRESENCE_POSITIONS — replace invalid top-left/top-right/bottom-left/bottom-right values with the valid right-top/right-bottom/left-top/left-bottom accepted by the component
  • Ui/Progress CIRCLE_FOOTER_SLOT — use <x-progress.circle> instead of <x-progress> to match the previewed component
  • Ui/Tooltip ICONS — add missing icon="shield-check" to the Right tooltip
  • Form/Currency LABEL_HINT — fix typo "Salady" → "Salary"
  • Form/Number MIN_MAX — restore label, hint and match the min/max values shown in the preview
  • Form/Password BASIC — fix casing "TallStackUi" → "TallStackUI"
  • Alpine INPUT — fix credit card value from "200.000" to a valid 16-digit card number so the custom mask demonstrates correctly

Test plan

  • ./vendor/bin/pest --filter="V3" passes
  • Reviewer: spot-check a couple of the affected pages in the docs site and confirm the code block under the copy button now matches the preview above it

Eight component examples had drift between the live preview and the
code snippet shown under the copy button, so users copying the snippet
could not reproduce what they saw above it:

- Ui/Card COLOR: add missing `light` attribute to "Light Variation"
- Ui/Avatar PRESENCE_POSITIONS: replace invalid top/bottom-left/right
  values with the valid right-top/right-bottom/left-top/left-bottom
  accepted by the component
- Ui/Progress CIRCLE_FOOTER_SLOT: use <x-progress.circle> instead of
  <x-progress> to match the previewed component
- Ui/Tooltip ICONS: add missing icon="shield-check" to the Right tooltip
- Form/Currency LABEL_HINT: fix typo "Salady" -> "Salary"
- Form/Number MIN_MAX: restore label, hint and match min/max values
  shown in the preview
- Form/Password BASIC: fix case "TallStackUi" -> "TallStackUI"
- Alpine INPUT: fix credit card value from "200.000" to a valid
  16-digit card number so the custom mask demonstrates correctly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant