Container component with configurable background color.

[jsuarezgonz]

One of the scenarios that is very likely to occur is the use of a container component such as our DxcCard or DxcBox with a configurable background color.

For this scenario:

• Should we create a new component that allows this configuration?

• Should we give the user the option to configure the background color for any of these components, DxcBox, DxcCard, individually (apart from the theming)?

Some examples of other design systems:

Seek The Box component has a background prop with a limited set of 'semantic' options.
Lens The Container component has a backgroundColor prop limited to the use of one of the colors in their palette.
Gestalt The Box component has a property color with limited values.

[GomezIvann]

This is a fascinating topic Jairo.

From my point of view, this use case should be fulfilled by the Box component, but not ours. I mean, we should consider reimplementing our Box as a more primitive component, with some of the most common properties of HTML/CSS properties of the containers, among which would be the background color. This component (as the Typography) should represent and be strongly related to our design tokens.

More examples:

• Amplify
• Atlassian
• Cloudscape

[GomezIvann]

From my point of view, that isn't a use case for a Box component. I think a well-implemented Card would solve it.

To illustrate with an example:

const ChatBot = () => (
  <DxcCard>
    <DxcCard.Header>
      <DxcBox backgroundColor="#5F249F" width="100%" height="100%">
        <DxcFlex justifyContent="end" gap="0.5rem">
          <DxcButton label="Volume" mode="text" />
          <DxcButton label="Expand" mode="text" />
        </DxcFlex>
      </DxcBox>
    </DxcCard.Header>
    <DxcCard.Body>
      {...}
    </DxcCard.Body>
    <DxcCard.Footer>
      <DxcFlex gap="1rem">
        <DxcTextInput />
        <DxcButton label="Send" />
        <DxcButton label="Mic" />
      </DxcFlex>
    </DxcCard.Footer>
  </DxcCard>
);

I could also have given a display="flex" to the box of the Card header but I thought this would be more semantic.

[kukoc]

Oh!! Agree. It's a better use case for a card. However, we are still missing some props to round the borders or to add a shadow. Aren't we?

[GomezIvann]

Yes. Also to propose an inner structure inside the card using compound components. The Card component needs to be reviewed and re-built. That's why I wrote "a well-implemented Card".

Anyways, the fact that they have more rounded corners than us doesn't mean we should offer a border-radius prop. I mean, that's a design decision and should rely on our side. We shouldn't always be adapting our components to their necessities if we do not consider them fair enough. Most of the cases should be the other way around.

[kukoc]

Final Proposal:

• Box - Replace the Box with a new Container component as the lowest level of our Layout components with props at the primitive level to configure aspects like background or borders and deprecate the Box.

• Card - Redesign and reimplement this component to offer an opinionated structure to display a piece of information.