Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Notification component needs updates to match design #124

Closed
Kwadwo-Asamoah mannequin opened this issue May 17, 2023 · 3 comments · Fixed by #169
Closed

Notification component needs updates to match design #124

Kwadwo-Asamoah mannequin opened this issue May 17, 2023 · 3 comments · Fixed by #169
Assignees
Labels
Bug Review Pending code review before closing.

Comments

@Kwadwo-Asamoah
Copy link
Mannequin

Kwadwo-Asamoah mannequin commented May 17, 2023

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.

f2726a18-c0a8-44d3-9422-cd5630e55cb9

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

0aec26a6-7a7f-4c48-8bf3-36ea584418e4

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

3ee3071c-4c81-4c1f-8e27-3b797122d22f

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

@Kwadwo-Asamoah Kwadwo-Asamoah mannequin changed the title Notification component need updates to match design Notification component needs updates to match design May 23, 2023
@dabrad26 dabrad26 added the Bug label Sep 19, 2023
@dabrad26
Copy link
Member

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
Copy link
Member

Example:

Untitled5

@dabrad26 dabrad26 self-assigned this Nov 29, 2023
@dabrad26 dabrad26 added the Review Pending code review before closing. label Nov 29, 2023
@dabrad26
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Review Pending code review before closing.
Projects
1 participant