Updated tooltip stories to support codesandbox (microsoft#20373)

* Updated stories to support codesandbox

* Change files

* Update packages/react-tooltip/src/stories/TooltipAria.stories.tsx

Co-authored-by: Oleksandr Fediashov <[email protected]>

Co-authored-by: Oleksandr Fediashov <[email protected]>

change/@fluentui-react-tooltip-222efe33-7039-4db1-9241-4b7c44cec881.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updated stories to support codesandbox",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-tooltip/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+import { Tooltip } from '../index';
+import descriptionMd from './TooltipDescription.md';
+export { Default } from './TooltipDefault.stories';
+export { Aria } from './TooltipAria.stories';
+export { Controlled } from './TooltipControlled.stories';
+export { OnlyIfTruncated } from './TooltipOnlyIfTruncated.stories';
+export { Positioning } from './TooltipPositioning.stories';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta;

packages/react-tooltip/src/stories/TooltipAria.stories.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+import { makeStyles } from '@fluentui/react-make-styles';
+
+const useStyles = makeStyles({
+  exampleList: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    margin: '16px 0',
+    gap: '16px',
+  },
+});
+
+export const Aria = () => {
+  const styles = useStyles();
+
+  return (
+    <>
+      Use a screen reader to hear how the tooltip can be used as its target's label or description:
+      <div className={styles.exampleList}>
+        <Tooltip content="This tooltip is the label for the button" triggerAriaAttribute="label">
+          <button>
+            <span aria-hidden="true">💬</span>
+          </button>
+        </Tooltip>
+        <Tooltip content="This tooltip describes the button" triggerAriaAttribute="describedby">
+          <button>Description</button>
+        </Tooltip>
+      </div>
+    </>
+  );
+};

packages/react-tooltip/src/stories/TooltipControlled.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+
+export const Controlled = () => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+  return (
+    <>
+      <Tooltip content="The visibility of this tooltip is controlled by the parent component" visible={tooltipVisible}>
+        <button onClick={() => setTooltipVisible(v => !v)}>Toggle tooltip</button>
+      </Tooltip>
+    </>
+  );
+};

packages/react-tooltip/src/stories/TooltipDefault.stories.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+import { makeStyles } from '@fluentui/react-make-styles'; // codesandbox-dependency: @fluentui/react-make-styles ^9.0.0-beta
+
+const useStyles = makeStyles({
+  exampleList: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    margin: '16px 0',
+    gap: '16px',
+  },
+});
+
+export const Default = () => {
+  const styles = useStyles();
+
+  const [exampleTarget, setExampleTarget] = React.useState<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      Hover or focus the buttons to show their tooltips:
+      <div className={styles.exampleList}>
+        <Tooltip content="Default tooltip">
+          <button>Default</button>
+        </Tooltip>
+        <Tooltip content="Inverted tooltip" appearance="inverted">
+          <button>Inverted</button>
+        </Tooltip>
+        <Tooltip content="Tooltip pointing to its target" withArrow>
+          <button>With an arrow</button>
+        </Tooltip>
+        <Tooltip
+          content={
+            <>
+              <u>Formatted</u> <i>content</i>
+            </>
+          }
+        >
+          <button>Formatted content</button>
+        </Tooltip>
+        <Tooltip content="Tooltip pointing to a custom target" positioning={{ target: exampleTarget }} withArrow>
+          <button>
+            Custom target:{' '}
+            <div
+              ref={setExampleTarget}
+              style={{ display: 'inline-block', width: '8px', height: '8px', background: 'red' }}
+            />
+          </button>
+        </Tooltip>
+        <Tooltip content="Trigger button using a render function">
+          {triggerProps => (
+            <div>
+              <button {...triggerProps}>Custom trigger</button>
+            </div>
+          )}
+        </Tooltip>
+      </div>
+    </>
+  );
+};

packages/react-tooltip/src/stories/TooltipDescription.md

@@ -0,0 +1,2 @@
+A tooltip displays additional information about another component.
+The information is displayed above and near the target component.

packages/react-tooltip/src/stories/TooltipOnlyIfTruncated.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+
+export const OnlyIfTruncated = () => {
+  const textContainerRef = React.useRef<HTMLDivElement>(null);
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+  const [wide, setWide] = React.useState(true);
+  const text = 'The tooltip only shows if the text is truncated';
+  return (
+    <>
+      <button onClick={() => setWide(w => !w)}>Toggle container width</button>
+      <Tooltip
+        content={text}
+        visible={tooltipVisible}
+        positioning="below"
+        onVisibleChange={(_ev, { visible }) => {
+          if (
+            visible &&
+            textContainerRef.current &&
+            textContainerRef.current.scrollWidth <= textContainerRef.current.clientWidth &&
+            textContainerRef.current.scrollHeight <= textContainerRef.current.clientHeight
+          ) {
+            // Don't show the tooltip if the textContainer's content is not truncated
+            visible = false;
+          }
+
+          setTooltipVisible(visible);
+        }}
+      >
+        <div
+          ref={textContainerRef}
+          tabIndex={0}
+          style={{
+            width: !wide ? '100px' : undefined,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            border: '1px solid gray',
+            padding: '4px',
+          }}
+        >
+          {text}
+        </div>
+      </Tooltip>
+    </>
+  );
+};