feat!: rename DrawerModal to Drawer (#1715)

Author: geotrev

docs/migration.md

@@ -57,6 +57,7 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-modals
 
+- `DrawerModal`: renamed to `Drawer`
 - `TooltipModal`: removed `popperModifiers` prop (see [note](#breaking-changes))
 
 #### @zendeskgarden/react-pagination

packages/modals/README.md

@@ -14,6 +14,8 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+### Modal
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Modal, Header, Body, Footer, FooterItem, Close } from '@zendeskgarden/react-modals';
@@ -38,3 +40,59 @@ import { Button } from '@zendeskgarden/react-buttons';
   </Modal>
 </ThemeProvider>;
 ```
+
+### Drawer
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { Drawer } from '@zendeskgarden/react-modals';
+import { Button } from '@zendeskgarden/react-buttons';
+
+const [isOpen, setIsOpen] = useState(false)
+
+<ThemeProvider>
+  <Button onClick={() => setIsOpen(true)}>
+    Open
+  </Button>
+  <Drawer isOpen={state.isOpen} onClose={() => setIsOpen(false)}>
+    <Drawer.Header>Example Title</Drawer.Header>
+    <Drawer.Body>Some content</Drawer.Body>
+    <Drawer.Footer>
+      <Drawer.FooterItem>
+        <Button>Click</Button>
+      </Drawer.FooterItem>
+    </Drawer.Footer>
+    <Drawer.Close aria-Label="Close" />
+  </Drawer>
+</ThemeProvider>
+```
+
+### TooltipModal
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { TooltipModal } from '@zendeskgarden/react-modals';
+import { Button } from '@zendeskgarden/react-buttons';
+
+const [isOpen, setIsOpen] = useState(false);
+const buttonRef = useRef(null);
+
+<ThemeProvider>
+  <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+    Open
+  </Button>
+  <TooltipModal
+    onClose={() => setIsOpen(false)}
+    referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
+  >
+    <TooltipModal.Title>Example Title</TooltipModal.Title>
+    <TooltipModal.Body>Some content</TooltipModal.Body>
+    <TooltipModal.Footer>
+      <TooltipModal.FooterItem>
+        <Button>Click</Button>
+      </TooltipModal.FooterItem>
+    </TooltipModal.Footer>
+    <TooltipModal.Close aria-label="Close" />
+  </TooltipModal>
+</ThemeProvider>;
+```

packages/modals/demo/drawerModal.stories.mdx renamed to packages/modals/demo/drawer.stories.mdx

@@ -1,19 +1,19 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import { DrawerModal } from '@zendeskgarden/react-modals';
-import { DrawerModalStory } from './stories/DrawerModalStory';
+import { Drawer } from '@zendeskgarden/react-modals';
+import { DrawerStory } from './stories/DrawerStory';
 import { MODAL_BODY as BODY, MODAL_FOOTER_ITEMS as FOOTER_ITEMS } from './stories/data';
 import README from '../README.md';
 
 <Meta
-  title="Packages/Modals/DrawerModal"
-  component={DrawerModal}
+  title="Packages/Modals/Drawer"
+  component={Drawer}
   subcomponents={{
-    'DrawerModal.Body': DrawerModal.Body,
-    'DrawerModal.Close': DrawerModal.Close,
-    'DrawerModal.Footer': DrawerModal.Footer,
-    'DrawerModal.FooterItem': DrawerModal.FooterItem,
-    'DrawerModal.Header': DrawerModal.Header
+    'Drawer.Body': Drawer.Body,
+    'Drawer.Close': Drawer.Close,
+    'Drawer.Footer': Drawer.Footer,
+    'Drawer.FooterItem': Drawer.FooterItem,
+    'Drawer.Header': Drawer.Header
   }}
 />
 
@@ -25,7 +25,7 @@ import README from '../README.md';
 
 <Canvas>
   <Story
-    name="DrawerModal"
+    name="Drawer"
     args={{
       hasBody: true,
       body: BODY,
@@ -39,15 +39,15 @@ import README from '../README.md';
     }}
     argTypes={{
       appendToNode: { control: false },
-      hasBody: { name: 'DrawerModal.Body', table: { category: 'Story' } },
-      hasClose: { name: 'DrawerModal.Close', table: { category: 'Story' } },
-      hasFooter: { name: 'DrawerModal.Footer', table: { category: 'Story' } },
-      hasHeader: { name: 'DrawerModal.Header', table: { category: 'Story' } },
-      footerItems: { name: 'DrawerModal.FooterItem[]', table: { category: 'Story' } },
-      body: { name: 'children', table: { category: 'DrawerModal.Body' } },
-      header: { name: 'children', table: { category: 'DrawerModal.Header' } },
-      tag: { control: 'text', table: { category: 'DrawerModal.Header' } },
-      closeAriaLabel: { name: 'aria-label', table: { category: 'DrawerModal.Close' } },
+      hasBody: { name: 'Drawer.Body', table: { category: 'Story' } },
+      hasClose: { name: 'Drawer.Close', table: { category: 'Story' } },
+      hasFooter: { name: 'Drawer.Footer', table: { category: 'Story' } },
+      hasHeader: { name: 'Drawer.Header', table: { category: 'Story' } },
+      footerItems: { name: 'Drawer.FooterItem[]', table: { category: 'Story' } },
+      body: { name: 'children', table: { category: 'Drawer.Body' } },
+      header: { name: 'children', table: { category: 'Drawer.Header' } },
+      tag: { control: 'text', table: { category: 'Drawer.Header' } },
+      closeAriaLabel: { name: 'aria-label', table: { category: 'Drawer.Close' } },
       dialogAriaLabel: { name: 'aria-label' }
     }}
     parameters={{
@@ -62,7 +62,7 @@ import README from '../README.md';
       const updateArgs = useArgs()[1];
       const handleClick = () => updateArgs({ isOpen: true });
       const handleClose = () => updateArgs({ isOpen: false });
-      return <DrawerModalStory {...args} onClick={handleClick} onClose={handleClose} />;
+      return <DrawerStory {...args} onClick={handleClick} onClose={handleClose} />;
     }}
   </Story>
 </Canvas>

packages/modals/demo/stories/DrawerModalStory.tsx renamed to packages/modals/demo/stories/DrawerStory.tsx

@@ -9,11 +9,11 @@ import React, { MouseEventHandler } from 'react';
 import { Story } from '@storybook/react';
 import { useTheme } from 'styled-components';
 import Icon from '@zendeskgarden/svg-icons/src/16/arrow-left-stroke.svg';
-import { DrawerModal, IDrawerModalProps } from '@zendeskgarden/react-modals';
+import { Drawer, IDrawerProps } from '@zendeskgarden/react-modals';
 import { Button } from '@zendeskgarden/react-buttons';
 import { IFooterItem } from './types';
 
-interface IArgs extends IDrawerModalProps {
+interface IArgs extends IDrawerProps {
   onClick: MouseEventHandler<HTMLElement>;
   hasBody: boolean;
   body: string;
@@ -27,7 +27,7 @@ interface IArgs extends IDrawerModalProps {
   closeAriaLabel: string;
 }
 
-export const DrawerModalStory: Story<IArgs> = ({
+export const DrawerStory: Story<IArgs> = ({
   onClick,
   onClose,
   hasBody,
@@ -60,22 +60,22 @@ export const DrawerModalStory: Story<IArgs> = ({
           <Icon />
         </Button.EndIcon>
       </Button>
-      <DrawerModal {...args} onClose={onClose} {...ariaProp}>
-        {hasHeader && <DrawerModal.Header tag={tag}>{header}</DrawerModal.Header>}
-        {hasBody ? <DrawerModal.Body>{body}</DrawerModal.Body> : body}
+      <Drawer {...args} onClose={onClose} {...ariaProp}>
+        {hasHeader && <Drawer.Header tag={tag}>{header}</Drawer.Header>}
+        {hasBody ? <Drawer.Body>{body}</Drawer.Body> : body}
         {hasFooter && (
-          <DrawerModal.Footer>
+          <Drawer.Footer>
             {footerItems.map(({ text, type }, index) => (
-              <DrawerModal.FooterItem key={index}>
+              <Drawer.FooterItem key={index}>
                 <Button isBasic={type === 'basic'} isPrimary={type === 'primary'} onClick={onClose}>
                   {text}
                 </Button>
-              </DrawerModal.FooterItem>
+              </Drawer.FooterItem>
             ))}
-          </DrawerModal.Footer>
+          </Drawer.Footer>
         )}
-        {hasClose && <DrawerModal.Close aria-label={closeAriaLabel} />}
-      </DrawerModal>
+        {hasClose && <Drawer.Close aria-label={closeAriaLabel} />}
+      </Drawer>
     </>
   );
 };

packages/modals/src/elements/DrawerModal/Body.spec.tsx renamed to packages/modals/src/elements/Drawer/Body.spec.tsx

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { DrawerModal } from './DrawerModal';
+import { Drawer } from './Drawer';
 
-describe('DrawerModal.Body', () => {
+describe('Drawer.Body', () => {
   it('passes ref to underlying DOM element', () => {
     const ref = React.createRef<HTMLDivElement>();
     const { getByText } = render(
-      <DrawerModal isOpen>
-        <DrawerModal.Body ref={ref}>content</DrawerModal.Body>
-      </DrawerModal>
+      <Drawer isOpen>
+        <Drawer.Body ref={ref}>content</Drawer.Body>
+      </Drawer>
     );
 
     expect(getByText('content')).toBe(ref.current);

packages/modals/src/elements/DrawerModal/Body.tsx renamed to packages/modals/src/elements/Drawer/Body.tsx

@@ -7,22 +7,19 @@
 
 import React, { HTMLAttributes, forwardRef } from 'react';
 import { useModalContext } from '../../utils/useModalContext';
-import { StyledDrawerModalBody } from '../../styled';
+import { StyledDrawerBody } from '../../styled';
 
 const BodyComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
   const { getContentProps } = useModalContext();
 
   return (
-    <StyledDrawerModalBody
-      {...(getContentProps(props) as HTMLAttributes<HTMLDivElement>)}
-      ref={ref}
-    >
+    <StyledDrawerBody {...(getContentProps(props) as HTMLAttributes<HTMLDivElement>)} ref={ref}>
       {props.children}
-    </StyledDrawerModalBody>
+    </StyledDrawerBody>
   );
 });
 
-BodyComponent.displayName = 'DrawerModal.Body';
+BodyComponent.displayName = 'Drawer.Body';
 
 /**
  * @extends HTMLAttributes<HTMLDivElement>

packages/modals/src/elements/DrawerModal/Close.spec.tsx renamed to packages/modals/src/elements/Drawer/Close.spec.tsx

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { DrawerModal } from './DrawerModal';
+import { Drawer } from './Drawer';
 
-describe('DrawerModal.Close', () => {
+describe('Drawer.Close', () => {
   it('passes ref to underlying DOM element', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { getByRole } = render(
-      <DrawerModal isOpen>
-        <DrawerModal.Close ref={ref} />
-      </DrawerModal>
+      <Drawer isOpen>
+        <Drawer.Close ref={ref} />
+      </Drawer>
     );
 
     expect(getByRole('button')).toBe(ref.current);

packages/modals/src/elements/DrawerModal/Close.tsx renamed to packages/modals/src/elements/Drawer/Close.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { ButtonHTMLAttributes, useEffect, forwardRef } from 'react';
-import { StyledDrawerModalClose } from '../../styled';
+import { StyledDrawerClose } from '../../styled';
 import { useText } from '@zendeskgarden/react-theming';
 import { useModalContext } from '../../utils/useModalContext';
 import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
@@ -24,20 +24,20 @@ const CloseComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
     const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
 
     return (
-      <StyledDrawerModalClose
+      <StyledDrawerClose
         {...(getCloseProps({
           ...props,
           'aria-label': ariaLabel!
         }) as ButtonHTMLAttributes<HTMLButtonElement>)}
         ref={ref}
       >
         <XStrokeIcon />
-      </StyledDrawerModalClose>
+      </StyledDrawerClose>
     );
   }
 );
 
-CloseComponent.displayName = 'DrawerModal.Close';
+CloseComponent.displayName = 'Drawer.Close';
 
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>

packages/modals/src/elements/DrawerModal/DrawerModal.spec.tsx renamed to packages/modals/src/elements/Drawer/Drawer.spec.tsx

@@ -8,17 +8,17 @@
 import React, { useRef, useState, createRef, forwardRef } from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render, waitFor } from 'garden-test-utils';
-import { DrawerModal } from './DrawerModal';
-import { IDrawerModalProps } from '../../types';
+import { Drawer } from './Drawer';
+import { IDrawerProps } from '../../types';
 
-describe('DrawerModal', () => {
+describe('Drawer', () => {
   const user = userEvent.setup();
 
   const DRAWER_MODAL_ID = 'TEST_ID';
 
   type FixtureProps = {
     noHeader?: boolean;
-  } & IDrawerModalProps;
+  } & IDrawerProps;
 
   const Example = forwardRef<HTMLDivElement, FixtureProps>(({ noHeader, ...props }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -29,16 +29,16 @@ describe('DrawerModal', () => {
         <button ref={buttonRef} onClick={() => setIsOpen(true)}>
           Open Drawer
         </button>
-        <DrawerModal ref={ref} isOpen={isOpen} onClose={() => setIsOpen(false)} {...props}>
-          {!noHeader && <DrawerModal.Header>title</DrawerModal.Header>}
-          <DrawerModal.Close />
-          <DrawerModal.Body>body</DrawerModal.Body>
-          <DrawerModal.Footer>
-            <DrawerModal.FooterItem>
+        <Drawer ref={ref} isOpen={isOpen} onClose={() => setIsOpen(false)} {...props}>
+          {!noHeader && <Drawer.Header>title</Drawer.Header>}
+          <Drawer.Close />
+          <Drawer.Body>body</Drawer.Body>
+          <Drawer.Footer>
+            <Drawer.FooterItem>
               <button>Click</button>
-            </DrawerModal.FooterItem>
-          </DrawerModal.Footer>
-        </DrawerModal>
+            </Drawer.FooterItem>
+          </Drawer.Footer>
+        </Drawer>
       </>
     );
   });