From bfc5acd0c6de7609f084c3ed55ca19da087574c6 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Wed, 18 Mar 2026 16:02:29 +0100 Subject: [PATCH] feat(docs-ui): show sub-component changelogs on parent pages Add all exported sub-components to the Component type union so changelog entries referencing them are resolved correctly. Update ChangelogComponent to accept an array of components, showing scoped badges when filtering by multiple components. Update 13 component pages to include their sub-components in the changelog section. Signed-off-by: Johan Persson --- docs-ui/src/app/components/accordion/page.mdx | 9 +++- docs-ui/src/app/components/card/page.mdx | 4 +- docs-ui/src/app/components/dialog/page.mdx | 10 ++++- docs-ui/src/app/components/grid/page.mdx | 2 +- docs-ui/src/app/components/header/page.mdx | 2 +- docs-ui/src/app/components/list/page.mdx | 2 +- docs-ui/src/app/components/menu/page.mdx | 15 ++++++- .../src/app/components/radio-group/page.mdx | 2 +- .../components/search-autocomplete/page.mdx | 4 +- docs-ui/src/app/components/table/page.mdx | 15 ++++++- docs-ui/src/app/components/tabs/page.mdx | 2 +- docs-ui/src/app/components/tag-group/page.mdx | 2 +- docs-ui/src/app/components/tooltip/page.mdx | 2 +- docs-ui/src/components/Changelog/utils.tsx | 31 ++++++++++--- .../components/ChangelogComponent/index.tsx | 10 +++-- docs-ui/src/utils/types.ts | 45 ++++++++++++++++++- 16 files changed, 133 insertions(+), 24 deletions(-) diff --git a/docs-ui/src/app/components/accordion/page.mdx b/docs-ui/src/app/components/accordion/page.mdx index 486c93ec80..dc9b87b55d 100644 --- a/docs-ui/src/app/components/accordion/page.mdx +++ b/docs-ui/src/app/components/accordion/page.mdx @@ -147,4 +147,11 @@ Allows multiple panels to be open simultaneously. - + diff --git a/docs-ui/src/app/components/card/page.mdx b/docs-ui/src/app/components/card/page.mdx index 8df6eccb40..eb7ea2f7e4 100644 --- a/docs-ui/src/app/components/card/page.mdx +++ b/docs-ui/src/app/components/card/page.mdx @@ -136,4 +136,6 @@ Buttons and links inside the card remain independently interactive. Clicking the - + diff --git a/docs-ui/src/app/components/dialog/page.mdx b/docs-ui/src/app/components/dialog/page.mdx index 12ce2d4135..3989b02730 100644 --- a/docs-ui/src/app/components/dialog/page.mdx +++ b/docs-ui/src/app/components/dialog/page.mdx @@ -125,4 +125,12 @@ You can also control the dialog using your own states. - + diff --git a/docs-ui/src/app/components/grid/page.mdx b/docs-ui/src/app/components/grid/page.mdx index 8862586830..488a67ca0e 100644 --- a/docs-ui/src/app/components/grid/page.mdx +++ b/docs-ui/src/app/components/grid/page.mdx @@ -61,4 +61,4 @@ Use Grid.Item to span multiple columns. - + diff --git a/docs-ui/src/app/components/header/page.mdx b/docs-ui/src/app/components/header/page.mdx index 65dd8f2ea8..0ae9b045aa 100644 --- a/docs-ui/src/app/components/header/page.mdx +++ b/docs-ui/src/app/components/header/page.mdx @@ -63,4 +63,4 @@ Use `customActions` to add a dropdown menu. - + diff --git a/docs-ui/src/app/components/list/page.mdx b/docs-ui/src/app/components/list/page.mdx index dadeb9c1ee..26353de81c 100644 --- a/docs-ui/src/app/components/list/page.mdx +++ b/docs-ui/src/app/components/list/page.mdx @@ -100,4 +100,4 @@ Individual row within a List. - + diff --git a/docs-ui/src/app/components/menu/page.mdx b/docs-ui/src/app/components/menu/page.mdx index f1de264d73..158598fe71 100644 --- a/docs-ui/src/app/components/menu/page.mdx +++ b/docs-ui/src/app/components/menu/page.mdx @@ -226,4 +226,17 @@ Set `selectionMode="multiple"` to allow multiple selections. - + diff --git a/docs-ui/src/app/components/radio-group/page.mdx b/docs-ui/src/app/components/radio-group/page.mdx index 5cc296b959..c666a1f872 100644 --- a/docs-ui/src/app/components/radio-group/page.mdx +++ b/docs-ui/src/app/components/radio-group/page.mdx @@ -115,4 +115,4 @@ Individual radio button within a group. - + diff --git a/docs-ui/src/app/components/search-autocomplete/page.mdx b/docs-ui/src/app/components/search-autocomplete/page.mdx index ecb58f3377..ed307f92e2 100644 --- a/docs-ui/src/app/components/search-autocomplete/page.mdx +++ b/docs-ui/src/app/components/search-autocomplete/page.mdx @@ -92,4 +92,6 @@ Use `onAction` on items to handle selection and reset the input. - + diff --git a/docs-ui/src/app/components/table/page.mdx b/docs-ui/src/app/components/table/page.mdx index 8d0e803bd2..fc43256adb 100644 --- a/docs-ui/src/app/components/table/page.mdx +++ b/docs-ui/src/app/components/table/page.mdx @@ -305,4 +305,17 @@ Low-level components for building custom table layouts. - + diff --git a/docs-ui/src/app/components/tabs/page.mdx b/docs-ui/src/app/components/tabs/page.mdx index 6925127943..a07b70dcd3 100644 --- a/docs-ui/src/app/components/tabs/page.mdx +++ b/docs-ui/src/app/components/tabs/page.mdx @@ -113,4 +113,4 @@ Add `href` to Tab components to enable URL-based tab selection. The active tab i - + diff --git a/docs-ui/src/app/components/tag-group/page.mdx b/docs-ui/src/app/components/tag-group/page.mdx index 1b283a8170..18551ffed7 100644 --- a/docs-ui/src/app/components/tag-group/page.mdx +++ b/docs-ui/src/app/components/tag-group/page.mdx @@ -88,4 +88,4 @@ Individual tag item within a group. - + diff --git a/docs-ui/src/app/components/tooltip/page.mdx b/docs-ui/src/app/components/tooltip/page.mdx index 8a9711d56c..feccc05225 100644 --- a/docs-ui/src/app/components/tooltip/page.mdx +++ b/docs-ui/src/app/components/tooltip/page.mdx @@ -62,4 +62,4 @@ The tooltip appears in the specified direction relative to the trigger. - + diff --git a/docs-ui/src/components/Changelog/utils.tsx b/docs-ui/src/components/Changelog/utils.tsx index d2daed1176..f39aa7bba5 100644 --- a/docs-ui/src/components/Changelog/utils.tsx +++ b/docs-ui/src/components/Changelog/utils.tsx @@ -1,4 +1,4 @@ -import type { ChangelogProps } from '@/utils/types'; +import type { ChangelogProps, Component } from '@/utils/types'; // Badge Components export const Badge = ({ @@ -83,15 +83,22 @@ export const formatPRLinks = (prs: string[]): string => { export const generateEntryMarkdown = ( entry: ChangelogProps, - options: { showComponentBadges?: boolean } = {}, + options: { + showComponentBadges?: boolean; + componentBadgeFilter?: Component[]; + } = {}, ): string => { - const { showComponentBadges = true } = options; + const { showComponentBadges = true, componentBadgeFilter } = options; const prs = formatPRLinks(entry.prs); // Prepend component names as badges if available and requested + const entryComponents = entry.components ?? []; + const badgeComponents = componentBadgeFilter + ? entryComponents.filter(c => componentBadgeFilter.includes(c)) + : entryComponents; const componentBadges = - showComponentBadges && entry.components.length > 0 - ? entry.components + showComponentBadges && badgeComponents.length > 0 + ? badgeComponents .map(c => `${toTitleCase(c)}`) .join(' ') + ' ' : ''; @@ -120,6 +127,7 @@ export const generateEntryMarkdown = ( export interface GenerateChangelogOptions { showComponentBadges?: boolean; + componentBadgeFilter?: Component[]; headingLevel?: number; } @@ -127,7 +135,11 @@ export const generateChangelogMarkdown = ( entries: ChangelogProps[], options: GenerateChangelogOptions = {}, ): string => { - const { showComponentBadges = true, headingLevel = 2 } = options; + const { + showComponentBadges = true, + componentBadgeFilter, + headingLevel = 2, + } = options; // Group changelog entries by version const groupedChangelog = groupByVersion(entries); @@ -168,7 +180,12 @@ export const generateChangelogMarkdown = ( const bumpSections = sections .map(({ title, entries: sectionEntries }) => { const entriesMarkdown = sectionEntries - .map(e => generateEntryMarkdown(e, { showComponentBadges })) + .map(e => + generateEntryMarkdown(e, { + showComponentBadges, + componentBadgeFilter, + }), + ) .join('\n\n'); return `${sectionHeading} ${title}\n\n${entriesMarkdown}`; diff --git a/docs-ui/src/components/ChangelogComponent/index.tsx b/docs-ui/src/components/ChangelogComponent/index.tsx index cca75a9515..013764dbca 100644 --- a/docs-ui/src/components/ChangelogComponent/index.tsx +++ b/docs-ui/src/components/ChangelogComponent/index.tsx @@ -9,7 +9,7 @@ import { } from '../Changelog/utils'; type ChangelogComponentProps = AtLeastOne<{ - component: Component; + component: Component | Component[]; hook: Hook; }>; @@ -17,14 +17,18 @@ export const ChangelogComponent = ({ component, hook, }: Readonly) => { + const components = Array.isArray(component) ? component : [component]; const componentChangelog = changelog.filter( - c => c.components?.includes(component) || c.hooks?.includes(hook), + c => + c.components?.some(cc => components.includes(cc)) || + c.hooks?.includes(hook), ); const content = `## Changelog ${generateChangelogMarkdown(componentChangelog, { - showComponentBadges: false, + showComponentBadges: components.length > 1, + componentBadgeFilter: components.length > 1 ? components : undefined, headingLevel: 3, })}`; diff --git a/docs-ui/src/utils/types.ts b/docs-ui/src/utils/types.ts index 5f00c5be5d..8e03a1df07 100644 --- a/docs-ui/src/utils/types.ts +++ b/docs-ui/src/utils/types.ts @@ -1,5 +1,8 @@ export type Component = | 'accordion' + | 'accordion-group' + | 'accordion-panel' + | 'accordion-trigger' | 'alert' | 'avatar' | 'box' @@ -7,35 +10,75 @@ export type Component = | 'button-icon' | 'button-link' | 'card' + | 'card-body' + | 'card-footer' + | 'card-header' + | 'cell' + | 'cell-profile' + | 'cell-text' | 'checkbox' | 'collapsible' + | 'column' | 'container' | 'datatable' | 'dialog' + | 'dialog-body' + | 'dialog-footer' + | 'dialog-header' + | 'dialog-trigger' + | 'field-error' + | 'field-label' | 'flex' + | 'full-page' | 'grid' - | 'plugin-header' + | 'grid-item' | 'header' + | 'header-page' | 'heading' | 'icon' | 'link' | 'list' | 'list-row' | 'menu' + | 'menu-autocomplete' + | 'menu-autocomplete-listbox' + | 'menu-item' + | 'menu-list-box' + | 'menu-list-box-item' + | 'menu-section' + | 'menu-separator' + | 'menu-trigger' | 'password-field' + | 'plugin-header' + | 'popover' + | 'radio' | 'radio-group' + | 'row' | 'scrollarea' | 'search-autocomplete' + | 'search-autocomplete-item' | 'searchfield' | 'select' | 'skeleton' + | 'submenu-trigger' | 'switch' + | 'tab' + | 'tab-list' + | 'tab-panel' | 'table' + | 'table-body' + | 'table-header' + | 'table-pagination' + | 'table-root' | 'tabs' + | 'tag' | 'tag-group' | 'text' | 'textfield' + | 'toggle-button' + | 'toggle-button-group' | 'tooltip' + | 'tooltip-trigger' | 'visually-hidden'; export type Hook = 'use-breakpoint';