chore: update storybook and readme documentation

Author: geotrev

docs/migration.md

@@ -110,7 +110,8 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-tabs
 
-- All sub-component exports have been deprecated. Use them as properties on `Tabs` instead.
+- All sub-component exports have been deprecated and will be removed in a future major version.
+  Update to sub-component properties (e.g., `Tabs.TabList`).
 
 #### @zendeskgarden/react-theming
 
@@ -128,7 +129,8 @@ consider additional positioning prop support on a case-by-case basis.
 - `Tooltip`
   - removed `eventsEnabled` prop (no longer exposed by Floating UI)
   - removed `popperModifiers` prop (see [note](#breaking-changes))
-- All sub-component exports have been deprecated. Use them as properties on `Tooltip` instead.
+- All sub-component exports have been deprecated and will be removed in a future major version.
+  Update to sub-component properties (e.g., `Tooltip.Title`).
 
 #### @zendeskgarden/react-utilities
 

packages/tabs/README.md

@@ -17,7 +17,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 ```jsx
 import React, { useState } from 'react';
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Tabs, TabList, Tab, TabPanel } from '@zendeskgarden/react-tabs';
+import { Tabs } from '@zendeskgarden/react-tabs';
 
 const Example = () => {
   const [selectedTab, setSelectedTab] = useState('tab-1');
@@ -28,15 +28,15 @@ const Example = () => {
   return (
     <ThemeProvider>
       <Tabs selectedItem={selectedTab} onChange={setSelectedTab}>
-        <TabList>
-          <Tab item="tab-1">Tab 1</Tab>
-          <Tab item="tab-2">Tab 2</Tab>
-          <Tab disabled>Disabled Tab</Tab>
-          <Tab item="tab-3">Tab 3</Tab>
-        </TabList>
-        <TabPanel item="tab-1">Tab 1 content</TabPanel>
-        <TabPanel item="tab-2">Tab 2 content</TabPanel>
-        <TabPanel item="tab-3">Tab 3 content</TabPanel>
+        <Tabs.TabList>
+          <Tabs.Tab item="tab-1">Tab 1</Tabs.Tab>
+          <Tabs.Tab item="tab-2">Tab 2</Tabs.Tab>
+          <Tabs.Tab disabled>Disabled Tab</Tabs.Tab>
+          <Tabs.Tab item="tab-3">Tab 3</Tabs.Tab>
+        </Tabs.TabList>
+        <Tabs.TabPanel item="tab-1">Tab 1 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-2">Tab 2 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-3">Tab 3 content</Tabs.TabPanel>
       </Tabs>
     </ThemeProvider>
   );

packages/tabs/demo/tabs.stories.mdx

@@ -1,14 +1,18 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import { Tabs, Tab, TabList, TabPanel } from '@zendeskgarden/react-tabs';
+import { Tabs } from '@zendeskgarden/react-tabs';
 import { TabsStory } from './stories/TabsStory';
 import { TABS } from './stories/data';
 import README from '../README.md';
 
 <Meta
   title="Packages/Tabs/Tabs"
   component={Tabs}
-  subcomponents={{ Tab, TabList, TabPanel }}
+  subcomponents={{
+    'Tabs.Tab': Tabs.Tab,
+    'Tabs.TabList': Tabs.TabList,
+    'Tabs.TabPanel': Tabs.TabPanel
+  }}
   args={{ tabs: TABS }}
   argTypes={{ tabs: { table: { category: 'Story' } } }}
   parameters={{

packages/tooltips/demo/tooltip.stories.mdx

@@ -4,7 +4,14 @@ import { TooltipStory } from './stories/TooltipStory';
 import { TOOLTIP_CONTENT as CONTENT } from './stories/data';
 import README from '../README.md';
 
-<Meta title="Packages/Tooltips/Tooltip" component={Tooltip} subcomponents={{ Paragraph, Title }} />
+<Meta
+  title="Packages/Tooltips/Tooltip"
+  component={Tooltip}
+  subcomponents={{
+    'Tooltip.Paragraph': Tooltip.Paragraph,
+    'Tooltip.Title': Tooltip.Title
+  }}
+/>
 
 # API