Problem with `DxcDivider` inside fillParent container

Mil4n0r commented 4 months ago

Describe the bug There is an unexpected behavior when using a DxcDivider inside a DxcBox with a column DxcFlex. Under these circumstances, the DxcDivider has the same length as the content instead of fitting the whole box.

To Reproduce Test the following code:

<DxcBox size="fillParent">
  <DxcInset space="2rem">
    <DxcFlex direction="column">
      <DxcTypography>Box</DxcTypography>
      <DxcDivider />
      <DxcTypography>Box</DxcTypography>
    </DxcFlex>
  </DxcInset>
</DxcBox>

Expected behaviour The Divider should cover the whole box.

Screenshots

github-actions[bot] commented 4 months ago

Thank you for opening an issue! 🚀

Our team will review it as soon as possible. In the meantime, please make sure that you've provided all the necessary details to help us understand and address the issue effectively.

Feel free to contribute and participate in discussions!

Mil4n0r commented 4 months ago

This affects the new screen for Assure Answers

Jialecl commented 4 months ago

In my opinion the divider is working correctly in this scenario. The width works differently in a flex when the direction is changed to column.

I would change the flex into a grid component:

dxc-technology / halstack-react

Problem with `DxcDivider` inside fillParent container #1995