`TabPanels` height animation does not work with CSS logical properties (block-size/inline-size)

[lyhoang-web-dev]

Provide a general summary of the issue here

CSS logical properties (block-size/inline-size) are not recognized by the TabPanels height animation feature detection, causing --tab-panel-height and --tab-panel-width to never be set when logical properties are used in the transition.

🤔 Expected Behavior?

--tab-panel-height and --tab-panel-width CSS custom properties should be set
by TabPanels when using logical properties (block-size, inline-size) in the
CSS transition, enabling the animated height transition to work.

😯 Current Behavior

.react-aria-TabPanels {
  block-size: var(--tab-panel-height);
  transition: block-size 400ms ease;
}

The --tab-panel-height and --tab-panel-width CSS custom properties are never
set on the element, they remain undefined in DevTools even after switching tabs.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

StackBlitz,

• Please open Tabs.css and navigate to the .react-aria-TabPanels rule replaces height with block-size and width with inline-size in both the property and transition.
• Then open DevTools (F12) and inspect the TabPanels element: --tab-panel-height will show as undefined, and the height transition will not animate on tab switch.

Version

1.16.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like we just need to add tests for it here

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

Line 367 in 36fdd8b

hasTransition.current = /width|height|all/.test(window.getComputedStyle(el).transition);