fix(copybutton): react and wc parity

[anamikaanu96]

Closes #17928

Copy button - react and wc parity

Changelog

Changed

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

Testing / Reviewing

Found that three props (align, autoAlign, and as) were missing and added the align and autoAlign props.
As per the discussion I haven't included as prop.

Tested using storybook , can be checked in storybook controls.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	619df1b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67a45d49d3c2f700082ee13c
😎 Deploy Preview	https://deploy-preview-18318--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	619df1b
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67a45d499c01f20008e6f1ff
😎 Deploy Preview	https://deploy-preview-18318--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	619df1b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67a45d4936ea530008399c35
😎 Deploy Preview	https://deploy-preview-18318--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.10%. Comparing base (c0e4c95) to head (619df1b).
Report is 16 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18318      +/-   ##
==========================================
- Coverage   84.13%   84.10%   -0.04%     
==========================================
  Files         408      408              
  Lines       14460    14466       +6     
  Branches     4673     4676       +3     
==========================================
  Hits        12166    12166              
- Misses       2128     2133       +5     
- Partials      166      167       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tay1orjones]

Hey, thanks for putting up this PR! Thanks @laurenmrice for assigning yourself as a reviewer to be sure we get a ux and visual review on this.

[laurenmrice]

Hey @anamikaanu96, just had a couple questions below, otherwise this PR looks good to me.

1. There is an onClick prop in React but not in the Playground story of Web components. Is that intentional?

2. Also a prop naming convention inconsistency I wanted to clarify: It is called ”autoAlign” in React and it is called “autoalign” in Web components. Just wanted to make sure the lowercase a in "align" was intentional and if it matters or not. My thoughts were thinking we should keep it exactly the same as React when possible?

3. We should remove the Playground story and add the controls to the Default story, to match React storybook.

---

Note: I am opening a separate bug issue about the tooltip properties and an existing potential Safari browser bug, which is not related to this PR.

[anamikaanu96]

Hey @anamikaanu96, just had a couple questions below, otherwise this PR looks good to me.

1. There is an onClick prop in React but not in the Playground story of Web components. Is that intentional?
2. Also a prop naming convention inconsistency I wanted to clarify: It is called ”autoAlign” in React and it is called “autoalign” in Web components. Just wanted to make sure the lowercase a in "align" was intentional and if it matters or not. My thoughts were thinking we should keep it exactly the same as React when possible?
3. We should remove the Playground story and add the controls to the Default story, to match React storybook.

Note: I am opening a separate bug issue about the tooltip properties and an existing potential Safari browser bug, which is not related to this PR.

Hey @laurenmrice Thanks for reviewing! I have done the changes you have mentioned in point 2 and 3.
Regarding the onClick prop, its intentional to not add this in storybook controls since its natively supported in web components. I confirmed it with @ariellalgilmore.

[laurenmrice]

Looks good!

[kennylam]

@anamikaanu96 Thanks for this! The styles are off with -start and -end alignments:

bottom-end

top-start

left-end

[laurenmrice]

@kennylam I had made a separate issue for this because I think it also might be a current bug in React. #18445. But if you want to tackle it here we can!

[kennylam]

I had made a separate issue for this because it also seems to be happening in React

Ah, got it, thanks! No I think you're right, better to deal with separately.

[kennylam]

LGTM!

[carbon-automation]

Hey there! v11.76.0 was just released that references this issue/PR.