Flex component issues with setting width/height

[alfredlucero]

A common use case for using flex styles is in our loading, success, and error cards which involve horizontally and vertically centering content within a div container that has a set height/max-height and 100% width.

For example, the cards will look like this

When we tried using the Flex component to achieve this, we ran into an issue where setting the height prop will not do anything to set the height of the display:flex div and TypeScript will not yell about any prop errors. You can see the LoadingCardFlex component here.

// Using the Flex component, we cannot set a height/maxHeight or width/maxWidth to help with laying things out better and controlling the size of the overall container
// TS doesn't complain about passing in height and even if we do, passing in height doesn't do anything
// It would be nice to set the width/height on the display: flex div container or even throw in our own className/styles as an escape hatch to do what we want with it
// Otherwise, doing the usual vertical/horizontal center alignment will not work as well as the content will be scrunched down
export const LoadingCardFlex = () => {
  return (
    <Card padding="space0">
      <Flex
        height="320px" // TypeScript doesn't complain about passing in height and height never makes it onto the computed styles
        display="flex"
        hAlignContent="center"
        vAlignContent="center"
        vertical
      >
        <Box width="100%" textAlign="center" paddingBottom="space30">
          <Spinner size="sizeIcon60" decorative title="Loading" />
        </Box>
        <Text
          as="p"
          fontSize="fontSize40"
          textAlign="center"
          fontWeight="fontWeightBold"
        >
          Loading...
        </Text>
      </Flex>
    </Card>
  );
};

I feel like when I use display:flex on a div, I often would like to set my own width/max-width or height/max-height so we can have better control over the layout. This version since it doesn't have height added onto it and we cannot pass className onto the Flex component to override things, it looks all scrunched up like this

As a workaround, we used the Box component instead and set the properties like this

// Using Box, I can more easily set the height and vertically and horizontally center the content easier than the current <Flex> component
export const LoadingCardBoxWorkaround = () => {
  return (
    <Card padding="space0">
      <Box
        height="320px"
        display="flex"
        justifyContent="center"
        alignContent="center"
        flexDirection="column"
      >
        <Box width="100%" textAlign="center" paddingBottom="space30">
          <Spinner size="sizeIcon60" decorative title="Loading" />
        </Box>
        <Text
          as="p"
          fontSize="fontSize40"
          textAlign="center"
          fontWeight="fontWeightBold"
        >
          Loading...
        </Text>
      </Box>
    </Card>
  );
};

Here is a link to the codesandbox to reproduce and check out the code more.
https://codesandbox.io/s/flex-component-struggles-8l8jf?file=/src/LoadingCard.tsx

TLDR: it would be nice to be able to add our own height/max height or width/max-width to our Flex component parent containers so we can easily achieve vertical/horizontally centering to the Flex component container's height/width dimension. TypeScript doesn't yell at us for using height and it doesn't seem to be working in passing in any styles. We can use Box for now, but I feel this Flex component can be more flexible 😂 . Thanks! Let me know what you think.

[TheSisb]

Hi @alfredlucero,

First off I want to say this question is asked beautifully. You clearly explained the problem and your expectations, and even included a Codesandbox link... Thank you!

I think you're on to something here, in that Flex is kind of in a weird place. I chatted with the team about it and we're mixed about whether Flex should accept the same props as Box, or if we should just deprecate Flex altogether. We're drafting up a RFC and will allow everyone to comment on how they'd like to see this component evolve. Expect to see it up here soon (I'll ping you too).

In the short term you have two options: you can use Flex and simulate height with the margin/padding props (https://codesandbox.io/s/flex-component-struggles-forked-6d7p9?file=/src/LoadingCard.tsx) or use Box as you've showcased in your example above.

Thanks for bringing this to our attention.

[alfredlucero]

Excellent! Thanks for the suggestions and looking forward to the RFC/where the Flex component goes.

[TheSisb]

Just a small update: we haven't forgotten about this. We decided against the RFC because the Flex component is widely used already, so deprecating the component would be too expensive and it has already shown value (>300 uses).

We will work towards improving the API incrementally. I've updated our internal ticket in that regard so it will soon accept these missing props.

[gloriliale]

The ticket regarding the work on this API is here!

[SiTaggart]

So it turns out this was just a bug really, we were extending the layout style props without actually forwarding them down.

I new version has just gone out, and you should be able to set width and height properties now @alfredlucero