Open artyrcheek opened 1 year ago
chloerice
commented
1 year ago Hi @artyrcheek 👋🏽 The LegacyStack.distribution prop handled horizontal alignment, which maps to the Inline.align prop or the AlphaStack.inlineAlign prop on the new components.
artyrcheek
commented
1 year ago My bad!
chloerice
commented
1 year ago No worries at all!! There's a learning curve with these new components.
RienNeVaPlus
commented
1 year ago The old Stack component allowed it's children to fill. Is this still possible?
<LegacyStack>
<LegacyStack.Item fill>Filling child</LegacyStack.Item>
<Button>Pushed to right side</Button>
</LegacyStack>
peylun
commented
1 year ago Bumping the above, it is a pretty common use case at least for our app where we would need a section that fills the remaining space:
Is it possible for e.g. HorizontalStack to allow specification of flex to allow greater flexibility (we could then set to 1 for the fill item in this case)? We couldn't currently move from LegacyStack to HorizontalStack unless we do custom styling.
That said, HorizontalStack / VerticalStack fixed some of the issues on LegacyStack and I really like it~
RienNeVaPlus
commented
1 year ago This is how I ended up doing it:
The component:
export function Style(props){
const { id, className, children, style = {}, ...css } = props
const prop = {id, className, children}
return <div
{...prop}
style={{
...style,
...Object.entries(css).reduce((p, c) => assign(p, c[0], c[1]), {})
}}
/>
}Using it as:
<HorizontalStack>
<Style flexGrow="1">Filling child</Style>
</HorizontalStack>The Style component is propably bad design, however it just works.
chloerice
commented
1 year ago I like the approach you took @RienNeVaPlus, wrapping the child in a flex-item of sorts like the old Stack still makes sense. 💯 We've been focused on the new design language for the last couple months, but will be hopping back into layout components in a bit as their APIs have almost reached alignment. Will point to this approach when we start digging back in 👀
jvliwanag
commented
1 year ago Should we open a new issue for fill functionality?
chloerice
commented
1 year ago Hey @jvliwanag 👋🏽 We don't have plans for direct migration path to the fill functionality. Try using HorizontalGrid to create responsive columns within HorizontalStack using column widths approach and let us know how that works for your use case 🙏🏽 .
errolgr
commented
11 months ago Hi @chloerice, I wanted to chime in on the use of HorizontalGrid as a suggested replacement for the fill functionality of LegacyStack.Item.
I've extensively used LegacyStack in my past projects and appreciated its capabilities, particularly the fill property. Recently, while transitioning to newer versions of Polaris and utilizing components like InlineStack, Box, and InlineGrid, I've noticed the absence of a direct replacement for the fill functionality. This feature was instrumental in creating responsive and dynamic layouts in my previous applications.
While HorizontalGrid does provide a responsive layout with column widths, it doesn't seem to fit the use case where a specific element needs to dynamically "fill" all available space within a container. The fill functionality in LegacyStack was straightforward and effective for layouts where one element (like a flexible text container or a div) needs to expand and utilize any remaining space, thereby pushing other elements to the sides. This pattern is quite prevalent, especially in complex UIs where dynamic content needs to adjust to varying container sizes.
InlineGrid (formally HorizonalGrid) seems more suited for predefined column layouts rather than dynamic space distribution. A direct or similar replacement for the fill property would be greatly beneficial, allowing elements within a InlineStack (formally HorizontalStack) to flexibly adapt to the available space. This is particularly useful in headers, footers, navigational elements, and other areas where space needs to be allocated dynamically based on content size.
Could there be a possibility to revisit this functionality, either as an enhancement to existing components or as a new feature? It would help maintain the simplicity and effectiveness that many of us have come to appreciate in Polaris components.
github-actions[bot]
commented
5 months ago Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.
If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.
skjolber
commented
4 months ago Any progress (+ bump to avoid close)?
I am new to Polaris and was expecting modern features like fill, as seen in other GUI frameworks like Android.
peylun
commented
2 months ago 👋 Sharing what Audiences has grown to use more in favour of InlineStack for responsive designs. May not be the most modular design here because we had not intended for them to be long term, but has allowed enough flexibility / control for us so far:
FlexDisplay for the parent (flex container)FlexItem for the children (flex items)For FlexDisplay, I actually like that we could vary the flex direction with viewport size (example). We didn't map / support all the possible flex properties though. E.g. for FlexItem we mostly use flex={1} for the "fill" property.
Happy to discuss and contribute on this!
The old Stack component would give us options for distribution, are we just supposed to create our own flex divs for that now?!