lablup / lablup/backend.ai-webui
BAIText expandable ellipsis: put the Expand/Collapse link inline at the end of the text
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 355
Description
`BAIText` with `ellipsis=` expandable: true `` renders the Expand / Collapse link as a vertically-centred flex sibling of the clamp box (the structure FR-1462 introduced and FR-3726 / PR #9177 restored). antd's native `Typography.Text ellipsis=` expandable `` — what BAIText used before FR-1462 — placed the link **inline at the end of the text**: right after the `…` on the last clamped line, and after the last word once expanded.
Follow-up: move the link to the antd-native placement.
- Single-line clamp: straightforward (inline after the clipped box).
- Multi-line clamp (`rows > 1`): the cut point has to be measured so the link fits on the last visible line (antd did this in JS); `-webkit-line-clamp` alone cannot reserve room for it.
Reference: `packages/backend.ai-ui/src/components/BAIText.tsx`, Storybook `Text/BAIText → ExpandableEllipsis`.
—
Captured while working on branch: FR-3726
JIRA Issue: FR-3733
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with packages/backend.ai-ui/src/components/BAIText.tsx and the Storybook Text/BAIText → ExpandableEllipsis story, comparing the current expandable structure with antd's native placement. Implement inline Expand/Collapse placement for both single-line and multi-line clamping, with the link fitting after the ellipsis or final word; verify both states in Storybook.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100