Add attachment bar for preview upload

[compulim]

Resolves #5463.

Changelog Entry

Added

• Resolved #5463. Added attachment preview for sendAttachmentOn: "send", in PR #5464, by @compulim
  • Attaching files will no longer remove previously attached files

Description

Today, upload button will always replace all file attachments. The UX is not great when trying to upload bunches of files from 2+ folders, where 2+ uploads are required, and the second upload overwrite the first upload.

To allow end-user to add files instead of replace, we must allow them to remove attached files. That means, we need attachment preview, where they can choose what files to be removed.

Design

We will add a new "attachment bar" to show attached files:

• When 1-3 files are attached, will show as thumbnails
  • Configurable via styleOptions.sendBoxAttachmentBarMaxThumbnail
• When 4+ files are attached, will show as list item

Show as thumbnail

• Will show delete button on hover
  • In reduced motion mode, delete button will always show to reduce flickering
• Image files will be shown as thumbnail (based on existing create thumbnail logic)
• Other files will be shown as a generic file icon
• Delete button will have tooltip of "Delete" and narrate as "Delete attachment filename.jpg"
• When overflow, will show a scrollbar

• Thumbnail will have tooltip of the filename
  • If the filename is not provided, will be "An image" or "A file"
  • Delete button could narrate "Delete attachment An image" or "Delete attachment A file"

Show as list item

• Image files will have an image icon
• Other files will have a generic file icon

• Maximum height is 114px and will be scrollable
  • Configurable via styleOptions.sendBoxAttachmentBarMaxHeight
• Will scroll to bottom after adding more attachments

Specific Changes

• Added <SendBoxAttachmentBar> to <BasicSendBox>

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[OEvgeny]

Looks good. Need some polish for icons and CSS.

Wasn't the point to add this into both Fluent and white label? Right now I see only white label UX.

[OEvgeny]

This type of icons is hard to customize, see the above comment re unified icons.