Derive line-style icons and edge-detail line from CSS border style
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Task
Line styles (`solid`/`dashed`/`dotted`) are currently represented three different ways:
1. Hand-drawn `LineSolid`/`LineDashed`/`LineDotted` SVG icons in the style-dialog dropdowns.
2. A `styleForLineStyle()` helper in `EdgeDetail.tsx` that hand-writes gradient CSS for the vertical connector line between the arrows.
3. `EdgePreview.tsx`, which already renders the real line via `borderTopStyle: edgeStyle.lineStyle`.
The `LineStyle` values are valid CSS `border-style` keywords, so #1 and #2 are hand-rolled duplicates of what CSS gives for free (as demonstrated by #3). Additionally, `LINE_STYLE_OPTIONS` is defined twice (`EdgesStyling/lineStyling.tsx` and `NodesStyling/lineStyling.tsx`), and the NodesStyling copy carries unused `render` wrappers.
### Scope
- Add a `LineStyleIcon` drawn with `borderTopStyle: lineStyle` + `currentColor` (same native mechanism as the edge preview); replace the 3 SVG icons.
- Replace `EdgeDetail`'s `styleForLineStyle()` gradients with a `border`-based vertical line; delete the helper.
- Consolidate the two `LINE_STYLE_OPTIONS` into one `{ label, value }[]` (mirroring `ARROW_STYLE_OPTIONS`); delete both `lineStyling.tsx` files.
- Move the icon before the label in the Line Style and Border Style dropdowns (both dialogs), matching the arrow-style dropdowns.
- Delete `LineSolid`/`LineDashed`/`LineDotted` icon files and their barrel exports.
### Notes
Follow-up to the arrow-icon dedup (#1985); same single-source-of-truth pattern.
> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.
Contributor guide
Research direction
Start with EdgePreview.tsx to mirror its CSS border rendering, then inspect EdgeDetail.tsx and the Line Style and Border Style dropdowns. Trace LINE_STYLE_OPTIONS in EdgesStyling/lineStyling.tsx and NodesStyling/lineStyling.tsx, plus the LineSolid/LineDashed/LineDotted files and barrel exports. Done means one shared options list, native border-based icons and connector styling, and icons preceding labels in both dialogs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100