[Flex] Add inline-flex support and use CSS Modules
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Flex is a custom layout primitive component. Minor improvements for developer experience and flexibility.
Improvements
2. Add inline prop for inline-flex
No way to use display: inline-flex. Add an inline boolean prop.
3. Use CSS Modules instead of inline styles
Currently uses inline styles for flex properties. Consider CSS Modules with CSS custom properties for consistency with the rest of the library.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Add displayName (#676)
Files
packages/raystack/raystack/components/flex/
Contributor 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.
Research direction
Start by inspecting the files in packages/raystack/raystack/components/flex/ to understand the existing Flex component and its inline styles. Add the inline boolean prop for inline-flex and migrate the flex styling to CSS Modules with custom properties; the work is done when both improvements are supported consistently by the component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100