feat(modals): introduce new TooltipModal component

packages/modals/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 25014,
-    "minified": 18007,
-    "gzipped": 4644
+    "bundled": 42397,
+    "minified": 31063,
+    "gzipped": 6699
   },
   "index.esm.js": {
-    "bundled": 24136,
-    "minified": 17194,
-    "gzipped": 4537,
+    "bundled": 41066,
+    "minified": 29795,
+    "gzipped": 6602,
     "treeshaked": {
       "rollup": {
-        "code": 14116,
-        "import_statements": 570
+        "code": 23980,
+        "import_statements": 689
       },
       "webpack": {
-        "code": 16096
+        "code": 26645
       }
     }
   }

packages/modals/examples/tooltip-modal.md

@@ -0,0 +1,129 @@
+```jsx
+const { getColor } = require('@zendeskgarden/react-theming/src');
+const { Button } = require('@zendeskgarden/react-buttons/src');
+const { Field, Label, Toggle } = require('@zendeskgarden/react-forms/src');
+const { Code } = require('@zendeskgarden/react-typography/src');
+const { Well } = require('@zendeskgarden/react-notifications/src');
+
+const StyledProgress = styled(TooltipModal.FooterItem)`
+  color: ${p => getColor('neutralHue', 600, p.theme)};
+  font-size: ${p => p.theme.fontSizes.sm};
+  flex-grow: 1;
+`;
+
+const Example = () => {
+  const [hasArrow, setHasArrow] = React.useState(true);
+  const [step, setStep] = React.useState();
+  const step1Ref = React.useRef();
+  const step2Ref = React.useRef();
+  const step3Ref = React.useRef();
+  const step4Ref = React.useRef();
+
+  const referenceElement = React.useMemo(() => {
+    if (step === 1) {
+      return step1Ref.current;
+    } else if (step === 2) {
+      return step2Ref.current;
+    } else if (step === 3) {
+      return step3Ref.current;
+    } else if (step === 4) {
+      return step4Ref.current;
+    }
+
+    return undefined;
+  }, [step]);
+
+  const placement = React.useMemo(() => {
+    if (step === 1) {
+      return 'bottom-start';
+    } else if (step === 2 || step === 3) {
+      return 'bottom';
+    } else if (step === 4) {
+      return 'bottom-end';
+    }
+
+    return undefined;
+  }, [step]);
+
+  return (
+    <Grid>
+      <Row className="u-mb-md">
+        <Col>
+          <Well isRecessed>
+            <Field>
+              <Toggle checked={hasArrow} onChange={e => setHasArrow(e.target.checked)}>
+                <Label>
+                  <Code>hasArrow</Code>
+                </Label>
+              </Toggle>
+            </Field>
+          </Well>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Button ref={step1Ref} onClick={() => setStep(1)}>
+            Step 1
+          </Button>
+        </Col>
+        <Col>
+          <Button ref={step2Ref} onClick={() => setStep(2)}>
+            Step 2
+          </Button>
+        </Col>
+        <Col>
+          <Button ref={step3Ref} onClick={() => setStep(3)}>
+            Step 3
+          </Button>
+        </Col>
+        <Col>
+          <Button ref={step4Ref} onClick={() => setStep(4)}>
+            Step 4
+          </Button>
+        </Col>
+      </Row>
+      <TooltipModal
+        referenceElement={referenceElement}
+        placement={placement}
+        hasArrow={hasArrow}
+        onClose={() => setStep(undefined)}
+      >
+        <TooltipModal.Title>Header content</TooltipModal.Title>
+        <TooltipModal.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.
+        </TooltipModal.Body>
+        <TooltipModal.Footer>
+          <StyledProgress>
+            <span>{step} of 4</span>
+          </StyledProgress>
+          <TooltipModal.FooterItem>
+            <Button size="small" disabled={step === 1} onClick={() => setStep(step - 1)}>
+              Previous
+            </Button>
+          </TooltipModal.FooterItem>
+          <TooltipModal.FooterItem>
+            <Button
+              size="small"
+              isPrimary
+              onClick={() => {
+                if (step === 4) {
+                  setStep(undefined);
+                } else {
+                  setStep(step + 1);
+                }
+              }}
+            >
+              {step === 4 ? 'Finish' : 'Next'}
+            </Button>
+          </TooltipModal.FooterItem>
+        </TooltipModal.Footer>
+        <TooltipModal.Close aria-label="Close" />
+      </TooltipModal>
+    </Grid>
+  );
+};
+
+<Example />;
+```

