fix: ailabel autoalign was not working

[preetibansalui]

Closes #17571

AILable auto align was not working

Changelog

New

Added shift in middleware of popover component. It prevents the floating element from overflowing along its axis of alignment, thereby preserving the side it’s placed on.

Testing / Reviewing

1. Go to storybook > AILable > Default Story
2. Click on AI Label, AILabelContent should become fully visible and avoid overflowing along its axis..

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	dd53e95
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/671ff5012b11e400081918d5
😎 Deploy Preview	https://deploy-preview-17659--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!

Name	Link
🔨 Latest commit	dd53e95
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/671ff501f6751b0008b18be5
😎 Deploy Preview	https://deploy-preview-17659--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

Attention: Patch coverage is 60.00000% with 2 lines in your changes missing coverage. Please review.

Project coverage is 80.78%. Comparing base (f351df6) to head (dd53e95).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/react/src/components/Popover/index.tsx	60.00%	1 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17659      +/-   ##
==========================================
- Coverage   80.79%   80.78%   -0.01%     
==========================================
  Files         406      406              
  Lines       14041    14045       +4     
  Branches     4367     4399      +32     
==========================================
+ Hits        11344    11346       +2     
- Misses       2530     2531       +1     
- Partials      167      168       +1     

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

[alisonjoseph]

LGTM, just a small code comment to cleanup

[tay1orjones]

Technically this doesn't follow the design spec for Popover. The caret placement is dynamic and isn't using one of the allowed/specified alignments for Popover.

This is from the original issue:

Do you know why does it not reflow to use an alignment option where the caret is on the left top like this from the spec?

[preetibansalui]

Technically this doesn't follow the design spec for Popover. The caret placement is dynamic and isn't using one of the allowed/specified alignments for Popover.

This is from the original issue: Do you know why does it not reflow to use an alignment option where the caret is on the left top like this from the spec? 

Hi Taylor, Thanks It didn't comes to my mind about design spec guidelines. Thanks for pointing this out.

Do you know why does it not reflow to use an alignment option where the caret is on the left top like this from the spec? !

Its a very good question and it actually blew my mind. I think about this a lot and found if it will be right align then also it would hide the AI Label content from top part. pls check the attached picture. Also, its same for popover and toogletip components. The problem doesn't get noticed for them bcs their content window is small in size as compared to AILabel so it get adjusted in either direction.

Please suggest what is the correct way to tackle the situation when available window size would hide the content in atleast one direction.

Note: by default it try to take left-top direction as we are providing fallbackAxisSideDirection: 'start' to flip in middleware.

[netlify]

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

Name	Link
🔨 Latest commit	dd53e95
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/671ff501e59517000885aeaa
😎 Deploy Preview	https://deploy-preview-17659--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.