feat(popover): use floating-ui for autoAlign (#14654)

* WIP: add floating-ui to popover

* WIP: use scss for align positioning, update CSSOM styling, add flip, add autoUpdate, add arrow, add offset

* wip(popover): explore logical properties support, popover offset from logical property

* WIP

* WIP: add fixed strategy, remove default popover styling when autoAlign

* WIP: properly set refs on reference element and floating element

* WIP

* wip(popover): correct caret placement

* wip(popover): update styles to support new alignment names

* feat(popover): cleanup autoalign implementation/styles

* fix(popover): improve autoAlign

* fix(popover): add forwardRef to ToggletipButton

* fix(popover): improve autoAlign compatibility with slug

* fix(popover): position absolute is not necessary on the container

* fix(slug): scope popover selectors for autoalign functionality

* chore: yarn dedupe

* chore(popover): remove console logs

* fix(popover): improve tests, cloneElement logic

* fix(popover): update align props across the entire system

* chore(popover): fix typescript issues

* fix(popover): ensure component api table in docs works

* chore(popover): typescript fixes

* fix(popover): ensure autoAlign properly pads out the slug caret

* fix(popover): typescript error

* fix(popover): remove offset when isTabTip

* fix(popover): correct caret style typo

* docs(popover): clean up stories

* test(popover): update story name

* chore: fix toggletip story width, vrt popover playground

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

e2e/components/Popover/Popover-test.avt.e2e.js

@@ -14,7 +14,7 @@ test.describe('@avt Popover', () => {
   test('@avt-advanced-states auto align', async ({ page }) => {
     await visitStory(page, {
       component: 'Popover',
-      id: 'components-popover--auto-align',
+      id: 'components-popover--experimental-auto-align',
       globals: {
         theme: 'white',
       },
@@ -52,19 +52,19 @@ test.describe('@avt Popover', () => {
     // Checking popover state and interaction with Enter key
     await expect(page.locator('.cds--popover--open')).toBeVisible();
     await page.keyboard.press('Enter');
-    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+    await expect(page.locator('.cds--popover--open')).toBeHidden();
 
     // Checking popover state and interaction with Space key
     await page.keyboard.press('Space');
     await expect(page.locator('.cds--popover--open')).toBeVisible();
     await page.keyboard.press('Space');
-    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+    await expect(page.locator('.cds--popover--open')).toBeHidden();
 
     // Checking popover state and interaction with Escape key
     await page.keyboard.press('Space');
     await expect(page.locator('.cds--popover--open')).toBeVisible();
     await page.keyboard.press('Escape');
-    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+    await expect(page.locator('.cds--popover--open')).toBeHidden();
 
     // Testing right popover
     await page.keyboard.press('Tab');
@@ -74,13 +74,13 @@ test.describe('@avt Popover', () => {
     await page.keyboard.press('Enter');
     await expect(page.locator('.cds--popover--open')).toBeVisible();
     await page.keyboard.press('Enter');
-    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+    await expect(page.locator('.cds--popover--open')).toBeHidden();
 
     // Checking popover state and interaction with Space key
     await page.keyboard.press('Space');
     await expect(page.locator('.cds--popover--open')).toBeVisible();
     await page.keyboard.press('Space');
-    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+    await expect(page.locator('.cds--popover--open')).toBeHidden();
 
     // Checking popover state and interaction with Escape key (it should not close)
     await page.keyboard.press('Space');

e2e/components/Popover/Popover-test.e2e.js

@@ -14,10 +14,10 @@ const { snapshotStory } = require('../../test-utils/storybook');
 test.describe('Popover', () => {
   themes.forEach((theme) => {
     test.describe(theme, () => {
-      test('Popover - auto align @vrt', async ({ page }) => {
+      test('Popover @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Popover',
-          id: 'components-popover--auto-align',
+          id: 'components-popover--playground',
           theme,
         });
       });

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -1403,10 +1403,14 @@ Map {
           Array [
             "top",
             "top-left",
+            "top-start",
             "top-right",
+            "top-end",
             "bottom",
             "bottom-left",
+            "bottom-start",
             "bottom-right",
+            "bottom-end",
             "left",
             "right",
           ],
@@ -4083,10 +4087,14 @@ Map {
           Array [
             "top",
             "top-left",
+            "top-start",
             "top-right",
+            "top-end",
             "bottom",
             "bottom-left",
+            "bottom-start",
             "bottom-right",
+            "bottom-end",
             "left",
             "right",
           ],
@@ -6069,6 +6077,14 @@ Map {
             "right",
             "right-bottom",
             "right-top",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
           ],
         ],
         "type": "oneOf",
@@ -9058,6 +9074,14 @@ Map {
             "right",
             "right-bottom",
             "right-top",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
           ],
         ],
         "type": "oneOf",
@@ -9090,6 +9114,7 @@ Map {
     },
   },
   "ToggletipButton" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -9101,6 +9126,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "ToggletipContent" => Object {
     "propTypes": Object {
@@ -9142,6 +9168,14 @@ Map {
             "right",
             "right-bottom",
             "right-top",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
           ],
         ],
         "type": "oneOf",
@@ -10491,6 +10525,14 @@ Map {
             "right",
             "right-bottom",
             "right-top",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
           ],
         ],
         "type": "oneOf",

packages/react/package.json

@@ -52,6 +52,7 @@
     "@carbon/icons-react": "^11.38.0",
     "@carbon/layout": "^11.21.0",
     "@carbon/styles": "^1.53.0",
+    "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",

packages/react/src/components/ComboButton/ComboButton-test.js

@@ -90,11 +90,11 @@ describe('ComboButton', () => {
     describe('supports props.tooltipAlignment', () => {
       const alignments = [
         'top',
-        'top-left',
-        'top-right',
+        'top-start',
+        'top-end',
         'bottom',
-        'bottom-left',
-        'bottom-right',
+        'bottom-start',
+        'bottom-end',
         'left',
         'right',
       ];

packages/react/src/components/ComboButton/index.js

@@ -194,10 +194,14 @@ ComboButton.propTypes = {
   tooltipAlignment: PropTypes.oneOf([
     'top',
     'top-left',
+    'top-start',
     'top-right',
+    'top-end',
     'bottom',
     'bottom-left',
+    'bottom-start',
     'bottom-right',
+    'bottom-end',
     'left',
     'right',
   ]),

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r55:-title"
+        id="tc-:r5k:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r55:-description"
+        id="tc-:r5k:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r55:-title"
+        aria-labelledby="tc-:r5k:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -182,20 +182,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r4v:-title"
+        id="tc-:r5e:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r4v:-description"
+        id="tc-:r5e:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r4v:-title"
+        aria-labelledby="tc-:r5e:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -354,13 +354,13 @@ exports[`DataTable behaves as expected selection should render and match snapsho
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r22:-title"
+        id="tc-:r28:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r22:-description"
+        id="tc-:r28:-description"
       />
     </div>
     <section
@@ -574,7 +574,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:r29:"
+                aria-labelledby="tooltip-:r2f:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -603,7 +603,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:r29:"
+              id="tooltip-:r2f:"
               role="tooltip"
             >
               <span
@@ -629,7 +629,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r22:-title"
+        aria-labelledby="tc-:r28:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -800,13 +800,13 @@ exports[`DataTable renders as expected - Component API should render and match s
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:rb:-title"
+        id="tc-:rc:-title"
       >
         DataTable with toolbar
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:rb:-description"
+        id="tc-:rc:-description"
       />
     </div>
     <section
@@ -1008,7 +1008,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:rh:"
+                aria-labelledby="tooltip-:ri:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -1037,7 +1037,7 @@ exports[`DataTable renders as expected - Component API should render and match s
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:rh:"
+              id="tooltip-:ri:"
               role="tooltip"
             >
               <span
@@ -1063,7 +1063,7 @@ exports[`DataTable renders as expected - Component API should render and match s
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:rb:-title"
+        aria-labelledby="tc-:rc:-title"
         class="cds--data-table cds--data-table--lg cds--data-table--visible-overflow-menu"
       >
         <thead>

packages/react/src/components/IconButton/index.tsx

@@ -29,10 +29,14 @@ interface IconButtonProps
   align?:
     | 'top'
     | 'top-left'
+    | 'top-start'
     | 'top-right'
+    | 'top-end'
     | 'bottom'
     | 'bottom-left'
+    | 'bottom-start'
     | 'bottom-right'
+    | 'bottom-end'
     | 'left'
     | 'right';
 
@@ -161,10 +165,14 @@ IconButton.propTypes = {
   align: PropTypes.oneOf([
     'top',
     'top-left',
+    'top-start',
     'top-right',
+    'top-end',
     'bottom',
     'bottom-left',
+    'bottom-start',
     'bottom-right',
+    'bottom-end',
     'left',
     'right',
   ]),