Add shortcut ability for tooltips

element-hq · Aug 23, 2023 · 96c8b6d · 96c8b6d
1 parent 6ca502e
commit 96c8b6d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
@@ -20,6 +20,15 @@ limitations under the License.
   background: var(--cpd-color-alpha-gray-1400);
   color: var(--cpd-color-text-on-solid-primary);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.shortcut {
+  font-weight: (--cpd-font-weight-normal);
+  color: var(--cpd-color-text-secondary);
 }
 
 .arrow {

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -38,22 +38,22 @@ const TemplateSide: StoryFn<typeof TooltipComponent> = () => (
       alignItems: "center",
     }}
   >
-    <TooltipComponent open={true} side="top" text="@bob:example.org">
+    <TooltipComponent open={true} side="top" label="@bob:example.org">
       <IconButton>
         <UserIcon />
       </IconButton>
     </TooltipComponent>
-    <TooltipComponent open={true} side="right" text="@bob:example.org">
+    <TooltipComponent open={true} side="right" label="@bob:example.org">
       <IconButton>
         <UserIcon />
       </IconButton>
     </TooltipComponent>
-    <TooltipComponent open={true} side="bottom" text="@bob:example.org">
+    <TooltipComponent open={true} side="bottom" label="@bob:example.org">
       <IconButton>
         <UserIcon />
       </IconButton>
     </TooltipComponent>
-    <TooltipComponent open={true} side="left" text="@bob:example.org">
+    <TooltipComponent open={true} side="left" label="@bob:example.org">
       <IconButton>
         <UserIcon />
       </IconButton>
@@ -73,17 +73,27 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       alignItems: "center",
     }}
   >
-    <TooltipComponent open={true} align="center" text="@bob:example.org">
+    <TooltipComponent open={true} align="center" label="Copy" shortcut="⌘ + C">
       <IconButton>
         <UserIcon />
       </IconButton>
     </TooltipComponent>
-    <TooltipComponent open={true} align="start" text="@bob:example.org">
+    <TooltipComponent
+      open={true}
+      align="start"
+      label="@bob:example.org"
+      shortcut="⌘ + C"
+    >
       <IconButton>
         <UserIcon />
       </IconButton>
     </TooltipComponent>
-    <TooltipComponent open={true} align="end" text="@bob:example.org">
+    <TooltipComponent
+      open={true}
+      align="end"
+      label="@bob:example.org"
+      shortcut="⌘ + C"
+    >
       <IconButton>
         <UserIcon />
       </IconButton>

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -27,7 +27,7 @@ describe("Tooltip", () => {
   });
   it("renders open by default", () => {
     const { asFragment } = render(
-      <Tooltip text="Hello world 👋" open={true}>
+      <Tooltip label="Hello world 👋" shortcut="⌘ + C" open={true}>
         <IconButton>
           <svg />
         </IconButton>
@@ -37,7 +37,7 @@ describe("Tooltip", () => {
   });
   it("renders", () => {
     const { asFragment } = render(
-      <Tooltip text="Hello world 👋">
+      <Tooltip label="Hello world 👋">
         <IconButton>
           <svg />
         </IconButton>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -25,12 +25,17 @@ import {
 } from "@radix-ui/react-tooltip";
 
 import styles from "./Tooltip.module.css";
+import classNames from "classnames";
 
 type TooltipProps = {
   /**
-   * The tooltip text
+   * The tooltip label
    */
-  text: string;
+  label: string;
+  /**
+   * The associated keyboard shortcut
+   */
+  shortcut?: string;
   /**
    * The side where the tooltip is rendered
    * @default bottom
@@ -67,7 +72,8 @@ type TooltipProps = {
  */
 export const Tooltip = ({
   children,
-  text,
+  label,
+  shortcut,
   side = "bottom",
   align = "center",
   onEscapeKeyDown,
@@ -86,7 +92,16 @@ export const Tooltip = ({
             onPointerDownOutside={onPointerDownOutside}
             className={styles.tooltip}
           >
-            {text}
+            {label}
+            {/* Forcing dark theme, so that we have the correct contrast when
+                using the text color secondary on a solid dark background. 
+                This is temporary and should only remain until we figure out 
+                the approach to on-solid tokens */}
+            {shortcut && (
+              <small className={classNames(styles.shortcut, "cpd-theme-dark")}>
+                {shortcut}
+              </small>
+            )}
             <Arrow width={10} height={6} className={styles.arrow} />
           </Content>
         </Portal>