fix: component references, @jzempel review

Author: geotrev

docs/migration.md

@@ -44,8 +44,20 @@ consider additional positioning prop support on a case-by-case basis.
 #### @zendeskgarden/react-chrome
 
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
-- Some subcomponent exports have been deprecated and will be removed in a future major version.
-  Update to subcomponent properties.
+- Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
+- Subcomponent exports have been deprecated and will be removed in a future major version. Update
+  to subcomponent properties:
+  - `FooterItem` -> `Footer.Item`
+  - `HeaderItem` -> `Header.Item`
+  - `HeaderItemIcon` -> `Header.ItemIcon`
+  - `HeaderItemText` -> `Header.ItemText`
+  - `HeaderItemWrapper` -> `Header.ItemWrapper`
+  - `NavItem` -> `Nav.Item`
+  - `NavItemIcon` -> `Nav.ItemIcon`
+  - `NavItemText` -> `Nav.ItemText`
+  - `CollapsibleSubNavItem` -> `SubNav.CollapsibleItem`
+  - `SubNavItem` -> `SubNav.Item`
+  - `SubNavItemText` -> `SubNav.ItemText`
 
 #### @zendeskgarden/react-colorpickers
 

packages/chrome/demo/chrome.stories.mdx

@@ -52,8 +52,8 @@ import README from '../README.md';
     SkipNav,
     SubNav,
     'SubNav.CollapsibleItem': SubNav.CollapsibleItem,
-    'Sub.NavItem': Sub.NavItem,
-    'Sub.NavItemText': Sub.NavItemText
+    'SubNav.Item': SubNav.Item,
+    'SubNav.ItemText': SubNav.ItemText
   }}
 />
 
@@ -97,17 +97,17 @@ import README from '../README.md';
       isExpanded: { name: 'Nav isExpanded', table: { category: 'Story' } },
       isWrapped: { name: 'Nav/SubNav isWrapped', table: { category: 'Story' } },
       hasNav: { name: 'Nav', table: { category: 'Story' } },
-      navItems: { name: 'NavItem[]', table: { category: 'Story' } },
+      navItems: { name: 'Nav.Item[]', table: { category: 'Story' } },
       hasLogo: { name: 'Nav hasLogo', table: { category: 'Story' } },
       hasBrandmark: { name: 'Nav hasBrandmark', table: { category: 'Story' } },
       hasSubNav: { name: 'SubNav', table: { category: 'Story' } },
-      subNavItems: { name: 'SubNavItem[]', table: { category: 'Story' } },
+      subNavItems: { name: 'SubNav.Item[]', table: { category: 'Story' } },
       subNavMaxWidth: { name: 'SubNav max-width', control: 'number', table: { category: 'Story' } },
       hasHeader: { name: 'Header', table: { category: 'Story' } },
-      headerItems: { name: 'HeaderItem[]', table: { category: 'Story' } },
+      headerItems: { name: 'Header.Item[]', table: { category: 'Story' } },
       hasSidebar: { name: 'Sidebar', table: { category: 'Story' } },
       hasFooter: { name: 'Footer', table: { category: 'Story' } },
-      footerItems: { name: 'FooterItem[]', table: { category: 'Story' } },
+      footerItems: { name: 'Footer.Item[]', table: { category: 'Story' } },
       product: {
         name: 'Nav product',
         control: { type: 'select', options: PRODUCTS },

packages/chrome/demo/stories/CollapsibleSubNavItemStory.tsx renamed to packages/chrome/demo/stories/SubNavCollapsibleItem.tsx

@@ -15,7 +15,7 @@ interface IArgs extends ICollapsibleSubNavItemProps {
   items: COLLAPSIBLE_SUB_NAV_ITEM[];
 }
 
-export const CollapsibleSubNavItemStory: StoryFn<IArgs> = ({ items, ...args }) => {
+export const SubNavCollapsibleItem: StoryFn<IArgs> = ({ items, ...args }) => {
   const [current, setCurrent] = useState<number | undefined>();
 
   return (

packages/chrome/demo/collapsibleSubNavItem.stories.mdx renamed to packages/chrome/demo/subNavCollapsibleItem.stories.mdx

@@ -1,11 +1,11 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import { CollapsibleSubNavItem } from '@zendeskgarden/react-chrome';
-import { CollapsibleSubNavItemStory } from './stories/CollapsibleSubNavItemStory';
+import { SubNavCollapsibleItem } from './stories/SubNavCollapsibleItem';
 import { COLLAPSIBLE_SUB_NAV_ITEMS as ITEMS } from './stories/data';
 import README from '../README.md';
 
-<Meta title="Packages/Chrome/CollapsibleSubNavItem" component={CollapsibleSubNavItem} />
+<Meta title="Packages/Chrome/SubNav.CollapsibleItem" component={CollapsibleSubNavItem} />
 
 # API
 
@@ -21,7 +21,7 @@ import README from '../README.md';
     args={{ header: 'Header', items: ITEMS }}
     argTypes={{ items: { name: 'children' }, isExpanded: { control: false } }}
   >
-    {({ onChange, ...args }) => <CollapsibleSubNavItemStory {...args} />}
+    {({ onChange, ...args }) => <SubNavCollapsibleItem {...args} />}
   </Story>
 </Canvas>
 
@@ -36,7 +36,7 @@ import README from '../README.md';
     {args => {
       const updateArgs = useArgs()[1];
       const handleChange = () => updateArgs({ isExpanded: !args.isExpanded });
-      return <CollapsibleSubNavItemStory {...args} onChange={handleChange} />;
+      return <SubNavCollapsibleItem {...args} onChange={handleChange} />;
     }}
   </Story>
 </Canvas>