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

fix(triangle): Triangles can inherit their color #435

Closed

Conversation

sgenoud
Copy link

@sgenoud sgenoud commented May 8, 2019

fix #430

@sgenoud sgenoud requested a review from bhough as a code owner May 8, 2019 06:22
@@ -83,7 +91,8 @@ Object {

exports[`triangle should properly render bottomRight pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
Object {
"borderColor": "transparent transparent blue transparent",
"borderBottomColor": "blue",
"borderColor": "transparent",
Copy link
Contributor

Choose a reason for hiding this comment

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

Unfortunately, key order matters a lot for this particular use case. borderColor will override borderBottomColor and make the element transparent. We had to do some magic in the original implementation to account for this: https://github.com/styled-components/polished/blob/8607d641e27d945612e81a3078b1674200d6286e/src/mixins/triangle.js

Copy link
Author

Choose a reason for hiding this comment

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

Is the object always sorted by key or is it just an artifact of the testing framework?

Did you mean using the border color helper or adding !important to borderBottomColor?

@@ -113,7 +124,8 @@ Object {

exports[`triangle should properly render top pointing arrow with green foregroundColor, width of 20px and height 20px 1`] = `
Object {
"borderColor": "transparent transparent green transparent",
"borderBottomColor": "green",
"borderColor": "transparent",
Copy link
Contributor

Choose a reason for hiding this comment

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

Same concern as above here.

@bhough bhough closed this Oct 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Triangle enhancements break inherit as a border color
2 participants