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

Notice: Update dismiss button to match other Gutenberg UI #16926

Merged
merged 3 commits into from Aug 7, 2019

Conversation

@kjellr
Copy link
Contributor

commented Aug 6, 2019

Currently the dismiss button in the Notice component is a little non-standard:

  • It uses the no dashicon, instead of no-alt (which is used in our modal and sidebar panel close buttons)
  • It is $dark-gray-300 by default (instead of the usual $dark-gray-500), and is red on hover, regardless of the type of notification.

This PR updates those to be more consistent.

Screenshots

Before:

Notice dismiss icon alongside the panel close icon:
gutenberg test_wp-admin_post-new php (2)

Hovers:
close-old

After:

Notice dismiss icon alongside the panel close icon:
gutenberg test_wp-admin_post-new php (1)

Hovers:
close-new

Testing

Pasting this into your console should produce all 4 standard dismissible notices.

wp.data.dispatch('core/notices').createNotice(
	'',
	'Default',
	{
		isDismissible: true,
	}
);
wp.data.dispatch('core/notices').createNotice(
	'warning',
	'Warning',
	{
		isDismissible: true,
	}
);
wp.data.dispatch('core/notices').createNotice(
	'success',
	'Success',
	{
		isDismissible: true,
	}
);
wp.data.dispatch('core/notices').createNotice(
	'error',
	'Error',
	{
		isDismissible: true,
	}
);
kjellr added 3 commits Aug 6, 2019
Update close button color to be darker.
This matches our other close buttons throughout the interface.
@jorgefilipecosta
Copy link
Member

left a comment

LGTM 👍

@karmatosed karmatosed self-requested a review Aug 7, 2019

@karmatosed
Copy link
Member

left a comment

Approving design as this is a great unifying PR. Thanks for catching this.

@karmatosed karmatosed merged commit 612d8bc into master Aug 7, 2019

2 of 39 checks passed

Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
First Time Contributor First Time Contributor
Details
Assign Fixed Issues Assign Fixed Issues
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Milestone It Milestone It
Details
Filter opened Filter opened
Details
Filter opened Filter opened
Details
Travis CI - Pull Request Build Errored
Details

@github-actions github-actions bot added this to the Gutenberg 6.3 milestone Aug 7, 2019

@kjellr kjellr deleted the update/notice-close-button branch Aug 7, 2019

@ellatrix

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

I'm seeing some js unit test error after this. Looks like you forgot to update a snapshot?

@ellatrix

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

Travis CI - Pull Request Build Errored

This PR was merged while there were failing tests. :/

ellatrix added a commit that referenced this pull request Aug 7, 2019
jorgefilipecosta added a commit that referenced this pull request Aug 7, 2019
@jorgefilipecosta

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

Thank you for fixing this problem @ellatrix. During the code review, we had another problem making CI tests fail and I did not notice the snapshot, I'm sorry for the potential troubles caused.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

Thanks for taking care of this Kjell. 🎉

gziolo added a commit that referenced this pull request Aug 29, 2019
Notice: Update dismiss button to match other Gutenberg UI (#16926)
* Update hover/active/focus color to dark gray.

* Update close button color to be darker.

This matches our other close buttons throughout the interface.

* Use no-alt instead of no dashicon.
gziolo added a commit that referenced this pull request Aug 29, 2019
gziolo added a commit that referenced this pull request Aug 29, 2019
Notice: Update dismiss button to match other Gutenberg UI (#16926)
* Update hover/active/focus color to dark gray.

* Update close button color to be darker.

This matches our other close buttons throughout the interface.

* Use no-alt instead of no dashicon.
gziolo added a commit that referenced this pull request Aug 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.