Polaris
This is an alpha release of the new layout components. That means we’re making the new layout components and Figma components available, but there could still be significant developments. Our goal is to share the work so that you can understand what’s changing, start using the layout updates, and provide feedback to help us improve.
🚧 Please note: Since significant changes could still be made, please work with your team and the Polaris team to determine what's best for your situation. Feel free to create an issue for any feedback related to the layout components.
Let’s dive in!
Why are we making changes?
Users building new layouts are restricted by Polaris and often create custom solutions. Polaris currently only provides two layout components which aren’t always the best solution for a specific problem. Even inside the Polaris components, our own layout components are only used 20% of the time.
Creating new layout components and applying them to the existing Polaris components will allow us to create a flexible system. These layout components will enable users to create more intentional layouts with minimal tweaks and more flexibility.
What's changing
Removed components
The original Stack and Card components have been removed and replaced with LegacyStack and LegacyCard. We plan to replace LegacyStack and LegacyCard with the new Card and VerticalStack (renamed to BlockStack in v12) components in the next major release.
Renamed components
AlphaCard has been renamed to Card to mitigate confusion with component names being tied to component lifecycle stages.
Stable components
The Text component has been moved from beta to stable phase. Its API is stable and ready for full adoption. Text can support most, if not all, environments.
What’s next?
We are working on aligning layout component APIs across the platform for consistency. Once those are finalized and implemented, we will mark the remaining layout components as beta. Additionally, we will be creating codemod transformations for users to migrate from LegacyCard to Card, LegacyStack to BlockStack, and TextContainer to BlockStack.