BREAKING CHANGE(web-react): Add spirit infix to data-placement in T…

…ooltip #DS-585

Also added `spirit` infix to internal implementations of components where
it controls CSS behaviour.

 ## Migration Guide

If you need advanced positioning of Tooltip with Floating UI, you need
to change `data-placement` prop to `data-spirit-placement`.

- `<Tooltip data-placement={placement} …>` → `<Tooltip data-spirit-placement={placement} …>`

See updated README of the Tooltip component.

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

packages/web-react/src/components/Collapse/__tests__/useCollapseAriaProps.test.ts

@@ -13,7 +13,7 @@ describe('useCollapseAriaProps', () => {
 
     expect(result.current.ariaProps).toBeDefined();
     expect(result.current.ariaProps.root).toBeDefined();
-    expect(result.current.ariaProps.root['data-breakpoint']).toBeUndefined();
+    expect(result.current.ariaProps.root['data-spirit-breakpoint']).toBeUndefined();
     expect(result.current.ariaProps.trigger['aria-expanded']).toBeTruthy();
     expect(result.current.ariaProps.trigger['aria-controls']).toBe(props.id);
     expect(result.current.props.id).toBe(props.id);
@@ -27,6 +27,6 @@ describe('useCollapseAriaProps', () => {
     } as SpiritCollapseProps;
     const { result } = renderHook(() => useCollapseAriaProps(props));
 
-    expect(result.current.ariaProps.root['data-breakpoint']).toBe('mobile');
+    expect(result.current.ariaProps.root['data-spirit-breakpoint']).toBe('mobile');
   });
 });

packages/web-react/src/components/Collapse/useCollapseAriaProps.ts

@@ -2,7 +2,7 @@ import { CollapseProps, BaseCollapseProps, Booleanish } from '../../types';
 
 const ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';
 const ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';
-const ATTRIBUTE_DATA_BREAKPOINT = 'data-breakpoint';
+const ATTRIBUTE_DATA_BREAKPOINT = 'data-spirit-breakpoint';
 
 export interface CollapseAria {
   ariaProps: {

packages/web-react/src/components/Dropdown/useDropdownAriaProps.ts

@@ -3,8 +3,8 @@ import { Booleanish, ClickEvent, DropdownBreakpoint, DropdownFullWidthMode } fro
 const NAME_ARIA_EXPANDED = 'aria-expanded';
 const NAME_ARIA_CONTROLS = 'aria-controls';
 /** @deprecated Will be removed in the next major version. */
-const NAME_DATA_BREAKPOINT = 'data-breakpoint';
-const NAME_DATA_FULLWIDTHMODE = 'data-fullwidthmode';
+const NAME_DATA_BREAKPOINT = 'data-spirit-breakpoint';
+const NAME_DATA_FULLWIDTHMODE = 'data-spirit-fullwidthmode';
 
 export enum fullWidthModeKeys {
   'off' = 'off',

packages/web-react/src/components/Tooltip/README.md

@@ -155,7 +155,7 @@ const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, d
       top: y ?? 0,
       left: x ?? 0,
     }}
-    data-placement={placement}
+    data-spirit-placement={placement}
     {...getFloatingProps()}
   >
     Hello there!
@@ -212,7 +212,7 @@ const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, d
       top: y ?? 0,
       left: x ?? 0,
     }}
-    data-placement={placement}
+    data-spirit-placement={placement}
     {...getFloatingProps()}
   >
     Hello there!

packages/web-react/src/components/Tooltip/stories/TooltipDismissibleFloatingUi.tsx

@@ -53,7 +53,7 @@ const Story: ComponentStory<typeof Tooltip> = () => {
               top: y ?? 0,
               left: x ?? 0,
             }}
-            data-placement={placement}
+            data-spirit-placement={placement}
             {...getFloatingProps()}
           >
             Hello there!

packages/web-react/src/components/Tooltip/stories/TooltipFloatingUi.tsx

@@ -51,7 +51,7 @@ const Story: ComponentStory<typeof Tooltip> = () => {
               top: y ?? 0,
               left: x ?? 0,
             }}
-            data-placement={placement}
+            data-spirit-placement={placement}
             {...getFloatingProps()}
           >
             Hello there!