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

Social Icons: Manually set Snapchat label color. #51237

Merged

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Jun 5, 2023

Fixes #47392

What?

This PR manually sets the color of the Snapchat icon label when no custom icon color or background color is set.

Why?

Unlike all other icons, the Snapchat icon includes both stroke and color values because the logo is white on a light yellow background, and the icon needs a black border to show up. Unfortunately, when icon labels are enabled, the font color is white since color is set to #ffffff. This makes it impossible to read the Snapchat label.

How?

This PR manually sets the color value of the label to black when no custom icon or background color is selected. This approach ensures backward compatibility with minimal modification to the way the block is built. Ideally, we should not have an icon with two colors, but there is no getting around this for the Snapchat logo. Therefore, this one-off solution seems the best path forward.

Testing Instructions

  1. Add a Social Icons block and add a Snapchat icon
  2. Enable "Show labels"
  3. See that the label is black
  4. Change the icon color and see the label color updates according
  5. Reset the custom icon color
  6. Change the icon background color and see the label color reverts to white

Screenshots or screencast

Before After
imageimage imageimage

@ndiego ndiego added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Block] Social Affects the Social Block - used to display Social Media accounts labels Jun 5, 2023
@ndiego ndiego self-assigned this Jun 5, 2023
@ndiego ndiego marked this pull request as ready for review June 5, 2023 15:36
@ndiego ndiego requested a review from ajitbohra as a code owner June 5, 2023 15:36
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Tested and work as expected.

@cbravobernal cbravobernal merged commit 95336bf into WordPress:trunk Jun 6, 2023
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone Jun 6, 2023
@ndiego
Copy link
Member Author

ndiego commented Jun 6, 2023

Thanks @c4rl0sbr4v0 🙏

@masteradhoc
Copy link
Contributor

Thanks @ndiego - one issue less :)

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs User Documentation Needs new user documentation [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility Issue - Snapchat Social Icon
4 participants