lablup / lablup/backend.ai-webui

BAIText expandable ellipsis: put the Expand/Collapse link inline at the end of the text

Open
#9,194 0 comments 0 reactions 0 assignees View on GitHub
quick-capture
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.