Enhance component API with responsive props, color propagation, and typography utilities
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Enhance Apsara's component-level APIs to improve developer experience, reduce boilerplate, and provide consistent patterns across the library.
1. Responsive Props on Layout Components
Add responsive object syntax to all layout prop values (gap, direction, padding, etc.):
<Flex gap={{ initial: "3", md: "5" }} direction={{ initial: "column", sm: "row" }}>
Support breakpoints: initial, sm, md, lg, xl.
2. Inline Spacing Props
Add shorthand padding/margin props (p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml) to layout components that map to the space scale:
<Box p="4" mx="auto" mt="6">
3. Systematic color Prop
Extend the color prop to all visual components (Badge, Callout, Text, Avatar, Chip, etc.), not just Button. Color should propagate to children through nesting, automatically adjusting internal tokens.
4. highContrast Prop
Add a highContrast boolean to all components that accept a color prop. This shifts colors to steps 9–12 of the scale for better contrast against the page background.
5. Typography Utility Props
Add the following props to Text and Headline:
trim— remove leading/trailing whitespace for precise vertical alignmenttruncate— single-line ellipsis truncationwrap— control text wrapping (wrap,nowrap,balance,pretty)align— text alignment (left,center,right)- Expand font weight options to 4 levels: light (300), regular (400), medium (500), bold (700)
6. Section Layout Component
Add a Section component for consistent vertical spacing between major page sections, with predefined size variants (small, medium, large).
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 reading the existing layout, visual component, Text, Headline, and Button APIs to identify current prop and color patterns. Inventory the affected components and define completion against the requested responsive props, spacing shorthands, color propagation, contrast behavior, typography utilities, and Section size variants; the issue names no specific files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100