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

Locale modal list view has incorrect color/tokens #3445

Closed
larahanlon2 opened this issue Aug 5, 2020 · 2 comments
Closed

Locale modal list view has incorrect color/tokens #3445

larahanlon2 opened this issue Aug 5, 2020 · 2 comments
Assignees
Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 2 Affects major functionality, has a workaround
Milestone

Comments

@larahanlon2
Copy link

larahanlon2 commented Aug 5, 2020

Detailed description

Describe in detail the issue you're having.
During QA call, it was noticed that the search input and the language labels have incorrect color values.

Is this a feature request (new component, new icon), a bug, or a general issue?
Design defect

Is this issue related to a specific component?
Locale modal

What did you expect to happen? What happened instead? What would you like to see changed?

1. As per design specs, search input should have a gray background. See below

Storybook currently has a white input field with a bottom gray rule.
Screen Shot 2020-08-05 at 11 05 52 AM

Actual design specs:
Screen Shot 2020-08-05 at 11 05 44 AM

2. The language label should use the type token body-short-02, text-05 (16px, gray 60)

Storybook currently shows a very faint gray color impacting accessibility:
Screen Shot 2020-08-05 at 11 07 42 AM

What browser are you working in?
All

Steps to reproduce the issue

Open locale modal and click a geographic region card

@larahanlon2 larahanlon2 added bug Something isn't working dev Needs some dev work labels Aug 5, 2020
@oliviaflory
Copy link
Contributor

Hey @larahanlon2, was checking out the type token colors and I think Carbon updated text-03 since we speced locale selector

$text-03 is "placeholder text" and is now gray 40 #A8A8A8 (Note: in the past we've heard that placeholder text is not held to the same standards for accessible contrast as regular content)

So I was thinking text-05 might work better considering the original intent?
$text-05 is "tertiary text" and gray 60 #6F6F6F

@larahanlon2
Copy link
Author

larahanlon2 commented Aug 5, 2020

Thanks so much @oliviaflory for confirming this! I agree with your suggestion, $text-05 should work just fine.

I updated the issue above.

@RobertaJHahn RobertaJHahn added the severity 4 Affects minor functionality, no workaround needed label Aug 26, 2020
@RobertaJHahn RobertaJHahn added the package: react Work necessary for the Carbon for IBM.com react components package label Aug 26, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-19 milestone Aug 26, 2020
@kennylam kennylam self-assigned this Sep 23, 2020
@kennylam kennylam added severity 2 Affects major functionality, has a workaround and removed severity 4 Affects minor functionality, no workaround needed labels Sep 23, 2020
kodiakhq bot pushed a commit that referenced this issue Sep 25, 2020
### Related Ticket(s)

#3445, #3817, #3819 

### Description

Various accessibility and visual spec fixes to `LocaleModal` (React and web component)

### Changelog

**Changed**

- accessibility and visual spec fixes to `LocaleModal` for both React and web component variations


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
ariellalgilmore pushed a commit to ariellalgilmore/carbon-for-ibm-dotcom that referenced this issue Oct 2, 2020
…4035)

### Related Ticket(s)

carbon-design-system#3445, carbon-design-system#3817, carbon-design-system#3819 

### Description

Various accessibility and visual spec fixes to `LocaleModal` (React and web component)

### Changelog

**Changed**

- accessibility and visual spec fixes to `LocaleModal` for both React and web component variations


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 2 Affects major functionality, has a workaround
Projects
None yet
Development

No branches or pull requests

7 participants