docs(Tooltip): add temporary focus management test

carbon-design-system · Dec 1, 2020 · e2b4478 · e2b4478
1 parent 3f86e00
commit e2b4478
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -17,6 +17,7 @@ import {
 import Tooltip from '../Tooltip';
 import { Tooltip as OGTooltip } from './Tooltip';
 import Button from '../Button';
+import TextInput from '../TextInput';
 import { OverflowMenuVertical16 } from '@carbon/icons-react';
 import mdx from './Tooltip.mdx';
 
@@ -261,3 +262,55 @@ OnlyCustomIcon.parameters = {
 export const UncontrolledTooltip = () => <UncontrolledTooltipExample />;
 
 UncontrolledTooltip.storyName = 'uncontrolled tooltip';
+
+export const FocusManagementTest = () => {
+  const getTooltip = (id, label, includeId) =>
+    includeId ? (
+      <Tooltip id={`tooltip-${id}`} triggerText={label}>
+        some text for {label.toLowerCase()}
+      </Tooltip>
+    ) : (
+      <Tooltip triggerText={label}>some text for {label.toLowerCase()}</Tooltip>
+    );
+  const getTextInput = (id, label, includeId) => (
+    <TextInput
+      style={{ marginBottom: 20 }}
+      id={id}
+      labelText={getTooltip(`tooltip-${id}`, label, includeId)}
+    />
+  );
+
+  return (
+    <div style={{ width: '50%' }}>
+      <Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
+        <p id="tooltip-body">This is some tooltip text.</p>
+        <div className={`${prefix}--tooltip__footer`}>
+          <a href="/" className={`${prefix}--link`}>
+            Learn More
+          </a>
+          <Button size="small">Create</Button>
+        </div>
+      </Tooltip>
+      <br />
+      <br />
+      {getTextInput('bad-text-input-1', 'Text input (tooltip with id) 1', true)}
+      {getTextInput('bad-text-input-2', 'Text input (tooltip with id) 2', true)}
+      {getTextInput('bad-text-input-3', 'Text input (tooltip with id) 3', true)}
+      {getTextInput(
+        'good-text-input-1',
+        'Text input (tooltip with no id) 1',
+        false
+      )}
+      {getTextInput(
+        'good-text-input-2',
+        'Text input (tooltip with no id) 2',
+        false
+      )}
+      {getTextInput(
+        'good-text-input-3',
+        'Text input (tooltip with no id) 3',
+        false
+      )}
+    </div>
+  );
+};