[ClickableTile]: All text looks like link if a real href is used.
See original GitHub issueWhat package(s) are you using?
-
carbon-components
-
carbon-components-react
Detailed description
Describe in detail the issue you’re having.
In ClickableTile
if a real href is specified, then all of the text becomes blue and looks like a link. This might be intended but isn’t by default what shows up with the empty href in the storybook so I wanted to clarify.
This doesn’t look so bad in the storybook because it’s just two words but real use cases have more content in the tiles and it looks a bit odd if it all looks like a link.
Steps to reproduce the issue
- Go to https://carbon-components-react.netlify.app/?path=/story/components-tile--clickable
- Change the
href
to a real link, say https://www.google.com/ - See that
Clickable Tile
looks like a link
Also can see this in the sandbox below.
Please create a reduced test case in CodeSandbox https://codesandbox.io/s/intelligent-platform-ji1xi?file=/src/index.js
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
How do I style a span to look like a link without using javascript?
As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to...
Read more >Styling links - Learn web development | MDN
Objective: To learn how to style link states, and how to use links effectively in common UI features like navigation menus. Let's look...
Read more >Links in HTML documents - W3C
This attribute is used to describe a reverse link from the anchor specified by the href attribute to the current document. The value...
Read more >Nested Links - CSS-Tricks
Here's what happens with that HTML, by the way: The nested link gets kicked out. My first inclination would be to simply not...
Read more >HTML Links Hyperlinks - W3Schools
Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I see the same, Chrome isn’t computing the styles properly:
Since this doesn’t need anything from the
Link
component, I think we just need to render ana
instead ofLink
since we override all the styles anywaysthis is likely due to your browser’s history settings so the visited links are appearing blue. in @tw15egan’s screenshot of the dev tools you can see that the #161616 color is correctly being applied to the element