feat(chrome)!: remove Sidebar component (#1774)

Author: geotrev

docs/migration.md

@@ -55,6 +55,7 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-chrome
 
+- Removed `Sidebar`: UI no longer recommended by Garden
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
 - Removed `hasFooter` prop for `Body` (no replacement needed)
 - The following React component types have changed:

packages/chrome/demo/chrome.stories.mdx

@@ -9,7 +9,6 @@ import {
   Main,
   Nav,
   Sheet,
-  Sidebar,
   SkipNav,
   SubNav,
   PRODUCTS
@@ -20,7 +19,6 @@ import {
   CHROME_HEADER_ITEMS as HEADER_ITEMS,
   CHROME_MAIN as MAIN,
   CHROME_NAV_ITEMS as NAV_ITEMS,
-  CHROME_SIDEBAR as SIDEBAR,
   CHROME_SKIP_NAV as SKIP_NAV,
   CHROME_SUB_NAV_ITEMS as SUB_NAV_ITEMS,
   SHEET_BODY,
@@ -48,7 +46,6 @@ import README from '../README.md';
     'Nav.ItemIcon': Nav.ItemIcon,
     'Nav.ItemText': Nav.ItemText,
     Sheet,
-    Sidebar,
     SkipNav,
     SubNav,
     'SubNav.CollapsibleItem': SubNav.CollapsibleItem,
@@ -78,11 +75,9 @@ import README from '../README.md';
       subNavItems: SUB_NAV_ITEMS,
       hasHeader: true,
       headerItems: HEADER_ITEMS,
-      hasSidebar: false,
       hasFooter: true,
       footerItems: FOOTER_ITEMS,
       skipNav: SKIP_NAV,
-      sidebar: SIDEBAR,
       main: MAIN,
       isSheetOpen: true,
       isSheetCompact: false,
@@ -105,7 +100,6 @@ import README from '../README.md';
       subNavMaxWidth: { name: 'SubNav max-width', control: 'number', table: { category: 'Story' } },
       hasHeader: { name: 'Header', table: { category: 'Story' } },
       headerItems: { name: 'Header.Item[]', table: { category: 'Story' } },
-      hasSidebar: { name: 'Sidebar', table: { category: 'Story' } },
       hasFooter: { name: 'Footer', table: { category: 'Story' } },
       footerItems: { name: 'Footer.Item[]', table: { category: 'Story' } },
       product: {
@@ -122,8 +116,7 @@ import README from '../README.md';
       sheetBody: { name: 'Sheet.Body', table: { category: 'Sheet' } },
       sheetTitle: { name: 'Sheet.Title', table: { category: 'Sheet' } },
       sheetDescription: { name: 'Sheet.Description', table: { category: 'Sheet' } },
-      main: { name: 'children', table: { category: 'Main' } },
-      sidebar: { name: 'children', table: { category: 'Sidebar' } }
+      main: { name: 'children', table: { category: 'Main' } }
     }}
     parameters={{
       design: {
@@ -135,8 +128,7 @@ import README from '../README.md';
   >
     {args => {
       const updateArgs = useArgs()[1];
-      const handleNavClick = ({ hasSubNav, hasSidebar }) =>
-        updateArgs({ hasSubNav: hasSubNav || false, hasSidebar: hasSidebar || false });
+      const handleNavClick = ({ hasSubNav }) => updateArgs({ hasSubNav: hasSubNav || false });
       const handleSheetClick = () => updateArgs({ isSheetOpen: false });
       return <ChromeStory {...args} onSheetClick={handleSheetClick} onNavClick={handleNavClick} />;
     }}

packages/chrome/demo/stories/ChromeStory.tsx

@@ -39,7 +39,6 @@ import {
   INavItemProps,
   Main,
   Nav,
-  Sidebar,
   SkipNav,
   SubNav
 } from '@zendeskgarden/react-chrome';
@@ -79,20 +78,18 @@ interface IArgs extends IChromeProps {
   skipNav: string;
   hasNav: boolean;
   navItems: INavItem[];
-  onNavClick: ({ hasSubNav, hasSidebar }: Record<string, boolean | undefined>) => void;
+  onNavClick: ({ hasSubNav }: Record<string, boolean | undefined>) => void;
   hasLogo: boolean;
   hasBrandmark: boolean;
   hasSubNav: boolean;
   subNavItems: ISubNavItem[];
   subNavMaxWidth: number;
   hasHeader: boolean;
   headerItems: IHeaderItem[];
-  hasSidebar: boolean;
   hasFooter: boolean;
   footerItems: IFooterItem[];
   isExpanded: boolean;
   isWrapped: boolean;
-  sidebar: string;
   main: string;
   isSheetOpen: boolean;
   isSheetCompact: boolean;
@@ -115,12 +112,10 @@ export const ChromeStory: Story<IArgs> = ({
   subNavMaxWidth,
   hasHeader,
   headerItems,
-  hasSidebar,
   hasFooter,
   footerItems,
   isExpanded,
   isWrapped,
-  sidebar,
   main,
   isSheetOpen,
   isSheetCompact,
@@ -151,7 +146,7 @@ export const ChromeStory: Story<IArgs> = ({
               onClick={() => {
                 setCurrentNav(index);
                 setCurrentSubNav(0);
-                onNavClick({ hasSubNav: item.hasSubNav, hasSidebar: item.hasSidebar });
+                onNavClick({ hasSubNav: item.hasSubNav });
               }}
             >
               <Nav.ItemIcon>{NAV_ICONS[index] || <NavIcon />}</Nav.ItemIcon>
@@ -239,7 +234,6 @@ export const ChromeStory: Story<IArgs> = ({
           </Header>
         )}
         <Content id="main-content">
-          {hasSidebar && <Sidebar>{sidebar}</Sidebar>}
           <Main>{main}</Main>
           <SheetComponent
             hasHeader

packages/chrome/demo/stories/data.ts

@@ -73,8 +73,7 @@ export const CHROME_NAV_ITEMS: INavItem[] = [
     text: 'Email'
   },
   {
-    text: 'User access control lists',
-    hasSidebar: true
+    text: 'User access control lists'
   },
   {
     text: 'Chat'
@@ -88,8 +87,6 @@ export const CHROME_NAV_ITEMS: INavItem[] = [
   }
 ];
 
-export const CHROME_SIDEBAR = 'Sidebar content';
-
 export const CHROME_SKIP_NAV = 'Skip to main content';
 
 export const CHROME_SUB_NAV_ITEMS: ISubNavItem[] = [

packages/chrome/demo/stories/types.ts

@@ -25,7 +25,6 @@ export interface IHeaderItem {
 export interface INavItem {
   text: string;
   hasSubNav?: boolean;
-  hasSidebar?: boolean;
 }
 
 export interface ISubNavItem {

packages/chrome/src/elements/body/Sidebar.spec.tsx

@@ -22,7 +22,6 @@ export { SkipNav } from './elements/SkipNav';
 export { Body } from './elements/body/Body';
 export { Content } from './elements/body/Content';
 export { Main } from './elements/body/Main';
-export { Sidebar } from './elements/body/Sidebar';
 export { Header } from './elements/header/Header';
 export { Footer } from './elements/footer/Footer';
 export { Nav } from './elements/nav/Nav';

packages/chrome/src/elements/body/Sidebar.tsx

@@ -11,7 +11,6 @@ export { StyledSkipNavIcon } from './StyledSkipNavIcon';
 export { StyledBody } from './body/StyledBody';
 export { StyledContent } from './body/StyledContent';
 export { StyledMain } from './body/StyledMain';
-export { StyledSidebar } from './body/StyledSidebar';
 export { StyledFooter } from './footer/StyledFooter';
 export { StyledFooterItem } from './footer/StyledFooterItem';
 export { StyledHeader } from './header/StyledHeader';