chore(modals)!: rename TooltipModal to TooltipDialog (#1892)

Author: jzempel

docs/migration.md

@@ -147,7 +147,8 @@ 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))
+- `TooltipModal`: renamed to `TooltipDialog`
+  - removed `popperModifiers` prop (see [note](#breaking-changes))
 - Removed internal `useFocusVisible` hook for both `Modal` and `Drawer`. For
   non-Garden modal content that still depends on the polyfill for focus styling,
   either:
@@ -156,7 +157,7 @@ consider additional positioning prop support on a case-by-case basis.
   1. Use
      [@zendeskgarden/container-focusvisible](https://www.npmjs.com/package/@zendeskgarden/container-focusvisible)
      to restore the polyfill
-- Removed `GARDEN_PLACEMENT` type export. Use `ITooltipModalProps['placement']` instead.
+- Removed `GARDEN_PLACEMENT` type export. Use `ITooltipDialogProps['placement']` instead.
 - Subcomponent exports for `Modal` have been deprecated and will be removed in a future major version.
   Update to subcomponent properties (e.g., `Modal.Body`).
 

packages/colorpickers/src/elements/ColorPickerDialog/index.tsx

@@ -23,7 +23,7 @@ import { ColorPicker } from '../ColorPicker';
 import {
   StyledButton,
   StyledButtonPreview,
-  StyledTooltipModal,
+  StyledTooltipDialog,
   StyledTooltipBody
 } from '../../styled';
 import { IColor, IColorPickerDialogProps } from '../../types';
@@ -121,7 +121,7 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
             </Button.EndIcon>
           </StyledButton>
         )}
-        <StyledTooltipModal
+        <StyledTooltipDialog
           ref={ref}
           hasArrow={hasArrow}
           zIndex={zIndex}
@@ -147,7 +147,7 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
               onChange={isControlled ? onChange : setUncontrolledColor}
             />
           </StyledTooltipBody>
-        </StyledTooltipModal>
+        </StyledTooltipDialog>
       </>
     );
   }
@@ -172,7 +172,7 @@ ColorPickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
   zIndex: 1000,
-  hasArrow: false /* TooltipModal override */
+  hasArrow: false /* TooltipDialog override */
 };
 
 ColorPickerDialog.displayName = 'ColorPickerDialog';

packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx

@@ -24,7 +24,7 @@ import { ColorSwatch } from '../ColorSwatch';
 import {
   StyledButton,
   StyledButtonPreview,
-  StyledTooltipModal,
+  StyledTooltipDialog,
   StyledTooltipBody
 } from '../../styled';
 import { IColorSwatchDialogProps } from '../../types';
@@ -153,7 +153,7 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
             </Button.EndIcon>
           </StyledButton>
         )}
-        <StyledTooltipModal
+        <StyledTooltipDialog
           ref={ref}
           zIndex={zIndex}
           hasArrow={hasArrow}
@@ -178,7 +178,7 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
               onSelect={handleSelect}
             />
           </StyledTooltipBody>
-        </StyledTooltipModal>
+        </StyledTooltipDialog>
       </>
     );
   }
@@ -201,7 +201,7 @@ ColorSwatchDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
   zIndex: 1000,
-  hasArrow: false /* TooltipModal override */
+  hasArrow: false /* TooltipDialog override */
 };
 
 ColorSwatchDialog.displayName = 'ColorSwatchDialog';

packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts

@@ -6,12 +6,12 @@
  */
 
 import styled from 'styled-components';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
 
