aspect-ratio not supported

Description

Passing aspectRatio into layout components isn’t recognized, it only works when passing it into the sx prop.

Link to Reproduction

https://codesandbox.io/s/happy-brattain-s7uku?file=/src/App.js

Steps to reproduce

1. The red box has aspectRatio={'1'} passed directly into it, but it does not show up as aspect-ratio: 1; in the rendered page.
2. The blue box has aspectRatio={'1'} passed through the sx prop and it renders as expected.

Chakra UI Version

1.6.5

Browser

Brave Version 1.27.108

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[TimKolberger]

Thanks for bringing this up @ngregrichardson!

We support the most common CSS properties as component props. A CSS property which refers to a token in the theme makes sense to provide them as a component prop, but the aspect-ratio is a rarely used (imo) one and can be achieved with our <AspectRatio /> component.

Let’s see if this issue gets a few upvotes or the stale does it’s job and closes this feature request.

[isaachinman]

I’d love to see aspect-ratio supported, as it has good browser support and achieves what the AspectRatio component does in one line, plus works flawlessly with flex layouts.

Please let me know if a PR would be accepted.