feat(Copy): add copy align prop to CodeSnippet, Copy (#14653)

* feat(Copy): add align prop to Copy, CodeSnippet * chore(test): update snapshots
carbon-design-system · Sep 18, 2023 · 1d12fb0 · 1d12fb0
1 parent c00b460
commit 1d12fb0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -630,6 +630,21 @@ Map {
       "wrapText": false,
     },
     "propTypes": Object {
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-right",
+            "bottom",
+            "bottom-left",
+            "bottom-right",
+            "left",
+            "right",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "aria-label": Object {
         "type": "string",
       },
@@ -1731,6 +1746,21 @@ Map {
       "onClick": [Function],
     },
     "propTypes": Object {
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-right",
+            "bottom",
+            "bottom-left",
+            "bottom-right",
+            "left",
+            "right",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "children": Object {
         "type": "node",
       },
@@ -1759,6 +1789,21 @@ Map {
       "onClick": [Function],
     },
     "propTypes": Object {
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-right",
+            "bottom",
+            "bottom-left",
+            "bottom-right",
+            "left",
+            "right",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "className": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -25,6 +25,7 @@ const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
 
 function CodeSnippet({
+  align = 'bottom',
   className,
   type,
   children,
@@ -185,6 +186,7 @@ function CodeSnippet({
     return (
       <Copy
         {...rest}
+        align={align}
         onClick={handleCopyClick}
         aria-label={deprecatedAriaLabel || ariaLabel}
         aria-describedby={uid}
@@ -255,6 +257,7 @@ function CodeSnippet({
       )}
       {!hideCopyButton && (
         <CopyButton
+          align={align}
           size={type === 'multi' ? 'sm' : 'md'}
           disabled={disabled}
           onClick={handleCopyClick}
@@ -285,6 +288,20 @@ function CodeSnippet({
 }
 
 CodeSnippet.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf([
+    'top',
+    'top-left',
+    'top-right',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'left',
+    'right',
+  ]),
+
   /**
    * Specify a label to be read by screen readers on the containing <textbox>
    * node

diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js
@@ -14,6 +14,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { IconButton } from '../IconButton';
 
 export default function Copy({
+  align = 'bottom',
   children,
   className,
   feedback,
@@ -59,7 +60,7 @@ export default function Copy({
   return (
     <IconButton
       closeOnActivation={false}
-      align="bottom"
+      align={align}
       className={classNames}
       label={animation ? feedback : initialLabel}
       onClick={composeEventHandlers([onClick, handleClick])}
@@ -77,6 +78,20 @@ export default function Copy({
 }
 
 Copy.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf([
+    'top',
+    'top-left',
+    'top-right',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'left',
+    'right',
+  ]),
+
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js
@@ -13,11 +13,17 @@ import Copy from '../Copy';
 import { LayoutConstraint } from '../Layout';
 import { usePrefix } from '../../internal/usePrefix';
 
-export default function CopyButton({ iconDescription, className, ...other }) {
+export default function CopyButton({
+  align = 'bottom',
+  iconDescription,
+  className,
+  ...other
+}) {
   const prefix = usePrefix();
   return (
     <LayoutConstraint size={{ default: 'md', max: 'lg' }}>
       <Copy
+        align={align}
         className={classnames(className, `${prefix}--copy-btn`)}
         aria-label={iconDescription}
         {...other}>
@@ -28,6 +34,20 @@ export default function CopyButton({ iconDescription, className, ...other }) {
 }
 
 CopyButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf([
+    'top',
+    'top-left',
+    'top-right',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'left',
+    'right',
+  ]),
+
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */