fix: added autoAlign in copyButton, codeSnippet and iconButton (#17138)

* fix: added autoAlign in copyButton, codeSnippet and iconButton * fix: better positioning of icons in storybook * fix: removed storybook examples as suggested in PR review --------- Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
carbon-design-system · Sep 10, 2024 · 68799ee · 68799ee
1 parent 3bea42a
commit 68799ee
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -801,6 +801,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },
@@ -1799,6 +1802,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },
@@ -1836,6 +1842,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },
@@ -4227,6 +4236,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.tsx b/packages/react/src/components/CodeSnippet/CodeSnippet.tsx
@@ -44,6 +44,11 @@ export interface CodeSnippetProps {
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Specify a label to be read by screen readers on the containing textbox
    * node
@@ -150,6 +155,7 @@ export interface CodeSnippetProps {
 
 function CodeSnippet({
   align = 'bottom',
+  autoAlign = false,
   className,
   type = 'single',
   children,
@@ -304,6 +310,7 @@ function CodeSnippet({
       <Copy
         {...rest}
         align={align}
+        autoAlign={autoAlign}
         onClick={handleCopyClick}
         aria-label={deprecatedAriaLabel || ariaLabel}
         aria-describedby={uid}
@@ -377,6 +384,7 @@ function CodeSnippet({
       {!hideCopyButton && (
         <CopyButton
           align={align}
+          autoAlign={autoAlign}
           size={type === 'multi' ? 'sm' : 'md'}
           disabled={disabled}
           onClick={handleCopyClick}
@@ -437,6 +445,11 @@ CodeSnippet.propTypes = {
     'This prop syntax has been deprecated. Please use the new `aria-label`.'
   ),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Provide the content of your CodeSnippet as a node or string
    */

diff --git a/packages/react/src/components/Copy/Copy.tsx b/packages/react/src/components/Copy/Copy.tsx
@@ -35,6 +35,11 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */
@@ -66,6 +71,7 @@ interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 export default function Copy({
   align = 'bottom',
+  autoAlign = false,
   children,
   className,
   feedback = 'Copied!',
@@ -112,6 +118,7 @@ export default function Copy({
     <IconButton
       closeOnActivation={false}
       align={align}
+      autoAlign={autoAlign}
       className={classNames}
       label={animation ? feedback : initialLabel}
       onClick={composeEventHandlers([onClick, handleClick])}
@@ -143,6 +150,11 @@ Copy.propTypes = {
     'right',
   ]),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

diff --git a/packages/react/src/components/CopyButton/CopyButton.tsx b/packages/react/src/components/CopyButton/CopyButton.tsx
@@ -29,6 +29,11 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */
@@ -59,6 +64,7 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
 }
 export default function CopyButton({
   align = 'bottom',
+  autoAlign = false,
   feedback = 'Copied!',
   feedbackTimeout = 2000,
   iconDescription = 'Copy to clipboard',
@@ -74,6 +80,7 @@ export default function CopyButton({
         feedbackTimeout={feedbackTimeout}
         onClick={onClick}
         align={align}
+        autoAlign={autoAlign}
         className={classnames(className, `${prefix}--copy-btn`)}
         aria-label={iconDescription}
         {...other}>
@@ -98,6 +105,11 @@ CopyButton.propTypes = {
     'right',
   ]),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
@@ -41,6 +41,11 @@ interface IconButtonProps
     | 'left'
     | 'right';
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign?: boolean;
+
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */
@@ -109,6 +114,7 @@ interface IconButtonProps
 const IconButton = React.forwardRef(function IconButton(
   {
     align,
+    autoAlign = false,
     children,
     className,
     closeOnActivation = true,
@@ -134,6 +140,7 @@ const IconButton = React.forwardRef(function IconButton(
   return (
     <Tooltip
       align={align}
+      autoAlign={autoAlign}
       closeOnActivation={closeOnActivation}
       className={tooltipClasses}
       defaultOpen={defaultOpen}
@@ -178,6 +185,11 @@ IconButton.propTypes = {
     'right',
   ]),
 
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */