[Stack/Split] - Easier interface to use

[andrewballantyne]

Is this a new component or an extension of an existing one? What is the existing component, if any? Stack, Split (maybe this extends to Flex)

Describe the feature A clear and concise description of the new feature. What is the expected behavior?

Can we get a smaller barrier to entry to using Stack and Split where the Item variant is not needed? Officially supporting a more simple interface.

<Stack hasGutter>
  <MyItem />
  <MyOtherItem />
</Stack>

instead of the more verbose:

<Stack hasGutter>
  <StackItem>
    <MyItem />
  </StackItem>
  <StackItem>
    <MyOtherItem />
  </StackItem>
</Stack>

The only use-case I see for using a StackItem is for isFilled -- not sure if there is a better way to get around that. Maybe that's your use-case for StackItem?

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths Include screenshots or links to Marvel or other mockups.

Any other information?

[srambach]

@mcoker WDYT?

[mcoker]

Totally agree. This looks like 3 updates:

• Update core and react examples and documentation to show the items aren't required and maybe talk about use cases for using the items.
• Update stack and split in core to allow the class applied by isFilled to work on anything. Currently that class needs to be attached to the stack/split item. FWIW, both flex and grid allow their child modifiers to work on anything.
• See if there is some way we can have the react component apply the class applied by isFilled (.pf-m-fill) to something the user passes as a child that isn't a split/stack item? FWIW this would apply to the other layouts that allow props/classes on the children - flex, grid, etc. Not sure if that's possible - if not, maybe we could just document something like "[layout] items are required if you want to use the props that apply to items, otherwise you can omit the item and apply the CSS classes manually"

[andrewballantyne]

See if there is some way we can have the react component apply the class applied by isFilled (.pf-m-fill) to something the user passes as a child that isn't a split/stack item? FWIW this would apply to the other layouts that allow props/classes on the children - flex, grid, etc. Not sure if that's possible - if not, maybe we could just document something like "[layout] items are required if you want to use the props that apply to items, otherwise you can omit the item and apply the CSS classes manually"

Spit-balling here... could you not just wrap in a div since you're going to control the flow anyways... I can't imagine in a stack or split scenario a div with .pf-m-fill would be a problem... well, maybe in the Split scenario 🤔 Depends on how you implement the omittied Item wrappers.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[andrewballantyne]

@mcoker are we letting this go stale? Does this have a roadmap goal?