mi6 / mi6/ic-ui-kit

Update design for non-expandable navigation groups in a collapsed side nav

Open
#3,389 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

navigation-group component side-navigation component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

Summary

Update the Figma designs for when a navigation group is non-expandable within a collapsed side navigation component.

💬 Description

While working on #3259 (PR #3378), I noticed that, in both Storybook and Figma, if I make a navigation group within a collapsed side nav non-expandable, it just shows an empty space / gap (where the navigation group title was when expanded) (i.e. like the expandable version, but just without a chevron icon).

I feel as though this behaviour has been overlooked as it looks a bit unusual in my opinion:

Also, the fact that there is no example shown in the actual Figma file ("ICDS V3.0 Pre-release") also makes me think it maybe hasn't been considered; I had to import a side nav into a new Figma file and edit it to see what it would look like in this situation.


The solution I went with in #3259 was to completely hide this space when the side nav is collapsed (e.g. see the "Default" story once that ticket has been merged).

Therefore, the work required for this ticket is for a designer to:

  1. Decide whether hiding the space / gap when the side nav is collapsed is the best solution.
  2. Update the side nav component on Figma to have this new behaviour.
  3. If hiding the space does not appear to be the best solution from a design perspective, create a ticket for a developer to update the behaviour in the developed component.

💰 Use value

To ensure that the side nav designs match the developed version, and also to ensure that this behaviour with navigation groups is correct from a design perspective; so that there is no confusion for ICDS customers, and to ensure the behaviour looks clean / correct to end-users.

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.

Research direction

Review the collapsed side nav component in the “ICDS V3.0 Pre-release” Figma file and compare it with the behavior described from #3259 and PR #3378. Decide whether hiding the empty gap is the preferred design, update the Figma component if so, or record a developer ticket if not; done means the non-expandable collapsed state is explicitly represented.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma
Domain
design
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.