mi6 / mi6/ic-ui-kit

Incorrect font weight on ic-link when using react-router-dom NavLink

Open
#1,656 0 comments 0 reactions 0 assignees View on GitHub
good first issue
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
![image](https://github.com/mi6/ic-ui-kit/assets/116102637/966e85b3-1cde-4fd4-949f-d008c6a8ad04)

## 🧐 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.