Header and cancel button are not aligned in DxcDialog

[akhilrangu]

Describe the bug A clear and concise description of what the bug is.

In DxcDialog, the added Header is not aligned with the cancel button.

To Reproduce Include steps to reproduce the behaviour.

Example:

1. Create a new React app using Vite.
2. Install @dxc-technology\halstack-react package.
3. Click on '...'.
4. Scroll down to '...'.
5. See the error.

Expected behaviour A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Add labels Add any applicable label like the concerned components or the target version of the Design System where the bug has been found.

[github-actions[bot]]

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!

[GomezIvann]

Hello @akhilrangu!

I've checked your issue and there are some keypoints to understand. The DxcDialog component does not apply any padding to its content, so the alignment needs to be controlled by the user.

If you create a simple Dialog it appears like this:

() => {
  const [isDialogVisible, setDialogVisible] = useState(false);
  const handleClick = () => {
    setDialogVisible(!isDialogVisible);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Enter your data" onClick={handleClick} />
      {isDialogVisible && (
        <DxcDialog onCloseClick={handleClick}>
          Please enter your personal information.
        </DxcDialog>
      )}
    </DxcInset>
  );
}

Concluding, the alignment of your header needs to be controlled by you.

If you have any more doubts, please feel free to ask, Thanks!

[github-actions[bot]]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.

[github-actions[bot]]

This issue has been closed as it has been inactive for 15 days since being marked as stale.