From a714309305aee8fe98549dab9543c400faa8a720 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Thu, 12 Oct 2023 08:51:05 +0100
Subject: [PATCH 1/2] Rename shortcut to sublabel

---
 src/components/Tooltip/Tooltip.stories.tsx |  6 +++---
 src/components/Tooltip/Tooltip.test.tsx    |  2 +-
 src/components/Tooltip/Tooltip.tsx         | 11 ++++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 82300e52..b3f39b9b 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -73,7 +73,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       alignItems: "center",
     }}
   >
-    <TooltipComponent open={true} align="center" label="Copy" shortcut="⌘ + C">
+    <TooltipComponent open={true} align="center" label="Copy" sublabel="⌘ + C">
       <IconButton>
         <UserIcon />
       </IconButton>
@@ -82,7 +82,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       open={true}
       align="start"
       label="@bob:example.org"
-      shortcut="⌘ + C"
+      sublabel="⌘ + C"
     >
       <IconButton>
         <UserIcon />
@@ -92,7 +92,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       open={true}
       align="end"
       label="@bob:example.org"
-      shortcut="⌘ + C"
+      sublabel="⌘ + C"
     >
       <IconButton>
         <UserIcon />
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index c191d9f0..40d47630 100644
--- 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 label="Hello world 👋" shortcut="⌘ + C" open={true}>
+      <Tooltip label="Hello world 👋" sublabel="⌘ + C" open={true}>
         <IconButton>
           <svg />
         </IconButton>
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index db24f041..f8515cd5 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -33,7 +33,11 @@ type TooltipProps = {
    */
   label: string;
   /**
-   * The associated keyboard shortcut
+   * The tooltip sublabel
+   */
+  sublabel?: string;
+  /**
+   * @deprecated replaced by `sublabel`
    */
   shortcut?: string;
   /**
@@ -73,6 +77,7 @@ type TooltipProps = {
 export const Tooltip = ({
   children,
   label,
+  sublabel,
   shortcut,
   side = "bottom",
   align = "center",
@@ -97,9 +102,9 @@ export const Tooltip = ({
                 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 && (
+            {(sublabel || shortcut) && (
               <small className={classNames(styles.shortcut, "cpd-theme-dark")}>
-                {shortcut}
+                {sublabel ?? shortcut}
               </small>
             )}
             <Arrow width={10} height={6} className={styles.arrow} />

From 2f330649c6de778504b6bd071da24e2dd30115cc Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Thu, 12 Oct 2023 08:58:15 +0100
Subject: [PATCH 2/2] Rename sublabel to caption

---
 src/components/Tooltip/Tooltip.stories.tsx |  6 +++---
 src/components/Tooltip/Tooltip.test.tsx    |  2 +-
 src/components/Tooltip/Tooltip.tsx         | 16 ++++++++--------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index b3f39b9b..df8c5b12 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -73,7 +73,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       alignItems: "center",
     }}
   >
-    <TooltipComponent open={true} align="center" label="Copy" sublabel="⌘ + C">
+    <TooltipComponent open={true} align="center" label="Copy" caption="⌘ + C">
       <IconButton>
         <UserIcon />
       </IconButton>
@@ -82,7 +82,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       open={true}
       align="start"
       label="@bob:example.org"
-      sublabel="⌘ + C"
+      caption="⌘ + C"
     >
       <IconButton>
         <UserIcon />
@@ -92,7 +92,7 @@ const TemplateAlign: StoryFn<typeof TooltipComponent> = () => (
       open={true}
       align="end"
       label="@bob:example.org"
-      sublabel="⌘ + C"
+      caption="⌘ + C"
     >
       <IconButton>
         <UserIcon />
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 40d47630..8b460644 100644
--- 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 label="Hello world 👋" sublabel="⌘ + C" open={true}>
+      <Tooltip label="Hello world 👋" caption="⌘ + C" open={true}>
         <IconButton>
           <svg />
         </IconButton>
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index f8515cd5..b6d14a08 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -33,11 +33,11 @@ type TooltipProps = {
    */
   label: string;
   /**
-   * The tooltip sublabel
+   * The tooltip caption
    */
-  sublabel?: string;
+  caption?: string;
   /**
-   * @deprecated replaced by `sublabel`
+   * @deprecated replaced by `caption`
    */
   shortcut?: string;
   /**
@@ -77,7 +77,7 @@ type TooltipProps = {
 export const Tooltip = ({
   children,
   label,
-  sublabel,
+  caption,
   shortcut,
   side = "bottom",
   align = "center",
@@ -102,10 +102,10 @@ export const Tooltip = ({
                 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 */}
-            {(sublabel || shortcut) && (
-              <small className={classNames(styles.shortcut, "cpd-theme-dark")}>
-                {sublabel ?? shortcut}
-              </small>
+            {(caption || shortcut) && (
+              <span className={classNames(styles.caption, "cpd-theme-dark")}>
+                {caption ?? shortcut}
+              </span>
             )}
             <Arrow width={10} height={6} className={styles.arrow} />
           </Content>