Skip to content

fix: write D9Skeleton's margin classes in full and rebuild lines on change (BITS-212) - #25

Merged
PhilReinking merged 1 commit into
mainfrom
fix/bits-212-skeleton-widths
Oct 11, 2026
Merged

PhilReinking merged 1 commit into
mainfrom
fix/bits-212-skeleton-widths

Conversation

@PhilReinking

Copy link
Copy Markdown
Contributor

D9Skeleton now writes its eight line margin classes out in full, so Input's Tailwind generates them and the loader lines get varied widths again. On main, Input's CSS has only mr-4 and mr-6, so most lines render full width. The lines are also a computed now: lines of -1 or 2.5 no longer throw, and a new lines value re-renders.

Fixes BITS-212

  • Fractional lines round down, negative ones render none. The line block hides when the count rounds to 0, so 0.5 leaves no empty gap.
  • Each line still gets a random width. A lines change re-rolls all widths, not only the new lines.
  • Props and slots are unchanged, so Input needs no change.

Tested: check, build and tests pass, and the new spec fails on main. Input's Tailwind build has all 8 classes with this branch. Storybook checked in Brave.

Not tested: Input's dashboard itself in a browser, and Chrome, Safari or Firefox by hand.

🤖 Generated with Claude Code

…hange (BITS-212)

Tailwind only generates classes it finds written out, so the runtime
`mr-${n}` left six of the eight line widths without CSS in Input. The
lines are now a computed over a clamped, floored count, so -1 or 2.5
no longer throw and a new `lines` value re-renders.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

@PhilReinking PhilReinking left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK at 87b7ac6, CI green.

Checked against main: Input's own Tailwind (3.4.19) on this build emits all 8 .ipt .mr-N rules, on main only mr-4 and mr-6. The 3 new specs fail on main's Skeleton.vue. Widths stay the same on unrelated re-renders and re-roll only when lines changes. NaN, null and 0.5 render no lines and no gap; Infinity still throws, as on main.

@PhilReinking
PhilReinking merged commit 0d2da08 into main Oct 11, 2026
1 check passed
@PhilReinking
PhilReinking deleted the fix/bits-212-skeleton-widths branch October 11, 2026 15:53
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