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

feat(tags): new light/dark mode colors #1809

Merged
merged 3 commits into from
May 23, 2024
Merged

feat(tags): new light/dark mode colors #1809

merged 3 commits into from
May 23, 2024

Conversation

jzempel
Copy link
Member

@jzempel jzempel commented May 21, 2024

Description

Verified the following in both light and dark modes:

  • <Tag>
  • <Tag hue="grey"> and <Tag hue="neutralHue">
  • <Tag hue="blue"> and <Tag hue="primaryHue">
  • <Tag hue="red"> and <Tag hue="dangerHue">
  • <Tag hue="green"> and <Tag hue="successHue">
  • <Tag hue="yellow"> and <Tag hue="warningHue">
  • <Tag hue="azure">
  • <Tag hue="lemon">
  • <Tag hue="#FD5A1E">

Detail

Note there are two outstanding questions with design:

  • Dark mode color for <Tag hue="grey">
  • Hover (focus?) treatment for the Tag.Close button

Note that when testing with Storybook, a string can be manually entered into the hue color picker – often resulting in an error. Simply click the "Remount component" button in the toolbar once you've entered the correct value.

Checklist

  • 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • 🤘 renders as expected with Bedrock CSS (?bedrock)
  • 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
  • ♿ tested for WCAG 2.1 AA accessibility compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@coveralls
Copy link

coveralls commented May 21, 2024

Coverage Status

coverage: 96.097% (+0.008%) from 96.089%
when pulling 816a8c1 on jzempel/recolor-tags
into 12c7917 on next.

Copy link
Contributor

@ze-flo ze-flo left a comment

Choose a reason for hiding this comment

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

Looks great! 🔥 🚀

@@ -6,8 +6,8 @@
*/

import React from 'react';
import { render, renderRtl } from 'garden-test-utils';
import { PALETTE, getColorV8 } from '@zendeskgarden/react-theming';
import { render, renderDark, renderRtl } from 'garden-test-utils';
Copy link
Contributor

Choose a reason for hiding this comment

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

Thorough testing! 💯

Copy link

@steue steue left a comment

Choose a reason for hiding this comment

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

LGTM! thanks for knocking these out!

@jzempel jzempel merged commit e3f1533 into next May 23, 2024
5 checks passed
@jzempel jzempel deleted the jzempel/recolor-tags branch May 23, 2024 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

5 participants