Incorrect font weight on ic-link when using react-router-dom NavLink
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary of the bug
When slotting a react-router-dom NavLink inside an IcLink, the incorrect font weight is applied
## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. using the react storybook "With React Router" story
2. add the following css into the react > .storybook > storybook.css file:
```
body, a, p {
font: var(--ic-font-body)
}
```
3. View the story
see the font weight is too light:
## 📸 Screenshots or code

## 🧐 Expected behaviour
The link should use the font-weight of 700 as per non slotted links
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given* a react-router-dom NavLink is slotted inside an ic-link
*When* custom font styling is applied to the body or a or p tags
*Then* the ic-link should still use the font weight of 700
## Additional info
A fix for this may be to set the following in helpers.css file:
```
ic-link a p {
font-weight: var(--ic-font-weight-bold);
}
```
However, as there is little css in this file, it would be good to come up with an alternative solution and only use this as a last resort.
Contributor guide
Research direction
Start with the React Storybook “With React Router” story and reproduce the issue using the CSS in .storybook/storybook.css. Inspect the ic-link styles and helpers.css, then verify that a slotted react-router-dom NavLink keeps font-weight 700 under the custom body, a, and p styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100