packages/modals/package.json

@@ -22,10 +22,12 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@popperjs/core": "^2.4.4",
     "@zendeskgarden/container-focusvisible": "^0.4.3",
     "@zendeskgarden/container-modal": "^0.8.0",
     "@zendeskgarden/container-utilities": "^0.5.1",
-    "dom-helpers": "^5.1.0"
+    "dom-helpers": "^5.1.0",
+    "react-popper": "^2.2.3"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",

packages/modals/src/elements/TooltipModal/Body.spec.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render, act } from 'garden-test-utils';
+import { TooltipModal } from './TooltipModal';
+
+describe('TooltipModal.Body', () => {
+  it('passes ref to underlying DOM element', async () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { container, getByText, rerender } = render(<div />);
+
+    await act(async () => {
+      await rerender(
+        <TooltipModal referenceElement={container}>
+          <TooltipModal.Body ref={ref}>content</TooltipModal.Body>
+        </TooltipModal>
+      );
+    });
+
+    expect(getByText('content')).toBe(ref.current);
+  });
+});

packages/modals/src/elements/TooltipModal/Body.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { HTMLAttributes } from 'react';
+import { StyledTooltipModalBody } from '../../styled';
+import { useTooltipModalContext } from '../../utils/useTooltipModalContext';
+
+/**
+ * Accepts all `<div>` props
+ */
+export const Body = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  (props, ref) => {
+    const { getContentProps } = useTooltipModalContext();
+
+    return <StyledTooltipModalBody ref={ref} {...getContentProps(props)} />;
+  }
+);
+
+Body.displayName = 'TooltipModal.Body';

packages/modals/src/elements/TooltipModal/Close.spec.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render, act } from 'garden-test-utils';
+import { TooltipModal } from './TooltipModal';
+
+describe('TooltipModal.Close', () => {
+  it('passes ref to underlying DOM element', async () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { container, getByRole, rerender } = render(<div />);
+
+    await act(async () => {
+      await rerender(
+        <TooltipModal referenceElement={container}>
+          <TooltipModal.Close ref={ref} aria-label="Close" />
+        </TooltipModal>
+      );
+    });
+
+    expect(getByRole('button')).toBe(ref.current);
+  });
+});

packages/modals/src/elements/TooltipModal/Close.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { StyledTooltipModalClose } from '../../styled';
+import { useTooltipModalContext } from '../../utils/useTooltipModalContext';
+import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
+
+/**
+ * Used to close a TooltipModal. Accepts all `<button>` props.
+ */
+export const Close = React.forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>(
+  (props, ref) => {
+    const { getCloseProps } = useTooltipModalContext();
+
+    return (
+      <StyledTooltipModalClose ref={ref} {...getCloseProps(props)}>
+        <XStrokeIcon />
+      </StyledTooltipModalClose>
+    );
+  }
+);
+
+Close.displayName = 'TooltipModal.Close';

packages/modals/src/elements/TooltipModal/Title.spec.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render, act } from 'garden-test-utils';
+import { TooltipModal } from './TooltipModal';
+
+describe('TooltipModal.Title', () => {
+  it('passes ref to underlying DOM element', async () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { container, getByText, rerender } = render(<div />);
+
+    await act(async () => {
+      await rerender(
+        <TooltipModal referenceElement={container}>
+          <TooltipModal.Title ref={ref}>title</TooltipModal.Title>
+        </TooltipModal>
+      );
+    });
+
+    expect(getByText('title')).toBe(ref.current);
+  });
+});

packages/modals/src/elements/TooltipModal/Title.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { useTooltipModalContext } from '../../utils/useTooltipModalContext';
+import { StyledTooltipModalTitle } from '../../styled';
+
+/**
+ * Accepts all `<div>` props
+ */
+export const Title = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  (props, ref) => {
+    const { getTitleProps } = useTooltipModalContext();
+
+    return (
+      <StyledTooltipModalTitle ref={ref} {...getTitleProps(props)}>
+        {props.children}
+      </StyledTooltipModalTitle>
+    );
+  }
+);
+
+Title.displayName = 'TooltipModal.Title';