Error message when adding large files are not readable

[robbieaverill]

Originally from silverstripe/silverstripe-elemental-fileblock#9

Reproduce

1. Install silverstripe/elemental-fileblock on 2.x-dev and dnadesign/silverstripe-elemental on 4.x-dev
2. Create a page that has the ElementalPageExtension enabled
3. Add a FileBlock via the Add Block button
4. Click on the newly created File Block to expand it
5. Use the Browse link to add a file that is 2MB+
6. Observe an truncated error message as shown below

7. Hover over the error message and see that the tooltip does not show the entire message either

Acceptance criteria

• The user is able to read the error message presented in this scenario
• New design direction is followed
• Error messages extending the character limit on the line has been considered - does this need to be handled?

Design notes

• Exclude reference to any change outside of the error messaging, filename, file details, component size
• Make sure to have a look at the spacing, font sizes, and hight of the component/ item as referenced in the designs

[ScopeyNZ]

I think this component lives in asset-admin?

[robbieaverill]

Ha, true. I don't want to move it again though =D

[newleeland]

The confirmation messages don't work too well there in small screen widths. Update uploadfield design to accommodate longer messages

• Updated desktop version of uploadfields that comfortably hold error messages on DSM
• Updated desktop version of uploadfields to work on mobile on DSM
  - Removed mobile version from DSM.

[clarkepaul]

I'm getting the same issue but also the error message isn't readable either. SS4.3 using large image.

[ScopeyNZ]

Yeah it seems to just dump the response of the validation request verbatim. In your case it's obviously receiving some HTML page that it's dumping the source of 😞 .

[kinglozzer]

I suspect that #925 is the reason that @clarkepaul is seeing HTML instead of a friendly error message

[robbieaverill]

Note that the escaped HTML part of this is tracked here: #915

This issue should just address the fact that a message like "Filesize is too large" isn't able to be rendered. I believe someone made a PR that would show the full message as a title/hover tooltip, which is an improvement and might be enough to close this issue.

[brynwhyman]

Noting that this issue has been updated to include some new ACs. @silverstripeux noted that they want to have another look at the designs to check everything is in order

[sachajudd]

Updated designs can be found here: Silverstripe CMS Design System

Few notes:

• Updated the padding on the basics component which should apply to all uploadfields
• Added an additional extended error uploadfield that grows in width depending on how long the error message is. This is to cater for longer messages or possible translations.
• 4 examples of error messaging.
• Added a mobile error uploadfield example.

Let me know if you have any thoughts or feedback 🙂

[emteknetnz]

@sachajudd DSM link isn't working for me, I've tried logging in an out. Not sure what's going on

Could you take a screenshot of the design and post it here as a comment?

[sachajudd]

Sorted with @emteknetnz offline. Link is working correctly.

[emteknetnz]

Looks like this was indirectly fixed by #1138

This is how it now renders:

@brynwhyman you happy to close this?

[brynwhyman]

@emteknetnz the screenshot in the description looks to have a reduced-width. Have you tested that also?

I'm guessing that the messaging still won't be as responsive as we want it to be. When we looked at this issue, we felt that new designs would be the best way to solve the high-level bug that is: 'the error message is not readable'.

I wouldn't expect to close this issue until the following AC is met:

New design direction is followed

[emteknetnz]

Same width as original screenshot, still does not look particularly good

[sachajudd]

Agree with @brynwhyman to leave open until the new design direction has been followed.