Add Link element #130
Add Link element #130
Conversation
|
Deploy preview for artsy-palette ready! Built with commit 656ea68 |
src/elements/Link/Link.tsx
Outdated
| text-decoration: ${props => (props.color ? "none" : "underline")}; | ||
| color: ${color("black100")}; | ||
| } | ||
| :focus { |
There was a problem hiding this comment.
Not sure how to actually see this focus state in the browser.
src/elements/Link/Link.tsx
Outdated
| :focus { | ||
| border: 1px solid ${color("purple100")}; | ||
| color: ${props => | ||
| props.color ? color(props.color as any) : color("black100")}; |
There was a problem hiding this comment.
Had to cast props.color to any color(props.color as any) because color expects string and we get "black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "purple100" | "purple30" | "purple5" | "green100" | "red100" | "yellow100" | "yellow30" | "yellow10" | "white100" as props.color.... Not sure what was the proper way here
|
Also added an issue for that: #129 Not sure what was supposed to be kept there. In checklist it should probably just be a checklist only for an Element, since this Link is an Element. Right? |
|
If it helps at all note that the base implementation for this is located in our GlobalStyles in Reaction: https://github.com/artsy/reaction/blob/master/src/Styleguide/Elements/GlobalStyles.tsx (This eventually needs to move over to palette.) |
|
@damassi - Thanks for the link! I basically added very similar definitions here. Not sure if/when we could remove the other one, because I'm pretty sure we use @zephraph - Added a placeholder for ios implementation. Seems like in all the other cases it's just left blank for now. Doing that here as well. I think I'm ready to test it in Reaction in my super bare implementation and we can definitely iterate here going forward. |
|
Going to merge this since i'll be using it in a sec! |
|
🎉 This PR is included in version 2.22.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This is an attempt to follow definitions from here: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5afc758c09a18d3d0f176edd
The code here is just making Link a
styled.athat can potentially take noUnderline property or color property. The options generated are here: