search

radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
https://radix-ui.com/themes
MIT License
5.33k stars 190 forks source link

fix: allow nesting sized containers #593

Open joeholdcroft opened 6 days ago

joeholdcroft commented 6 days ago

Description

Currently, if you try to nest a Container component with a smaller size than a Container component that wraps it at any level, the size does not correctly take effect. It always uses the largest size of any wrapping Container component due to CSS specificity.

This PR resolves this by applying the CSS for the sizing specifically to .rt-ContainerInner that are a direct descendent of the .rt-Container.

Testing steps

Use the following JSX and check the correct widths are applied in browser.

<Container size="4">
  <Text>This should be size 4</Text>
  <Container size="1">
    <Text>This should be size 1</Text>
  </Container>
</Container>

Alternatively, review the new Container samples in the "sink" demo example page.

Related issues / PRs

N/A

vercel[bot] commented 6 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
themes-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 23, 2024 0:50am