fix(copybutton): react and wc parity (#18318)

* fix(copybutton): react and wc parity

* fix(copybutton): review changes

* fix(copybutton): review changes

---------

Co-authored-by: kennylam <[email protected]>

Author: anamikaanu96

packages/web-components/src/components/copy-button/copy-button.stories.ts

@@ -11,14 +11,40 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { Meta } from '@storybook/web-components';
 import './copy-button';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+
+const tooltipAlignments = {
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-start`]: POPOVER_ALIGNMENT.TOP_START,
+  [`top-end`]: POPOVER_ALIGNMENT.TOP_END,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-start`]: POPOVER_ALIGNMENT.BOTTOM_START,
+  [`bottom-end`]: POPOVER_ALIGNMENT.BOTTOM_END,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-start`]: POPOVER_ALIGNMENT.LEFT_START,
+  [`left-end`]: POPOVER_ALIGNMENT.LEFT_END,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-start`]: POPOVER_ALIGNMENT.RIGHT_START,
+  [`right-end`]: POPOVER_ALIGNMENT.RIGHT_END,
+};
 
 const defaultArgs = {
   feedback: 'Copied!',
   feedbackTimeout: 2000,
   iconDescription: 'Copy to clipboard',
+  align: POPOVER_ALIGNMENT.BOTTOM,
 };
 
 const controls = {
+  align: {
+    control: 'select',
+    description: 'Specify how the toggletip should align with the button',
+    options: tooltipAlignments,
+  },
+  autoAlign: {
+    control: 'boolean',
+    description: 'Specify how the toggletip should align with the button',
+  },
   feedback: {
     control: 'text',
     description: `Provide a description for the icon representing the copy action that can be read by screen readers`,
@@ -35,8 +61,17 @@ const controls = {
 
 const meta: Meta = {
   title: 'Components/Copy button',
-  render: ({ feedbackText, feedbackTimeout, onClick, iconDescription }) => html`
+  render: ({
+    feedbackText,
+    feedbackTimeout,
+    onClick,
+    iconDescription,
+    align,
+    autoAlign,
+  }) => html`
     <cds-copy-button
+      align="${align}"
+      ?autoalign="${autoAlign}"
       feedback="${ifDefined(feedbackText)}"
       feedback-timeout="${ifDefined(feedbackTimeout)}"
       @click="${onClick}">
@@ -47,12 +82,6 @@ const meta: Meta = {
 };
 
 export const Default = {
-  parameters: {
-    controls: { exclude: /(.*?)/ },
-  },
-};
-
-export const Playground = {
   argTypes: controls,
 };
 

packages/web-components/src/components/copy-button/copy-button.ts

@@ -14,6 +14,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './copy-button.scss?lit';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
 import '../copy/copy';
 
 /**
@@ -41,14 +42,33 @@ class CDSCopyButton extends FocusMixin(LitElement) {
   @property()
   feedback = 'Copied!';
 
+  /**
+   * How the tooltip is aligned to the trigger button.
+   */
+  @property({ reflect: true })
+  align = POPOVER_ALIGNMENT.BOTTOM;
+
+  /**
+   * Specify whether a auto align functionality should be applied
+   */
+  @property({ type: Boolean, reflect: true })
+  autoAlign = false;
+
   /**
    * The number in milliseconds to determine how long the tooltip should remain.
    */
   @property({ type: Number, attribute: 'feedback-timeout' })
   feedbackTimeout = 2000;
 
   render() {
-    const { buttonClassName, disabled, feedback, feedbackTimeout } = this;
+    const {
+      buttonClassName,
+      disabled,
+      feedback,
+      feedbackTimeout,
+      align,
+      autoAlign,
+    } = this;
 
     let classes = `${prefix}--copy-btn`;
 
@@ -59,9 +79,11 @@ class CDSCopyButton extends FocusMixin(LitElement) {
     return html`
       <cds-copy
         ?disabled=${disabled}
+        ?autoalign=${autoAlign}
         feedback=${feedback}
         feedback-timeout=${feedbackTimeout}
-        button-class-name=${classes}>
+        button-class-name=${classes}
+        align=${align}>
         ${Copy16({ slot: 'icon', class: `${prefix}--snippet__icon` })}
         <slot slot="tooltip-content"></slot>
       </cds-copy>

packages/web-components/src/components/copy/copy.ts

@@ -92,7 +92,6 @@ class CDSCopy extends CDSIconButton {
 
   connectedCallback() {
     this.closeOnActivation = false;
-    this.align = 'bottom';
 
     this.addEventListener('click', this._handleClickButton);