-export const StyledTooltipBody = styled(TooltipModal.Body as unknown as 'div').attrs({
+export const StyledTooltipBody = styled(TooltipDialog.Body as unknown as 'div').attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipModal.ts renamed to packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipDialog.ts

@@ -6,15 +6,15 @@
  */
 
 import styled from 'styled-components';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal';
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
 
 /**
- * 1. Override default TooltipModal styling
+ * 1. Override default TooltipDialog styling
  */
-export const StyledTooltipModal = styled(TooltipModal as any).attrs({
+export const StyledTooltipDialog = styled(TooltipDialog as any).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
@@ -25,6 +25,6 @@ export const StyledTooltipModal = styled(TooltipModal as any).attrs({
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
-StyledTooltipModal.defaultProps = {
+StyledTooltipDialog.defaultProps = {
   theme: DEFAULT_THEME
 };

packages/colorpickers/src/styled/index.ts

@@ -21,7 +21,7 @@ export * from './ColorPicker/StyledSliders';
 
 export * from './ColorPickerDialog/StyledButton';
 export * from './ColorPickerDialog/StyledButtonPreview';
-export * from './ColorPickerDialog/StyledTooltipModal';
+export * from './ColorPickerDialog/StyledTooltipDialog';
 export * from './ColorPickerDialog/StyledTooltipBody';
 
 export * from './ColorSwatch/StyledColorSwatch';

packages/colorpickers/src/types/index.ts

@@ -6,7 +6,7 @@
  */
 
 import { HTMLAttributes } from 'react';
-import { ITooltipModalProps } from '@zendeskgarden/react-modals';
+import { ITooltipDialogProps } from '@zendeskgarden/react-modals';
 
 export interface IColor {
   hex: string;
@@ -75,21 +75,21 @@ export interface IColorPickerDialogProps extends IColorPickerProps {
    */
   onClose?: (color: IColor) => void;
   /** Adjusts the placement of the color dialog */
-  placement?: ITooltipModalProps['placement'];
+  placement?: ITooltipDialogProps['placement'];
   /** Disables the color dialog button */
   disabled?: boolean;
   /**
    * Sets the `z-index` of the color dialog
    */
-  zIndex?: ITooltipModalProps['zIndex'];
+  zIndex?: ITooltipDialogProps['zIndex'];
   /**
    * Adds an arrow to the color dialog
    */
-  hasArrow?: ITooltipModalProps['hasArrow'];
+  hasArrow?: ITooltipDialogProps['hasArrow'];
   /**
    * Animates the color dialog
    */
-  isAnimated?: ITooltipModalProps['isAnimated'];
+  isAnimated?: ITooltipDialogProps['isAnimated'];
   /**
    * Opens the dialog in a controlled color picker dialog
    */
@@ -136,15 +136,15 @@ export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>
 
 export interface IColorSwatchDialogProps extends IColorSwatchProps {
   /** Adjusts the placement of the color dialog */
-  placement?: ITooltipModalProps['placement'];
+  placement?: ITooltipDialogProps['placement'];
   /** Disables the color dialog button */
   disabled?: boolean;
   /** Sets the `z-index` of the color dialog */
-  zIndex?: ITooltipModalProps['zIndex'];
+  zIndex?: ITooltipDialogProps['zIndex'];
   /** Adds an arrow to the color dialog */
-  hasArrow?: ITooltipModalProps['hasArrow'];
+  hasArrow?: ITooltipDialogProps['hasArrow'];
   /** Animates the color dialog */
-  isAnimated?: ITooltipModalProps['isAnimated'];
+  isAnimated?: ITooltipDialogProps['isAnimated'];
   /** Applies inset `box-shadow` styling on focus */
   focusInset?: boolean;
   /** Passes HTML attributes to the color dialog button element */

packages/modals/README.md

@@ -67,11 +67,11 @@ const [isOpen, setIsOpen] = useState(false)
 </ThemeProvider>
 ```
 
-### TooltipModal
+### TooltipDialog
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
 import { Button } from '@zendeskgarden/react-buttons';
 
 const [isOpen, setIsOpen] = useState(false);
@@ -81,18 +81,18 @@ const buttonRef = useRef(null);
   <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
     Open
   </Button>
-  <TooltipModal
+  <TooltipDialog
     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>
+    <TooltipDialog.Title>Example Title</TooltipDialog.Title>
+    <TooltipDialog.Body>Some content</TooltipDialog.Body>
+    <TooltipDialog.Footer>
+      <TooltipDialog.FooterItem>
         <Button>Click</Button>
-      </TooltipModal.FooterItem>
-    </TooltipModal.Footer>
-    <TooltipModal.Close aria-label="Close" />
-  </TooltipModal>
+      </TooltipDialog.FooterItem>
+    </TooltipDialog.Footer>
+    <TooltipDialog.Close aria-label="Close" />
+  </TooltipDialog>
 </ThemeProvider>;
 ```

packages/modals/demo/stories/TooltipModalStory.tsx renamed to packages/modals/demo/stories/TooltipDialogStory.tsx

@@ -12,11 +12,11 @@ import { getColor } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
 import { Button, IconButton } from '@zendeskgarden/react-buttons';
 import { Avatar } from '@zendeskgarden/react-avatars';
-import { ITooltipModalProps, TooltipModal } from '@zendeskgarden/react-modals';
+import { ITooltipDialogProps, TooltipDialog } from '@zendeskgarden/react-modals';
 
 const PLACEMENT = ['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end'] as const;
 
-interface IArgs extends ITooltipModalProps {
+interface IArgs extends ITooltipDialogProps {
   count: number;
   handleClick: (ref?: HTMLElement | null) => void;
   hasBody: boolean;
@@ -30,7 +30,7 @@ interface IArgs extends ITooltipModalProps {
   dialogAriaLabel: string;
 }
 
-export const TooltipModalStory: Story<IArgs> = ({
+export const TooltipDialogStory: Story<IArgs> = ({
   count,
   handleClick,
   hasBody,
@@ -58,20 +58,20 @@ export const TooltipModalStory: Story<IArgs> = ({
 
   return (
     <>
-      <TooltipModal {...args} placement={args.placement || PLACEMENT[current]} {...ariaProp}>
-        {hasTitle && <TooltipModal.Title tag={tag}>{title}</TooltipModal.Title>}
-        {hasBody && <TooltipModal.Body>{body}</TooltipModal.Body>}
+      <TooltipDialog {...args} placement={args.placement || PLACEMENT[current]} {...ariaProp}>
+        {hasTitle && <TooltipDialog.Title tag={tag}>{title}</TooltipDialog.Title>}
+        {hasBody && <TooltipDialog.Body>{body}</TooltipDialog.Body>}
         {hasFooter && (
-          <TooltipModal.Footer>
+          <TooltipDialog.Footer>
             {current > 0 && (
-              <TooltipModal.FooterItem>
+              <TooltipDialog.FooterItem>
                 <Button size="small" isBasic onClick={() => handleClick(refs.current[current - 1])}>
                   Previous
                 </Button>
-              </TooltipModal.FooterItem>
+              </TooltipDialog.FooterItem>
             )}
             {current >= 0 && (
-              <TooltipModal.FooterItem>
+              <TooltipDialog.FooterItem>
                 <Button
                   isPrimary
                   size="small"
@@ -83,12 +83,12 @@ export const TooltipModalStory: Story<IArgs> = ({
                 >
                   {current === refs.current.length - 1 ? 'Finish' : 'Next'}
                 </Button>
-              </TooltipModal.FooterItem>
+              </TooltipDialog.FooterItem>
             )}
-          </TooltipModal.Footer>
+          </TooltipDialog.Footer>
         )}
-        {hasClose && <TooltipModal.Close aria-label={closeAriaLabel} />}
-      </TooltipModal>
+        {hasClose && <TooltipDialog.Close aria-label={closeAriaLabel} />}
+      </TooltipDialog>
       <Grid>
         <Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
           {[...Array(count)].map((_, index) => (

packages/modals/demo/stories/data.ts

@@ -38,7 +38,7 @@ export const MODAL_FOOTER_ITEMS: IFooterItem[] = [
   }
 ];
 
-export const TOOLTIP_MODAL_BODY = `Gumbo beet greens corn soko endive gumbo
+export const TOOLTIP_DIALOG_BODY = `Gumbo beet greens corn soko endive gumbo
 gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
 dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
 zucchini.`;