Adjust icon-button props and prepare 2.4.0

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`

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": "./",

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} />)

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
 };

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>