[Layout] align and justify have no affect on item

[rosskevin]

Description

While you are allowed to specify align and justify on a <Layout item/>, these props have no effect because the component is missing display: flex. If these are valid props, we need to add display: flex. If these are not a valid combination, we may need to consider either a warning or splitting components to prevent misuse.

Implementation note

I haven't seen this in the next code yet, but I'm using the technique in my own app. This might be an easy way to make sure the prop gets added by doing:

const flex = { display: 'flex' };
return {
 'xs-center': {
    ...flex,
  // (other existing content)
}

Link to minimally-working code that reproduces the issue

<Layout container>
    <Layout item xs={2} />
    <Layout item xs={4} align='center' justify='center'>foo</Layout>
    <Layout item xs={4} align='center' justify='center'>bar</Layout>
    <Layout item xs={2} />
</Layout>

Versions

• Material-UI: next
• React:
• Browser:

[oliviertassinari]

Good question. I'm assuming align="center" do not refer to align-self: center; but to align-items: center;.

If these are not a valid combination, we may need to consider either a warning or splitting components to prevent misuse.

That combination hasn't been taken into account when designing the component.
That's an invalid combination, more precisely:

• The align, justify, wrap, direction, gutter properties are only intended to be used with a container.
• The xs, sm, md, lg properties are only intended to be used with an item.

We could be using the following helper to make that clear. But we need to update the propType generator to understand it.

const requireProp = requiredProp => validator =>
  (props, propName, componentName, location, propFullName, ...args) => {
    const componentNameSafe = componentName || '<<anonymous>>';
    const propFullNameSafe = propFullName || propName;

    if (typeof props[propName] !== 'undefined') {
      warning(
        props[requiredProp],
        `The property \`${propFullNameSafe}\` of `
          + `\`${componentNameSafe}\` must be used on \`${requiredProp}\`.`
      );
    }

    return validator(props, propName, componentName, location, propFullName, ...args);
  };

// ...

align: requireProp('container')(PropTypes.oneOf([
  'flex-start',
  'center',
  'flex-end',
  'stretch',
])),

Regarding your specific example, I would rather be doing the following.
You can mix item and container:

<Layout container>
  <Layout item xs={2} />
  <Layout
    item
    container
    xs={4}
    align="center"
    justify="center"
  >
    <Layout item>
      foo
    </Layout>
  </Layout>
  <Layout
    item
    container
    xs={4}
    align="center"
    justify="center"
  >
    <Layout item>
      bar
    </Layout>
  </Layout>
  <Layout item xs={2} />
</Layout>

[rosskevin]

I was expecting it to yield align-items: center which it was, but without the display: flex - which leads me to believe that either it is a bug (which I think most would report this as) or unintended.

I think there will be great confusion about the usage of Layout and we should be able to use the component with only designated parameters. I'm really concerned about supportability with widespread use.

1. Given this concern and the different intent of container and item, should we be splitting these into two components (at least for prop validation and general understanding), even if we ultimately use something like Layout underneath?
2. Is the reason it is not two components so that we reduce generated style size?

[rosskevin]

I'm going to try your example. I'm coming around to the understanding that something could be both item and container. Maybe it is a doc issue, but I'd still like to provide warnings when props are used in invalid combinations.

[oliviertassinari]

I'm coming around to the understanding that something could be both item and container

Yes, it can. We fully embrace the flexbox model. That ambivalence is at the heart of the model. A flex container can also be an item.
That feature was introduced with that PR #5827. It can be a bit confusion and harder to master.
I haven't added it to the demos. We could.

I'd still like to provide warnings when props are used in invalid combinations.

I agree 💯 . I will do it.

[annjawn]

@oliviertassinari Is there any documentation on how to use Layout? I can't seem to find it in the documentation. sorry I am very new to MUI.

[oliviertassinari]

@annjawn The component was renamed Grid.