mi6 / mi6/ic-ui-kit

Split bar component

Open
#4,174 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary
Enables users to resize panels, allowing them to allocate more space to important content and tools, ensuring easy access without excessive scrolling.

### 💬 Description
The component is added to the edge of a panel on the page, by clicking on this component and dragging vertically or horizontally, the panel can be resized.

### 💰 User value
This is important as it will enable the users to be in control of how much screen estate is taken up by each panel. The user can resize the panel to display more content and will reduce the need for scrolling and wrapping of content.

### 📚 User Stories
If relevant, describe the high-level functionality as user stories.

*As an* ICDS user:
I need a vertical split bar component, so that I can resize a panel vertically on a page.
I need a horizontal split bar component, so that I can resize a panel horizontally on a page.

### 📝 Acceptance Criteria
The component has the following variants;
- vertical
- horizontal

The component has the following states;
- default
- disabled
- hover
- pressed

The target hit area has a rounded focus.

### ✏ Designs
A [contribution file ](https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FZuOjUQTMelzJ1FMl2py9Rm%2FSplit---Component-Contribution%3Fnode-id%3D10-532%26t%3Dd2tLmaqP3u3rV56z-1&data=05%7C02%7Cneil62744%40gchq.gov.uk%7Cdd9a696d11524b7127ca08de327cc928%7Cfad42abbdfda43f09120b18e6e86169d%7C0%7C0%7C639003708703762910%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=Er3HerpaV3jpamT3g%2BcMN82eNM3%2BPjLz9Hzl719YJbI%3D&reserved=0)has been submitted, with a working prototype.

### 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

### 🚨 Urgency (low, medium or high)
The team submitting the contribution have marked this as a medium priority.

### Additional info
Tell us anything else useful to help us understand your suggestion.

Contributor guide

Open the contributing guide

Research direction

No source file, test, or entry point is named; start by reviewing the repository's existing component patterns alongside the linked Figma contribution file and working prototype. Done means providing vertical and horizontal variants with default, disabled, hover, and pressed states, plus a rounded focus area for the target hit area.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.