yaooqinn opened a new pull request, #54621:
URL: https://github.com/apache/spark/pull/54621
### What changes were proposed in this pull request?
Replaces ~20 lines of fragile border-based triangle CSS (`.arrow-open`,
`.arrow-closed`) with a CSS transform chevron approach.
**Before (border triangles):**
```css
.arrow-open {
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #08c;
...
}
```
**After (CSS transform chevron):**
```css
.arrow-open, .arrow-closed {
width: 0.5em; height: 0.5em;
border-right: 2px solid #08c;
border-bottom: 2px solid #08c;
transition: transform 0.2s ease;
}
.arrow-open { transform: rotate(45deg); } /* ▼ down */
.arrow-closed { transform: rotate(-45deg); } /* ▶ right */
```
**Benefits:**
- Shared base styles reduce duplication
- Smooth 0.2s rotation animation between states
- Scalable with `em` units (adapts to font size)
- Same class names preserved — **no JS or Scala changes needed**
### Why are the changes needed?
Border-based CSS triangles are a legacy pattern. CSS transform chevrons are
cleaner, animatable, and more maintainable. Part of SPARK-55760 (Spark Web UI
Modernization).
### Does this PR introduce _any_ user-facing change?
Yes — collapse indicators are now chevrons (▶/▼) instead of filled
triangles, with smooth rotation animation. Functionally identical.
### How was this patch tested?
- `lint-js` passes
- Core module builds successfully
- All 21 Scala files and 10 JS files use the same
`arrow-open`/`arrow-closed` class names — no code changes needed
### Was this patch authored or co-authored using generative AI tooling?
Yes, co-authored with GitHub Copilot.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
