height/minHeight for Flex component

[vankhoawin]

I was wondering if the Flex component was missing height/maxHeight/minHeight props? I see that it takes similar width props here:

paste/packages/paste-core/layout/flex/src/index.tsx

Lines 73 to 75 in 7a70537

	maxWidth={maxWidth}
	minWidth={minWidth}
	width={width}

The reason I'm asking is because I'm trying to vertically align a Spinner in a Flexed box with a static height, and TypeScript accepts my height props but doesn't actually propagate them.

[SiTaggart]

HI @vnguyen94, it's an interesting suggestion that we might consider.

The current idea with components like Flex and Grid is that they are purely convenience components that only do one job really well. For Flex, it does flex box layout really well. If you want more than just that one job, then you probably need Box as it comes with all the css props you can hopefully ever need.

We're still learning about the usefulness of convenience components like these via adoption, so this is a useful observation.

For now, I'd just use Box, we might add further layout properties to Flex at a later date.

[vankhoawin]

Yeah I tried a few different combinations of Flex and Box but it wasn't giving me the output I wanted -- a vertically aligned container with a fixed/minimum height. Putting a a fixed height Box inside of Flex vertically-aligned the Box, but not the contents inside the Box.

Frankly I could be flexing incorrectly though 😅

[SiTaggart]

Could you do something like https://codesandbox.io/s/flexed-and-centered-spinner-rp0l8?file=/src/index.tsx

[vankhoawin]

yeah that works too. since Flex is just a Box under the hood, I was expecting Flex to be a subset of Box and would support the props that would be on Box

[SiTaggart]

Yeah, Flex right now is a sub set of Box, in that we expose a few of the base Box props and then supplements those few with Flex specific props.

I don't think we'd ever do a super set where we expose all box props and then supplement those with component specific props. Mainly because we don't want folks modifying the behaviour (style is a behaviour in layout components) outside of primitive components.

Box is your friend right now.