Notification component needs updates to match design

[YtgmHAdHsvxfjyRYW53Y9kA9JHUKpEaKjkHs8Oy]

In the Gray 10 Theme Mobile-Carbon Design System figma file there is a component called Notification. Design here: https://www.figma.com/file/O3KSDu2TWpMaazGkgsKqLA/(Beta)-Gray-10-Theme-Mobile---Carbon-Design-System?type=design&node-id=1880-5505&t=8njoXVhePM30Alif-4

• The Notification action buttons are missing high contrast variations (Which are to be used with the high contrast Notification component) The Button component allows for color overrides but these overrides do not reflect the active state when the button is pressed down. Perhaps the High Contrast variation of the tertiary and ghost buttons could be added to the Button component or perhaps they could be used as built in default action items within the Notification component.

• The notification title and text should not have right margin in order to match with the figma spec

• The notification component would need a drop shadow to match the figma spec

If there is another way to render these items that we are not aware of please let us know. Thank you

[dabrad26]

Button now supports high-contrast and high-contrast-inverse. These can be used with some extra work

<Button forceTheme={lowContrast ? 'light' : undefined} kind={lowContrast ? 'high-contrast' : 'high-contrast-inverse'} style={this.styles.button} onPress={this.actionCallback} text="Action" />

This has been added to the documentation for the Notification component. This is needed since Theme manager doesn't handle layers like Notification rendering in light mode in Dark theme with its custom colors.

[dabrad26]

Example:

[dabrad26]

Drop shadow can be turned on via new prop dropShadow (Boolean). This is off by default.