feat(typography): add FluxTypography prose component#24
Conversation
Introduce FluxTypography, a prose wrapper that scopes the rich typographic system (vertical rhythm, decorated blockquotes, lists, code, tables, images) that used to apply globally. Outside the component only light element defaults remain: heading sizes, links and the monospace font. - Add FluxTypography with tag, as-child and container props - Add FluxTypographyReset to opt a subtree out of the prose styling while it keeps flowing in the vertical rhythm - Reset bare list styling globally; align prose tables with FluxTable - Add docs page, runnable examples and VitePress theme carve-outs so previews render with the real Flux typography BREAKING CHANGE: the automatic vertical spacing between bare headings, paragraphs, lists, blockquotes and images no longer applies globally. Wrap document content in FluxTypography to restore it.
|
Warning Review limit reached
Next review available in: 46 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughChangesThe PR adds Typography feature
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant DocumentationExample
participant FluxTypography
participant RenderedMarkup
participant TypographyStyles
DocumentationExample->>FluxTypography: provide typography content
FluxTypography->>RenderedMarkup: render wrapper or single child
TypographyStyles->>RenderedMarkup: apply scoped prose styles
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/code/components/typography/article.vue`:
- Around line 82-83: Replace the empty alt attribute on the content image with a
concise, meaningful description of the depicted delicate arch and night-star
landscape. Keep the existing image source and surrounding documentation
unchanged.
In `@docs/code/guide/introduction/typography/image.vue`:
- Around line 2-6: Replace the empty alt attribute on the landscape image inside
FluxTypography with concise descriptive text that conveys the photo’s content,
preserving the existing image source and typography demonstration.
In `@docs/components/typography.md`:
- Line 39: Update the prose describing reading content to hyphenate “long-form”
when it appears as a compound adjective before “reading,” leaving the
surrounding typography guidance unchanged.
In `@packages/components/src/css/component/Typography.module.scss`:
- Line 124: Replace the deprecated word-break: break-word declaration in the
Typography styles with overflow-wrap: break-word, preserving the existing
wrapping behavior and matching the established reset.scss pattern.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 64feaab9-0125-4bd8-bdc5-cfe9608d8899
📒 Files selected for processing (27)
docs/.vitepress/component-navigation.tsdocs/.vitepress/theme/FluxView.vuedocs/.vitepress/theme/override/vp-doc.cssdocs/.vitepress/theme/style.cssdocs/code/components/flyout/preview.vuedocs/code/components/typography/article.vuedocs/code/components/typography/blockquote.vuedocs/code/components/typography/code.vuedocs/code/components/typography/headings.vuedocs/code/components/typography/lists.vuedocs/code/components/typography/paragraph.vuedocs/code/components/typography/preview.vuedocs/code/components/typography/reset.vuedocs/code/components/typography/table.vuedocs/code/guide/introduction/typography/blockquote.vuedocs/code/guide/introduction/typography/headings.vuedocs/code/guide/introduction/typography/image.vuedocs/code/guide/introduction/typography/lists.vuedocs/code/guide/introduction/typography/paragraph.vuedocs/components/typography.mddocs/guide/introduction/typography.mdpackages/components/src/component/FluxTypography.vuepackages/components/src/component/FluxTypographyReset.vuepackages/components/src/component/index.tspackages/components/src/css/component/Typography.module.scsspackages/components/src/css/reset.scsspackages/components/src/css/typography.scss
💤 Files with no reviewable changes (1)
- packages/components/src/css/typography.scss
- Use overflow-wrap instead of the deprecated word-break in table cells - Hyphenate "long-form" in the docs
1 participant
Summary
Introduces
FluxTypography, a prose wrapper that scopes Flux's rich typographic system so it only applies to opted-in document content. Outside the component, only light element defaults remain: heading sizes, links and the monospace font.What changed
New components
FluxTypography— prose wrapper withtag,as-childandcontainerprops.containercaps the content at a centered reading measure via--flux-typography-container(default90ch).FluxTypographyReset— opts a nested subtree out of the prose styling (e.g. a Flux component dropped into an article) while it keeps flowing in the vertical rhythm.Styling
.typography.small).ul/olstyling globally; rich lists return inside the component.FluxTablecomponent (borders, header, padding, left-aligned headers).Docs
Typographycomponent page with runnable examples (headings, paragraphs, lists, blockquote, code, table, reset, full article).FluxTypographyand migrated the flyout demo.[data-flux-typography]) so previews render with the real Flux typography instead of the docs theme's prose styling.Breaking change
The automatic vertical spacing between bare headings, paragraphs, lists, blockquotes and images no longer applies globally. Wrap document content in
<FluxTypography>to restore it.Summary by CodeRabbit
New Features
Bug Fixes