[ic-side-navigation] Move ic-badge from icon to right hand side of content

Open Beginner friendly
#3,079 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
63/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by locating the ic-side-navigation and ic-navigation-item implementation and styling, then compare the badge placement with ic-tabs. Done means the ic-badge appears on the right-hand side of the button content in expanded navigation and does not risk overlapping longer labels; no test file is named in the issue.

Written by the indexing model from the issue text.

Description

dx

Summary

Currently the ic-badge on an ic-navigation-item in an expanded ic-side-navigation is anchored to the icon. To bring in line with ic-tabs this should be moved to the right-hand side of the button.

Image

ic-tabs example
Image

This would also avoid future issues where the badge could overflow the button label if there were more content.

Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 2h
Merged PRs (30d)
13

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mi6/ic-ui-kit

All issues in mi6/ic-ui-kit

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.