From f4c8a1dcb1a616bfefa7fa0b5c82d7bcdce1f2c7 Mon Sep 17 00:00:00 2001
From: tristen <tristen.brown@gmail.com>
Date: Mon, 13 Feb 2023 13:02:58 -0500
Subject: [PATCH] Adjust icon-button props and prepare 2.4.0

---
 CHANGELOG.md                                  |  6 +++++
 package-lock.json                             |  4 +--
 package.json                                  |  2 +-
 .../copy-button/copy-button.test.tsx          |  5 ++--
 src/components/copy-button/copy-button.tsx    | 26 ++++++++++++++-----
 .../copy-button/examples/copy-button-c.tsx    |  2 +-
 6 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3e01b30..ada32ac9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 ## Changelog
 
+
+## 2.4.0
+
+- [feature] add `tooltipTextSize` option to copy-button.
+- [fix] rename `themeTooltip` option to `tooltipColoring` to match convention.
+
 ## 2.3.1
 
 - [bug] Fix layout bug introduced in copy-button changes where wrapper was given `inline-block`
diff --git a/package-lock.json b/package-lock.json
index c9d93d76..061970ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@mapbox/mr-ui",
-      "version": "2.3.1",
+      "version": "2.4.0",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@mapbox/mbx-assembly": "^1.3.0",
diff --git a/package.json b/package.json
index 265175ce..60fa0271 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "UI components for Mapbox projects",
   "main": "index.js",
   "homepage": "./",
diff --git a/src/components/copy-button/copy-button.test.tsx b/src/components/copy-button/copy-button.test.tsx
index b60d375d..94336d1a 100644
--- a/src/components/copy-button/copy-button.test.tsx
+++ b/src/components/copy-button/copy-button.test.tsx
@@ -38,14 +38,15 @@ describe('CopyButton', () => {
       className: 'px6 py6 btn btn--purple btn--stroke',
       focusTrapPaused: true,
       block: true,
-      tooltipTheme: 'dark',
+      tooltipColoring: 'dark',
+      tooltipTextSize: 'none',
       children: (
         <span>A custom child in place of the visual button</span>
       ),
       passthroughProps: {
         'data-testid': 'foo'
       }
-    };
+    } as const;
 
     test('renders as expected', () => {
       const { baseElement } = render(<CopyButton {...props} />)
diff --git a/src/components/copy-button/copy-button.tsx b/src/components/copy-button/copy-button.tsx
index fc11290a..07a9c159 100644
--- a/src/components/copy-button/copy-button.tsx
+++ b/src/components/copy-button/copy-button.tsx
@@ -14,7 +14,8 @@ interface Props {
   block?: boolean;
   focusTrapPaused?: boolean;
   className?: string;
-  themeTooltip?: 'light' | 'dark';
+  tooltipColoring?: 'light' | 'dark';
+  tooltipTextSize?: 'xs' | 's' | 'none';
   children?: ReactNode;
   passthroughProps?: HTMLAttributes<HTMLButtonElement>;
 }
@@ -34,7 +35,8 @@ export default function CopyButton({
   focusTrapPaused,
   className = 'btn btn--xs py3 px3 round',
   children,
-  themeTooltip = 'light',
+  tooltipColoring = 'light',
+  tooltipTextSize = 's',
   passthroughProps
 }: Props): ReactElement {
   const [clipboard, setClipboard] = useState(null);
@@ -110,6 +112,13 @@ export default function CopyButton({
     <Icon name={iconName} />
   </button>
 
+  let popoverContent: ReactNode = 'Copied!';
+  if (tooltipTextSize !== 'none') {
+    popoverContent = (
+      <div className={`txt-${tooltipTextSize}`}>{popoverContent}</div>
+    );
+  }
+
   // data-clipboard-text and the container ref are used by clipboard.js
   // to copy text. Note that this wont have as nice a failure mode.
   return (
@@ -122,9 +131,9 @@ export default function CopyButton({
       onClick={handleCopyButtonClick}
     >
       <Popover
-        content={<div className="txt-s">Copied!</div>}
+        content={popoverContent}
         active={showingFeedback}
-        coloring={themeTooltip}
+        coloring={tooltipColoring}
         placement="top"
         alignment="center"
         hideWhenAnchorIsOffscreen={true}
@@ -133,7 +142,8 @@ export default function CopyButton({
         <div> 
           <Tooltip
             disabled={showingFeedback}
-            coloring={themeTooltip}
+            coloring={tooltipColoring}
+            textSize={tooltipTextSize}
             content="Copy"
           >
             {body}
@@ -181,7 +191,11 @@ CopyButton.propTypes = {
   /**
    * Either `'light'` or `'dark'`. This value is passed as the `coloring` prop found in Tooltip and Popover.
    */
-  themeTooltip: PropTypes.oneOf(['light', 'dark']),
+  tooltipColoring: PropTypes.oneOf(['light', 'dark']),
+  /**
+   * `'xs'` (extra small), `'s'` (small), or `'none'` (no size class).
+   */
+  tooltipTextSize: PropTypes.oneOf(['xs', 's', 'none']),
   /** Optional content to represent the button. */
   children: PropTypes.node
 };
diff --git a/src/components/copy-button/examples/copy-button-c.tsx b/src/components/copy-button/examples/copy-button-c.tsx
index d9f7cd2a..4a504258 100644
--- a/src/components/copy-button/examples/copy-button-c.tsx
+++ b/src/components/copy-button/examples/copy-button-c.tsx
@@ -7,7 +7,7 @@ import CopyButton from '../copy-button';
 export default function Example() {
   return (
     <div className="inline-block">
-      <CopyButton themeTooltip="dark" text="Some copy from the custom element">
+      <CopyButton tooltipColoring="dark" tooltipTextSize="xs" text="Some copy from the custom element">
         <button className="w240 btn">Just a custom element</button>
       </CopyButton>
     </div>