Replace @radix-ui/react-tabs with the Tabs component from Headless UI
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 30/100
- Issue type
- Refactor
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start with src/tabs/tabs.tsx at the linked Radix import, then read issue #232 about the React and Headless UI v2 upgrade. Define the component's prop interface independently of the underlying library and migrate Tabs to Headless UI after that upgrade. Done means the extra tabs dependency is no longer needed and the breaking interface change is addressed.
Written by the indexing model from the issue text.
Description
Description
We are using @radix-ui/react-tabs as the base of the Tabs component:
Since we build other components with Headless UI and this library also provides Tabs, I think we should update our Tabs to use Headless UI, too, to remove an extra dependency.
The Tabs component is using radix-ui/react-tabs props interface, so switching to Headless UI and use its props interface would be a breaking change. We might want to take this opportunity to define a prop interface for the component, so that the interface doesn't depend on the external library.
[!NOTE]
This change should be made after we have upgraded Headless UI to v2, which requires a React upgrade (#232).
- Dominant language
- TypeScript
- Stars
- 77
- Forks
- 38
- Avg merge
- 5h 51m
- Merged PRs (30d)
- 42
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from freeCodeCamp/ui
-
Need a light theme equivalent of `yellow40`Possibly taken @Pratikkuntawar claimed this 9 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
freeCodeCamp/ui#782 · 1 comment ·
Maintainers usually reply within 1 day
-
bug: Dark Mode not implemented correctlyPossibly taken @debabratasaha-dev claimed this 182 days ago. Open
Difficulty 3/5 1-2 days Newbie friendliness 42/100
freeCodeCamp/ui#778 · 4 comments ·
Maintainers usually reply within 1 day
-
Multiple Answer Quiz Question ComponentPossibly taken @Pratikkuntawar claimed this 9 days ago. Open
Difficulty 5/5 Over a week Newbie friendliness 35/100
freeCodeCamp/ui#757 · 1 comment ·
Maintainers usually reply within 1 day
-
release: major status: blocked
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
freeCodeCamp/ui#83 ·
Maintainers usually reply within 1 day
-
Dependency DashboardOpen
Difficulty 5/5 Over a week Newbie friendliness 15/100
freeCodeCamp/ui#42 ·
Maintainers usually reply within 1 day
Similar issues
-
needs investigation
Difficulty 2/5 1-3 hours Newbie friendliness 60/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
area:visualizer tech-debt
Difficulty 2/5 Under an hour Newbie friendliness 66/100
jmbarzee/temporal-architect#292 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
riverqueue/river#1576 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
colbymchenry/codegraph#3228 ·
Maintainers usually reply within 1 day