Page Comparison

Toast contents

Adam Stankiewicz on behalf of Braden MacDonald and Rômulo Penido

Currently, Toast only accepts a string as its contents (i.e., children) per the PropType definition.

An open PR is proposing to update the PropType to allow any node, rather than only strings.

The given use case was primarily to be able to pass FormattedMessage (from react-intl), but this could also be done through intl.formatMessage to appease the existing PropType.string.

The Toast does accept an optional action prop, which renders an appropriately styled Button within the Toast.

[question] Perhaps the reason it’s a string is to help indicate that nodes such a CTAs/hyperlinks should be done through the action prop?

[question] Is there any reason we wouldn’t want to allow any node in the Toast contents, to support things like lists, etc.?

Image Added

Notes:

• It seems the auto-focus on interactive element does not work when the Toast opens.

  • Focus shouldn’t be put directly on the “Dismiss” if there’s another interactive element (e.g., the optional action).

• It seems the disabling of the auto-dismiss may not work when the dismiss / action has focus (at least on Adam’s machine lol)

Expanded Tokens

Brian Smith

A bit of sync PR review for https://github.com/openedx/paragon/pull/3222