fix: pass style and labels to TabPanels (adobe#9562)

* fix: make sure to pass style and labels on TabPanels

* fix space

Author: yihuiliao

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

@@ -394,14 +394,15 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
     prevSize.current = ref.current.getBoundingClientRect();
   }
 
-  let DOMProps = filterDOMProps(props, {global: true});
+  let DOMProps = filterDOMProps(props, {labelable: true, global: true});
   delete DOMProps.id;
 
   return (
     <dom.div
       render={props.render}
       {...DOMProps}
       ref={ref}
+      style={props.style}
       className={props.className || 'react-aria-TabPanels'}>
       <Collection {...props} />
     </dom.div>

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

@@ -649,6 +649,42 @@ describe('Tabs', () => {
     expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
   });
 
+  it('should support tabpanels with aria-labels', () => {
+    let {getByTestId} = render(
+      <Tabs>
+        <TabList aria-label="test">
+          <Tab id="a">A</Tab>
+          <Tab id="b">B</Tab>
+        </TabList>
+        <TabPanels aria-label="test" data-testid="tabpanels">
+          <TabPanel id="a">A</TabPanel>
+          <TabPanel id="b">B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    let tabPanels = getByTestId('tabpanels');
+    expect(tabPanels).toHaveAttribute('aria-label', 'test');
+  });
+
+  it('should support tabpanels with custom styles', () => {
+    let {getByTestId} = render(
+      <Tabs>
+        <TabList aria-label="test">
+          <Tab id="a">A</Tab>
+          <Tab id="b">B</Tab>
+        </TabList>
+        <TabPanels style={{width: '100px'}} data-testid="tabpanels">
+          <TabPanel id="a">A</TabPanel>
+          <TabPanel id="b">B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    let tabPanels = getByTestId('tabpanels');
+    expect(tabPanels).toHaveStyle({width: '100px'});
+  });
+
   it('supports tooltips', async function () {
     let {getByRole, getAllByRole} = render(
       <Tabs>