feat(docs): consolidate component tabs into a single page - #2730
Merged
Jan-Eimertenbrink merged 62 commits intoAug 24, 2026
Conversation
Component pages no longer use Overview/Develop/Guidelines tabs. All content is now rendered stacked on one page in a single LayoutCard, in the order Guidelines → Overview → Develop, with the component name, description and GitHub/Markdown links as the first entry. - Move component name/description frontmatter from index.mdx into the page and keep index.mdx as the single primary file (its body is the former Overview content); the standalone code preview is removed. - The base component route renders the consolidated page; the former tab routes redirect to it (URL fragments are preserved), and nav, sitemap, search index and llms/raw-markdown output are updated accordingly. Content itself is left unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Jan-Eimertenbrink
requested review from
Lisa18289,
ins0,
maaaathis and
mfal
as code owners
July 28, 2026 08:58
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Jan-Eimertenbrink
marked this pull request as draft
July 28, 2026 08:59
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Each component is now one index.mdx containing the whole page in the order Guidelines → Overview → Develop (frontmatter unchanged). The separate guidelines.mdx and develop.mdx files are deleted. - ComponentContent renders the single index.mdx. - Search, raw-markdown (docPages) and sitemap now treat a component as one page instead of per-tab entries; the llms.txt example URL is updated accordingly. Content itself is unchanged (only concatenated in order). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Restructures the Button page into the new section order (Code-Beispiel, Verwendung, Variants, Color, Sizes, States, Content, Kombiniere mit, Properties) and fixes spelling/grammar throughout, so the reordered Button can serve as a discussion basis with the team. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This was
linked to
issues
Jul 29, 2026
Closed
- Add a separator between the header and the first section. - Verwendung: add a best-practice bullet about visual feedback after an action. - Move the descriptive copy above the code examples in Variants, Color, States, Icon and Text + Icon. - Light und Dark: link "Color" to the colors foundations page and re-add the light/dark code examples. - Kombiniere mit: add ActionGroup and Action sections (with examples), modelled on Align. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Sizes: stack the example vertically (drop `row`). - Icon / Text + Icon: show a single medium button per example. - Kombiniere mit ActionGroup: fix the example colors to match the ActionGroup convention (accent primary + secondary soft), and reword the section to describe grouping into a consistent hierarchy rather than mere side-by-side layout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mfal
added
1.0
- Verwendung: add a "Best Practices" subheading above the guidance list. - Sizes: bold Medium and Small. - Content: restate that text and icon must clearly describe the action. - Text + Icon: reword to stress that the combination is not decorative but extends context (chevron indicating a ContextMenu), with a link to ContextMenu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Jan-Eimertenbrink
marked this pull request as ready for review
August 6, 2026 14:05
Jan-Eimertenbrink
marked this pull request as draft
August 6, 2026 14:06
Resolves conflicts from main's 103 commits vs the tab-consolidation refactor. Strategy: - Content: took main's latest tab content and re-applied the mechanical consolidation (guidelines + overview + develop -> single index.mdx), so main's content edits and the navigation/tabs -> structure/tabs move are preserved. The hand-crafted Button page (POC) is kept as-is. - Groups.tsx: took main's version (already drops the /overview suffix). - MainNavigation.tsx: auto-merged — combines the base-path routing with main's ComponentStatusBadge and deprecated-sorting. - TabContent: stays deleted (replaced by ComponentContent). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rebuild the TextField page as a single flow matching the Button POC:
Code-Beispiel, Verwendung (+ Best Practices), Value, Input Properties
(+ Passwort), Character Count, Validierung, Disabled, Kombiniere mit,
Properties.
- Rewrite Verwendung + Best Practices to be styleguide-oriented: state
when to use a TextField and keep only TextField-specific practices;
link Forms, TextArea and the Forms pattern.
- Drop sections no longer in the outline (Anwendung, Inhalt,
Accessibility).
- Remove the obsolete `stretch` prop from all LiveCodeEditor examples.
- Fix two typos in reused copy ("textField", "einem Button").
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The Anwendung, Inhalt and Placeholder sections were dropped, so their examples are no longer referenced: required, columnLayout, placeholder, default, withoutLabel. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Code-Beispiel: drop the redundant "Verwende <TextField />" sentence; the code sample already shows it. - Best Practices: fold the TextArea hint into the single-line-input bullet instead of a separate point. - Disabled: replace the mechanical description with guidance to make the reason for the disabled state clear from context. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…itor The bare <LiveCodeEditor /> in the Code-Beispiel section implicitly loads the example named "default"; it was wrongly removed as orphaned in 4bcedf9, which broke the static export ("Could not find example default"). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Closed
Resolve the one modify/delete conflict on apps/docs/src/content/04-components/overlays/modal/overview.mdx: this branch consolidated the modal tab files into a single index.mdx, while main updated the confirmOnClose explanation (#2779). Keep the deletion of overview.mdx and fold main's revised wording — the reset-only phrasing plus the new submit-closes vs. modal-stays-open paragraph — into modal/index.mdx. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Verwendung: trim the intro to a single "when to use" sentence and link the Form (React Hook Form) component as the usual way to embed a field. - Validierung: lead with React Hook Form as the recommended approach; keep the native properties as the alternative. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Restructure the Modal docs into a single index.mdx following the Button-style layout: Code-Beispiel first (bare editor), Verwendung with a nested Best Practices, Modals vs. OffCanvas, Variants, Sizes, Ungespeicherte Änderungen, Show CloseButton, Kombiniere mit …, Properties. - Reorder and trim to the agreed outline; drop the old Inhalt, Writing Guidelines and Verhalten sections. - Add a Show CloseButton section documenting the showCloseButton prop, with a new showCloseButton example (Modal with ActionGroup where the close button stays visible). - Condense the Ungespeicherte Änderungen copy to the essentials. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Lisa18289
reviewed
Aug 21, 2026
Incorporate PR #2730 review comments across the component docs. - Drop the former tab segment (/overview, /guidelines) from all component links; fix broken slug (alertText) and dead fragments (alert#anwendung, alert-badge#grundlagen); point cartesian-chart at #categorical-color. - Content fixes per review: Chat aria-label wording, Message color sentence, Avatar "Farbe" wording + Color section correction, IllustratedMessage, Image border radius, Checkbox/CheckboxButton label rule, RadioGroup vs. SegmentedControl removal, Rating label link, Link isDisabled + Disabled heading, Section main-action sentence, ProgressBar/DonutChart status colors, MarkdownEditor custom-button bullet, DateRangePicker preset nesting, Separator description + vertical orientation. - Example updates: AvatarStack (ContextualHelp per avatar + Modal user list), Autocomplete (component names), HeaderNavigation (profile menu with avatar), Modal OffCanvas (Vertragspartnerdaten form), ColumnLayout + LabeledValue (LabeledValues), ContextMenu icons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Resolve modify/delete conflicts from two main PRs (#2833 SkeletonText, #2866 Switch/Label), preserving all content that landed on main: - SkeletonText (#2833): consolidate the newly added component from the old three-tab layout (overview/develop/guidelines) into a single index.mdx, matching this branch's structure. Fold main's additions into the existing consolidated pages: the "Skeleton vs. SkeletonText" comparison and the SkeletonText link into Skeleton, and the SkeletonText link into List's Loading View. Old tab files removed. - Switch/Label (#2866): the two conflicted example files (Label "usage", Modal "noAction") were already removed by this branch and are unreferenced, so keep them deleted; all surviving Switch usages arrived Label-wrapped from main. Also strip the tab suffix from links that arrived via main and fix the already-consolidated pages accordingly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-editor, column-layout) - Message: use a static text color (dark-static) in the Custom Color example so the text stays readable in dark mode on a custom background; note it in the Custom Color section. - MarkdownEditor: reword the custom-button bullet — you choose an icon and formulate a label, not "formulate an icon". - ColumnLayout: group the default LabeledValue example into two columns (Vorname/Nachname, Straße/Ort, Telefon/E-Mail). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lisa18289
reviewed
Aug 24, 2026
Lisa18289
reviewed
Aug 24, 2026
Lisa18289
reviewed
Aug 24, 2026
Lisa18289
reviewed
Aug 24, 2026
- LabeledValue/ColumnLayout: drop rowGap/columnGap, show the default case - Skeleton: drop SkeletonText from the bullet, "Formen wie" -> "Formen für" - HeaderNavigation: rebuild profile MenuItem (Initials + IconCamera, Heading as sibling) - Modal: replace OffCanvas example with the fuller "OffCanvas M" (SFTP user) example - ColumnLayout: drop l/rowGap/columnGap from default example Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lisa18289
approved these changes
Aug 24, 2026
Jan-Eimertenbrink
marked this pull request as ready for review
August 24, 2026 07:45
Jan-Eimertenbrink
deleted the
claude/komponenten-tabs-consolidate-9dd639
branch
August 24, 2026 07:45
Lisa18289
added a commit
that referenced
this pull request
Aug 24, 2026
main consolidated each component's three doc tabs into a single index.mdx (#2730), which deleted every overview.mdx / guidelines.mdx / develop.mdx this branch had edited. The docs half of the rename is rebuilt on that structure: - Combine and the deprecated Align are one index.mdx each, following the new spine (opening example → Best Practices → feature sections → Properties). - The Combine/Flex differentiation is a `## Combine vs. Flex` under Best Practices on both pages, per the new convention; the ColumnLayout distinction became a Best-Practice bullet on Flex and ColumnLayout. - Links drop the `/overview` suffix. Restores the component status badge and callout in ComponentContent: the tab consolidation built the page header inline and left both out, so a deprecated or beta component no longer showed its status on its own page. Message's visual test now uses Combine and is version-gated like the Combine scenarios; `combineSince` moved to a shared module. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
3 participants
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.
What
Component pages in the docs no longer use tabs (Overview/Develop/Guidelines). All content is now stacked on a single page inside one big
LayoutCard, in the order Guidelines → Overview → Develop. The component name, description and the GitHub/Markdown links are the first entry.The content itself is unchanged — that will be done in a later step.
Changes in detail
component/description/gitHubComponentPathnow live inindex.mdx, which stays the single primary file per component (its body is the former Overview content). The formeroverview.mdxis gone, and the standalone code preview is removed./overview,/develop,/guidelines) redirect to it — URL fragments are preserved, since all anchors now live on the base page.sitemap.ts, the search index, and the llms/raw-markdown output.TabContentcomponent; added:ComponentContent.Verification
sitemap.xml,llms.txtand/raw/.../*.mdare correct.tsc= 0 errors, ESLint/Prettier clean.Out of scope (intentionally not part of this PR)
## Overview/## Develop/## Guidelines) is not yet aligned to guidelines-first.🤖 Generated with Claude Code