ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

[Dialog]: Dialog width calculation does not take Button Text Width into consideration

Open gitgdako opened this issue 4 months ago • 4 comments

Describe the bug

{ Dialog, Bar } from '@ui5/webcomponents-react';

Source Doc: Dialog: https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/modals-popovers-dialog--docs Dialog Styling with MessageViewButton: https://experience.sap.com/wp-content/uploads/sites/56/2021/11/message-popover_overview_1.96.png https://experience.sap.com/fiori-design-web/messaging/#message-popover

Using a dialog as described in your documentation with a small content and long Button Text, the Button Text is truncated. This is even more of an issue if as described in the linked Fiori Doc you have a Save and a Close Button as well as Space for the MessageViewButton. In the stackblitz as well as in your storybook the dialog has a min-width of 20rem, which our local implementation does not get automatically, therefore amplifying the issue. Setting that value was our fix for now as well

I am very sure that this behaviour has changed from webcomponents 2.2 to 2.3 (maybe the min-width got lost), but we can not easily verify that. Either way this is likely a webcomponents issue

      <Dialog
        footer={
          <Bar
            design="Footer"
            endContent={
              <Button onClick={() => setOpen(false)}>
                This is a very long text that exceeds the calculated width of
                the dialog
              </Button>
            }
          />
        }
        headerText="Dialog Header"
        open={open}
      />

Isolated Example

https://stackblitz.com/edit/github-lqbaqm

Reproduction steps

  1. https://stackblitz.com/edit/github-lqbaqm
  2. Click Button -> Dialog opens
  3. Text is truncated

Expected Behaviour

(Up to a reasonable max-width) the content of the footer is taking into consideration when calculating the dialog width

Screenshots or Videos

No response

UI5 Web Components for React Version

2.2.0

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

  • [X] I’m not disclosing any internal or sensitive information.

gitgdako avatar Oct 10 '24 10:10 gitgdako