fix: added autoAlign in copyButton, codeSnippet and iconButton

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",
       },
@@ -4229,6 +4238,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/src/components/CodeSnippet/CodeSnippet.stories.js

@@ -142,6 +142,18 @@ export const Playground = (args) => (
   </CodeSnippet>
 );
 
+export const ExperimentalAutoAlign = (args) => (
+  <div style={{ height: 1000, width: 3000, marginLeft: 200, marginTop: 100 }}>
+    <CodeSnippet
+      type="single"
+      feedback="Copied to clipboard"
+      align="top"
+      autoAlign>
+      {'yarn add @carbon/react'}
+    </CodeSnippet>
+  </div>
+);
+
 Playground.argTypes = {
   ['aria-label']: {
     table: {

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
    */

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>`
    */

packages/react/src/components/CopyButton/CopyButton.stories.js

@@ -22,6 +22,12 @@ export default {
 
 export const Default = () => <CopyButton />;
 
+export const ExperimentalAutoAlign = () => (
+  <div style={{ height: 1000, width: 3000, marginLeft: 500 }}>
+    <CopyButton align="top" autoAlign />
+  </div>
+);
+
 export const Playground = (args) => <CopyButton {...args} />;
 
 Playground.argTypes = {

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>`
    */

packages/react/src/components/IconButton/IconButton.stories.js

@@ -44,6 +44,14 @@ export const Default = () => (
   </div>
 );
 
+export const ExperimentalAutoAlign = () => (
+  <div style={{ width: 2000, height: 1500, margin: '3rem' }}>
+    <IconButton label="label" autoAlign>
+      <Edit />
+    </IconButton>
+  </div>
+);
+
 const PlaygroundStory = (props) => {
   const { align, defaultOpen, disabled, kind, label, size } = props;
   return (

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
    */