Clarity: Inherit color and cursor for Clarity icons

[astorije]

Describe the bug

When using the CdsIcon component of Clarity Core, we noticed cursor and color inheritance always get lost.

Cursor inheritance is always appreciated in interactive contexts. Having a default color is nice for icon consistency across the board, but in the cases of links, for example, it means we need to manually apply --color: var(--cds-token-color-action-600) to the underlying icon, which is something I would expect the icon to take care on its own.

We are switching from Font Awesome to Clarity Icons, and as it was the default behavior of Font Awesome icons, we have to add manual overrides for all icons, and were wondering if it would not be better for Clarity to handle it itself.
If this is not something that needs to be fixed in Clarity Core, do you have any recommendations on how to address this correct?

How to reproduce

The link above was produced with the following code, and standard set up of the Clarity CSS files:

<p cds-text="body">
  <a href="#" cds-text="link">
    This is a link with <CdsIcon shape="map-marker" solid /> an icon
  </a>
</p>

Versions

• "react": "16.14.0",
• "@clr/core": "4.0.7",
• "@clr/react": "4.0.7",

Device:

• Type: MacBook
• OS: Catalina 10.15.7
• Browser: Chrome
• Version 86.0.4240.183

[bbogdanov]

Hi @astorije,

Can you please provide us a stackblitz examples for the cases you shared above?

[astorije]

Hi @bbogdanov!
This is my best attempt, let me know if that helps! https://stackblitz.com/edit/react-ts-nizyzw

[mathisscott]

Hi @astorije
We have a bit of an issue on our end with how the icon was set up to "inherit" the color of its parent. It's a quick fix but, for your use case, here is a workaround for now: https://stackblitz.com/edit/react-ts-kpt22u?file=style.css

[astorije]

That's interesting, thanks for this, @mathisscott! Would it be worth adding this in the Clarity Core CSS file for links?

Also, any idea how to inherit the cursor?

[mathisscott]

You could put cursor: pointer inside that style block if you want

[astorije]

Right, that would address links, but that means we need to manually set it for every icon out there, right? As in there is no way to inherit the cursor of the surrounding block. Is that correct?
You can see that on the second example of https://stackblitz.com/edit/react-ts-nizyzw

[mathisscott]

@astorije
I updated the stackblitz to demo it better. https://stackblitz.com/edit/react-ts-kpt22u?file=index.tsx

You can inherit the cursor of the surrounding block.

[mathisscott]

@Shijir
I'm sending this your way because you're already working on Vol 18 icons. Please take a look at the stackblitz (https://stackblitz.com/edit/react-ts-kpt22u?file=index.tsx). It shows the use case of this issue and dips into the fixes required. You may want to set --color to currentColor instead of hard-coding it like I did though.

CC: @coryrylan

[astorije]

This is really great, thank you so much @mathisscott et al.

I confirm that setting the following in a global CSS stylesheet fixes all our issues, and indeed it would be really great if the base component included this:

cds-icon {
  --color: currentColor;
  cursor: inherit;
}

[astorije]

Actually, I realize that I am using --color: currentColor locally and not fill: currentColor which avoids the need for the !important in the example.

[mathisscott]

@astorije : yep, that's how we'd do it to fix it in the code too. if you're up for another contribution.... 😊

[astorije]

Absolutely! I will open a PR today :)

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.