Merge branch 'main' into stepped-tracker-docs

packages/core/src/tooltip/Tooltip.tsx

@@ -54,11 +54,11 @@ export interface TooltipProps
    */
   enterDelay?: number;
   /**
-   * Delay in milliseconds before the Tooltip is hidden.
+   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.
    */
   leaveDelay?: number;
   /**
-   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.
+   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.
    */
   disabled?: boolean;
   /**

site/docs/components/tooltip/accessibility.mdx

@@ -0,0 +1,14 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+The Tooltip does not receive focus, so we recommend that you do not include interactive elements as they will not be accessible.
+
+If you need to display focusable content such as buttons or links, consider using [Overlay](../overlay) instead.

site/docs/components/tooltip/examples.mdx

@@ -0,0 +1,78 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+
+  <LivePreview componentName="tooltip" exampleName="Default" displayName="Default Tooltip">
+
+    ### Default Tooltip
+
+    By default, Tooltip displays a status icon alongside a supporting message and an arrow pointing to the relevant UI element. Its default placement is ‘right’ and appears after 300 milliseconds.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="Status" displayName="Status">
+
+    ### Status
+
+    Use the `status` prop to define Tooltip’s icon and border color. You can choose between the following statuses:
+
+    - **Info**: Use this status when you need to display general information.
+
+    - **Error**: Use this status to communicate a critical issue that prevents the user from continuing.
+
+    - **Warning**: Use this status to inform users of an issue or potential issue related to their current task. Use this for issues that do not prevent the user from continuing or completing their task.
+
+    - **Success**: Use this status to confirm that a user's action has been completed successfully.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="HideArrow" displayName="Hide Arrow">
+
+    ### Hide Arrow
+
+    Use the `hideArrow` prop if you would like to display the Tooltip without the arrow.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="HideIcon" displayName="Hide Icon">
+
+    ### Hide Icon
+
+    Use the `hideIcon` prop to display the Tooltip with text only, and no status icon.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="Content" displayName="Content">
+
+    ### Content
+
+    Use the `content` prop to pass either a simple string or a React component that is displayed inside the Tooltip.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="Placement" displayName="Placement">
+
+    ### Placement
+
+    Use the `placement` prop to position the Tooltip on its targeted UI element.
+
+  </LivePreview>
+
+  <LivePreview componentName="tooltip" exampleName="DelayBeforeShown" displayName="Delay Options">
+
+    ### Delay Options
+
+    Use the `enterDelay` or `leaveDelay` props to change the milliseconds before the Tooltip appears or disappears.
+
+  </LivePreview>
+
+</LivePreviewControls>

site/docs/components/tooltip/index.mdx

@@ -0,0 +1,23 @@
+---
+title: Tooltip
+data:
+  description: Tooltip displays a brief message to the user that provides additional information about a UI element. The Tooltip appears after the user’s mouse pointer hovers over the target element for a certain amount of time.  It can communicate new information, errors, warnings, or successful completion of a process or task.
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/tree/main/packages/core/src/tooltip"
+  package:
+    name: "@salt-ds/core"
+  alsoKnownAs: ["Hint"]
+  relatedComponents:
+    [
+      { name: "Banner", relationship: "similarTo" },
+      { name: "Overlay", relationship: "similarTo" },
+      { name: "Content Status", relationship: "similarTo" },
+      { name: "Icon", relationship: "contains" },
+      { name: "Status Indicator", relationship: "contains" },
+    ]
+  # stickerSheet: ""
+
+# Leave this as is
+layout: DetailComponent
+---
+
+{/* This area stays blank */}

site/docs/components/tooltip/usage.mdx

@@ -0,0 +1,38 @@
+---
+# Leave the frontmatter as is
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### When to use Tooltip
+
+- When you want to display a brief message to the user that provides additional information about a UI element.
+
+### When not to use Tooltip
+
+- When the content contains interactive elements, like a link, input, or button. Consider always making this content visible or use an [Overlay](../overlay) or a [Dialog](../dialog) instead.
+
+- When there is information that the user needs to know to complete a task. Important help text should always be visible and not hidden from the user.
+
+- When the message always needs to be visible. Instead, place the message directly on the page.
+
+- When the message is not about a UI element. Consider adding the message directly on the page or use an [Overlay](../overlay), a [Dialog](../dialog), or a [Banner](../banner) instead.
+
+### Content
+
+The Tooltip content will never truncate. It should be short and self-explanatory. If a longer message is needed, consider adding it to the page so it is always visible.
+
+### Import
+
+```js
+import { Tooltip } from "@salt-ds/core";
+```
+
+### Props
+
+<PropsTable packageName="core" componentName="Tooltip" />

