question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ClickableTile]: All text looks like link if a real href is used.

See original GitHub issue

What 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

  1. Go to https://carbon-components-react.netlify.app/?path=/story/components-tile--clickable
  2. Change the href to a real link, say https://www.google.com/
  3. 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:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
tw15egancommented, Mar 22, 2021
Screen Shot 2021-03-22 at 1 03 28 PM

I see the same, Chrome isn’t computing the styles properly:

Screen Shot 2021-03-22 at 1 03 47 PM

Since this doesn’t need anything from the Link component, I think we just need to render an a instead of Link since we override all the styles anyways

0reactions
emyarodcommented, Mar 22, 2021

this 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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found