Change RAC style merge order (#5506)

* Change style merge order for RAC

Author: snowystinger

packages/react-aria-components/src/OverlayArrow.tsx

@@ -54,8 +54,8 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
       {...props}
       {...renderProps}
       style={{
-        ...renderProps.style,
-        ...style
+        ...style,
+        ...renderProps.style
       }}
       ref={ref}
       data-placement={placement} />

packages/react-aria-components/src/Popover.tsx

@@ -142,7 +142,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     }
   });
 
-  let style = {...renderProps.style, ...popoverProps.style};
+  let style = {...popoverProps.style, ...renderProps.style};
 
   return (
     <Overlay isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>

packages/react-aria-components/src/Tooltip.tsx

@@ -147,7 +147,7 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
       {...tooltipProps}
       ref={props.tooltipRef}
       {...renderProps}
-      style={{...renderProps.style, ...overlayProps.style}}
+      style={{...overlayProps.style, ...renderProps.style}}
       data-placement={placement}
       data-entering={isEntering || undefined}
       data-exiting={props.isExiting || undefined}>

packages/react-aria-components/stories/index.stories.tsx

@@ -586,7 +586,8 @@ export const PopoverExample = () => (
         background: 'Canvas',
         color: 'CanvasText',
         border: '1px solid gray',
-        padding: 30
+        padding: 30,
+        zIndex: 5
       }}>
       <Dialog>
         {({close}) => (

packages/react-aria-components/test/Popover.test.js

@@ -152,6 +152,30 @@ describe('Popover', () => {
     expect(popover).not.toBeInTheDocument();
   });
 
+  it('supports overriding styles', async () => {
+    let {getByRole, getByTestId} = render(
+      <DialogTrigger>
+        <Button />
+        <Popover style={{zIndex: 5}}>
+          <OverlayArrow style={{top: 5}} data-testid="arrow">
+            <svg width={12} height={12}>
+              <path d="M0 0,L6 6,L12 0" />
+            </svg>
+          </OverlayArrow>
+          <Dialog>Popover</Dialog>
+        </Popover>
+      </DialogTrigger>
+    );
+
+    let button = getByRole('button');
+    await user.click(button);
+
+    let popover = getByRole('dialog').closest('.react-aria-Popover');
+    expect(popover).toHaveAttribute('style', expect.stringContaining('z-index: 5'));
+    let arrow = getByTestId('arrow');
+    expect(arrow).toHaveAttribute('style', expect.stringContaining('top: 5px'));
+  });
+
   describe('portalContainer', () => {
     function InfoPopover(props) {
       return (

packages/react-aria-components/test/Table.test.js

@@ -878,6 +878,33 @@ describe('Table', () => {
     }
   });
 
+  it('should support overriding table style', () => {
+    let {getByRole} = render(
+      <Table aria-label="Table" style={{width: 200}}>
+        <MyTableHeader>
+          <Column isRowHeader>Foo</Column>
+          <Column>Bar</Column>
+          <Column>Baz</Column>
+        </MyTableHeader>
+        <TableBody>
+          <MyRow href="https://google.com">
+            <Cell>Foo 1</Cell>
+            <Cell>Bar 1</Cell>
+            <Cell>Baz 1</Cell>
+          </MyRow>
+          <MyRow href="https://adobe.com">
+            <Cell>Foo 2</Cell>
+            <Cell>Bar 2</Cell>
+            <Cell>Baz 2</Cell>
+          </MyRow>
+        </TableBody>
+      </Table>
+    );
+
+    let table = getByRole('grid');
+    expect(table).toHaveAttribute('style', expect.stringContaining('width: 200px'));
+  });
+
   describe('links', function () {
     describe.each(['mouse', 'keyboard'])('%s', (type) => {
       let trigger = async (item, key = 'Enter') => {

packages/react-aria-components/test/Tooltip.test.js

@@ -115,6 +115,24 @@ describe('Tooltip', () => {
     rerender(<TestTooltip />);
     expect(tooltip).not.toBeInTheDocument();
   });
+
+  it('supports overriding styles', async () => {
+    let {getByRole} = render(<TestTooltip style={{zIndex: 5}} />);
+
+    let button = getByRole('button');
+
+    fireEvent.mouseMove(document.body);
+    await user.hover(button);
+    act(() => jest.runAllTimers());
+
+    let tooltip = getByRole('tooltip');
+    expect(tooltip).toHaveAttribute('style', expect.stringContaining('z-index: 5'));
+
+    await user.unhover(button);
+    act(() => jest.runAllTimers());
+  });
+
+
   describe('portalContainer', () => {
     function InfoTooltip(props) {
       return (