site/src/examples/tooltip/Content.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+import { Button, Text, Tooltip } from "@salt-ds/core";
+
+export const Content = (): ReactElement => (
+  <Tooltip
+    content={
+      <>
+        <Text styleAs="h3">Persona B</Text>
+        <ul style={{ paddingLeft: 20, margin: 0 }}>
+          <li>Role</li>
+          <li>Position</li>
+          <li>Location</li>
+          <li>City, Country</li>
+        </ul>
+      </>
+    }
+  >
+    <Button>Custom Content</Button>
+  </Tooltip>
+);

site/src/examples/tooltip/Default.tsx

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const Default = (): ReactElement => (
+  <Tooltip content="I am a tooltip">
+    <Button>Hover</Button>
+  </Tooltip>
+);

site/src/examples/tooltip/DelayBeforeShown.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const DelayBeforeShown = (): ReactElement => (
+  <div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="I am a tooltip" enterDelay={100}>
+        <Button>100ms</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="I am a tooltip">
+        <Button>300ms</Button>
+      </Tooltip>
+    </div>
+    <Tooltip content="I am a tooltip" enterDelay={500}>
+      <Button>500ms</Button>
+    </Tooltip>
+  </div>
+);

site/src/examples/tooltip/FlipAndShift.tsx

@@ -0,0 +1,36 @@
+import { ReactElement, useCallback } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const FlipAndShift = (): ReactElement => {
+  const handleScrollButton = useCallback((node: HTMLButtonElement | null) => {
+    node?.scrollIntoView({ block: "center", inline: "center" });
+  }, []);
+
+  return (
+    <div
+      style={{
+        display: "block",
+        maxWidth: "500px",
+        maxHeight: "400px",
+        overflow: "auto",
+        flex: 1,
+      }}
+    >
+      <div
+        style={{
+          height: "800px",
+          width: "1100px",
+        }}
+      >
+        <Tooltip content="I am a tooltip" placement="top" open>
+          <Button
+            style={{ marginTop: "400px", marginLeft: "500px" }}
+            ref={handleScrollButton}
+          >
+            Hover
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

site/src/examples/tooltip/HideArrow.tsx

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const HideArrow = (): ReactElement => (
+  <Tooltip content="I am a tooltip" hideArrow>
+    <Button>Without Arrow</Button>
+  </Tooltip>
+);

site/src/examples/tooltip/HideIcon.tsx

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const HideIcon = (): ReactElement => (
+  <Tooltip content="I am a tooltip" hideIcon>
+    <Button>Without Icon</Button>
+  </Tooltip>
+);

site/src/examples/tooltip/Placement.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const Placement = (): ReactElement => (
+  <div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="I am a tooltip" placement={"top"}>
+        <Button>Top</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginBottom: 40 }}>
+      <Tooltip content="I am a tooltip" placement={"bottom"}>
+        <Button>Bottom</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="I am a tooltip" placement={"left"}>
+        <Button>Left</Button>
+      </Tooltip>
+    </div>
+    <Tooltip content="I am a tooltip" placement={"right"}>
+      <Button>Right</Button>
+    </Tooltip>
+  </div>
+);

site/src/examples/tooltip/Status.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { Button, Tooltip } from "@salt-ds/core";
+
+export const Status = (): ReactElement => (
+  <div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="I am a tooltip" status="info">
+        <Button>Info</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="We found an issue" status="error">
+        <Button>Error</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginBottom: 10 }}>
+      <Tooltip content="Are you sure" status="warning">
+        <Button>Warning</Button>
+      </Tooltip>
+    </div>
+    <Tooltip content="Well done" status="success">
+      <Button>Success</Button>
+    </Tooltip>
+  </div>
+);

site/src/examples/tooltip/index.ts

@@ -0,0 +1,8 @@
+export * from "./Content";
+export * from "./Default";
+export * from "./DelayBeforeShown";
+export * from "./FlipAndShift";
+export * from "./HideArrow";
+export * from "./HideIcon";
+export * from "./Placement";
+export * from "./Status";