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 <johanopersson@gmail.com>

docs-ui/src/app/components/accordion/page.mdx

@@ -147,4 +147,11 @@ Allows multiple panels to be open simultaneously.
 
 <Theming definition={AccordionDefinition} />
 
-<ChangelogComponent component="accordion" />
+<ChangelogComponent
+  component={[
+    'accordion',
+    'accordion-trigger',
+    'accordion-panel',
+    'accordion-group',
+  ]}
+/>

docs-ui/src/app/components/card/page.mdx

@@ -136,4 +136,6 @@ Buttons and links inside the card remain independently interactive. Clicking the
 
 <Theming definition={CardDefinition} />
 
-<ChangelogComponent component="card" />
+<ChangelogComponent
+  component={['card', 'card-header', 'card-body', 'card-footer']}
+/>

docs-ui/src/app/components/dialog/page.mdx

@@ -125,4 +125,12 @@ You can also control the dialog using your own states.
 
 <Theming definition={DialogDefinition} />
 
-<ChangelogComponent component="dialog" />
+<ChangelogComponent
+  component={[
+    'dialog',
+    'dialog-trigger',
+    'dialog-header',
+    'dialog-body',
+    'dialog-footer',
+  ]}
+/>

docs-ui/src/app/components/grid/page.mdx

@@ -61,4 +61,4 @@ Use Grid.Item to span multiple columns.
 
 <Theming definition={GridDefinition} />
 
-<ChangelogComponent component="grid" />
+<ChangelogComponent component={['grid', 'grid-item']} />

docs-ui/src/app/components/header/page.mdx

@@ -63,4 +63,4 @@ Use `customActions` to add a dropdown menu.
 
 <Theming definition={HeaderDefinition} />
 
-<ChangelogComponent component="header" />
+<ChangelogComponent component={['header', 'header-page']} />

docs-ui/src/app/components/list/page.mdx

@@ -100,4 +100,4 @@ Individual row within a List.
 
 <Theming definition={ListDefinition} />
 
-<ChangelogComponent component="list" />
+<ChangelogComponent component={['list', 'list-row']} />

docs-ui/src/app/components/menu/page.mdx

@@ -226,4 +226,17 @@ Set `selectionMode="multiple"` to allow multiple selections.
 
 <Theming definition={MenuDefinition} />
 
-<ChangelogComponent component="menu" />
+<ChangelogComponent
+  component={[
+    'menu',
+    'menu-trigger',
+    'submenu-trigger',
+    'menu-item',
+    'menu-autocomplete',
+    'menu-autocomplete-listbox',
+    'menu-list-box',
+    'menu-list-box-item',
+    'menu-section',
+    'menu-separator',
+  ]}
+/>

docs-ui/src/app/components/radio-group/page.mdx

@@ -115,4 +115,4 @@ Individual radio button within a group.
 
 <Theming definition={RadioGroupDefinition} />
 
-<ChangelogComponent component="radio-group" />
+<ChangelogComponent component={['radio-group', 'radio']} />

docs-ui/src/app/components/search-autocomplete/page.mdx

@@ -92,4 +92,6 @@ Use `onAction` on items to handle selection and reset the input.
 
 <Theming definition={SearchAutocompleteItemDefinition} />
 
-<ChangelogComponent component="search-autocomplete" />
+<ChangelogComponent
+  component={['search-autocomplete', 'search-autocomplete-item']}
+/>

docs-ui/src/app/components/table/page.mdx

@@ -305,4 +305,17 @@ Low-level components for building custom table layouts.
 
 <Theming definition={TableDefinition} />
 
-<ChangelogComponent component="table" />
+<ChangelogComponent
+  component={[
+    'table',
+    'table-root',
+    'table-header',
+    'table-body',
+    'table-pagination',
+    'row',
+    'column',
+    'cell',
+    'cell-text',
+    'cell-profile',
+  ]}
+/>

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
 
 <Theming definition={TabsDefinition} />
 
-<ChangelogComponent component="tabs" />
+<ChangelogComponent component={['tabs', 'tab', 'tab-list', 'tab-panel']} />

docs-ui/src/app/components/tag-group/page.mdx

@@ -88,4 +88,4 @@ Individual tag item within a group.
 
 <Theming definition={TagGroupDefinition} />
 
-<ChangelogComponent component="tag-group" />
+<ChangelogComponent component={['tag-group', 'tag']} />

docs-ui/src/app/components/tooltip/page.mdx

@@ -62,4 +62,4 @@ The tooltip appears in the specified direction relative to the trigger.
 
 <Theming definition={TooltipDefinition} />
 
-<ChangelogComponent component="tooltip" />
+<ChangelogComponent component={['tooltip', 'tooltip-trigger']} />

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 => `<Badge variant="gray">${toTitleCase(c)}</Badge>`)
           .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}`;

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<ChangelogComponentProps>) => {
+  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,
 })}`;
 

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';