Split bar component
- 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
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