Storybook: Make sure that subcomponents are properly documented

[mirka]

Storybook 7 (#53520) does not support the display of subcomponents in the props tables, so they had to be removed.

We should go through the affected components and make sure that they are appropriately documented in some way or another. Simple subcomponents may be sufficiently documented just as a story of the parent component (e.g. DropdownContentWrapper). More complex subcomponents may warrant their own story pages. Maybe there are other ways as well.

Affected subcomponents

• AlignmentMatrixControl.Icon
• CardHeader, CardBody, CardDivider, CardMedia, CardFooter
• CircularOptionPicker.Option, CircularOptionPicker.ButtonAction, CircularOptionPicker.DropdownLinkAction
• DropdownMenuItem, DropdownSubMenu, DropdownSubMenuTrigger, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem
• DropdownContentWrapper
• FlexBlock, FlexItem
• InputControlPrefixWrapper, InputControlSuffixWrapper
• Item (in ItemGroup)
• NavigationBackButton, NavigationGroup, NavigationItem, NavigationMenu
• NavigatorScreen, NavigatorButton, NavigatorBackButton
• NoticeList
• PanelRow, PanelBody
• Radio
• Fill, SlotFillProvider
• ToggleGroupControlOption, ToggleGroupControlOptionIcon
• ToolbarButton, ToolbarGroup, ToolbarItem, ToolbarDropdownMenu
• ToolsPanelItem
• TreeGridRow, TreeGridCell

[bangank36]

If the subcomponents are included as the parent's story, then it won't make sense if someone visits its story page, eg:AlignmentMatrix.Icon has the main component controls only

More complex subcomponents may warrant their own story pages

I think this suggestion make sense, and the sidebar layout can be like

Another approach is customize the docs.page prop to create a custom docs page with argsTable and bring back the subcomponents
@psui preview.tsx / HoverCard stories

[mirka]

More complex subcomponents may warrant their own story pages

I think this suggestion make sense, and the sidebar layout can be like

Yes, I think this is the way to go.

Another approach is customize the docs.page prop to create a custom docs page with argsTable and bring back the subcomponents @psui preview.tsx / HoverCard stories

I wasn't aware of this thing, thanks. I tried it out in #53751 but realized it would remove the Controls from the Docs pages. I'm a bit hesitant to go through with this now, because I feel like it would be worse for the overall developer experience 😅

[bangank36]

but realized it would remove the Controls from the Docs pages

FYI, you will need the prop story for ArgsTable to show controls for the main story, you can explicitly set its value as

<ArgsTable story="^" />

or import PRIMARY_STORY from addon-docs

{
     PRIMARY_STORY
 } from '@storybook/addon-docs';
<ArgsTable story={PRIMARY_STORY} />

Found similar usage in equinor/design-system, they used a PropsTable in mdx stories. Example Navigation-tabs stories

Recording

[mirka]

@bangank36 It worked 😱 #53751

[bangank36]

It worked

💯
Personally, I think it is hard to find the full list of support props for this component 😓
PS: I think you meant ArgsTable not ArgsTypes? #53751 (comment)

[mirka]

PS: I think you meant ArgsTable not ArgsTypes? #53751 (comment)

You're right, I was just reading the v6 to v7 migration docs and got them mixed up 🤦