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.

Sign up for GitHub

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

Jump to bottom

Unable to identify tile selection when the background is dark in the Selectable Tile #363

Closed
niralmunjariya opened this issue Oct 13, 2017 · 3 comments
Closed

Unable to identify tile selection when the background is dark in the Selectable Tile #363

niralmunjariya opened this issue Oct 13, 2017 · 3 comments

Comments

@niralmunjariya
Copy link

niralmunjariya commented Oct 13, 2017 •
edited
Loading

Detailed description

In the Selectable Tile component, when the background is not light then it's difficult to identify whether the tile is selected or not.

Is this issue related to a specific component?
Yes, Selectable Tile.

What did you expect to happen? What happened instead? What would you like to see changed?
I think the check sign should be white instead of transparent so that it should be visible regardless of background color.

What browser are you working in?
Google Chrome

What version of the Carbon Design System are you using?
7.22.0

Screenshots

tile-selection2

  • Check sign is visible.

tile-selection1

  • Check sign is invisible.

Thanks in advance.
@bsonefeld
Copy link
Contributor

Hey @niralmunjariya , thanks your question!

You can modify the Selectable Tile _tile.scss file to override the checkmark's existing styles. I would recommend using $inverse-01 against a photo background.

@niralmunjariya
Copy link
Author

niralmunjariya commented Nov 8, 2017 •
edited
Loading

@bsonefeld
I've already tried that but that didn't resolve the issue.
In the checkmark SVG, I have access to change the fill color from the _tile.scss but the inner part is transparent and which is the actual thing that causing the issue.

Let me know if there is any other way to fix this.
Thanks!

@tw15egan tw15egan reopened this Nov 8, 2017
@tw15egan
Copy link
Collaborator

tw15egan commented Nov 8, 2017

This should be fixed on the component side. I'll take a look and update when fixed 😄

@tw15egan tw15egan self-assigned this Nov 8, 2017
@tw15egan tw15egan mentioned this issue Nov 13, 2017
Merged
joshblack pushed a commit to joshblack/carbon that referenced this issue May 2, 2019
@CiaranHannigan @nsand
added ability to provide a preselected option from the dropdown when … (
e8a2d9d 
carbon-design-system#370)

* fixes carbon-design-system#363. added ability to provide a preselected option from the dropdown when selectedText is passed in from props

* added selectedText conditional to value state

* added constructor to dropdown component to check selectedText prop against children values. moved setting state logic inside constructor. added test case to cover passed in  selectedText prop not matching any child value.

* updated storybook. improved logic to check for preselected item.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@niralmunjariya @bsonefeld @tw15egan