[terra-flowsheet-data-grid] Allow flowsheet sections to have sticky title #2043
Conversation
There was a problem hiding this comment.
@sugan2416 I didn't see an example or test example that demonstrated the behavior this is supposed to fix, but I was able to recreate it by manually changing styles on the existing examples. That means extra steps for each reviewer, and most UX reviewers aren't going to poke around in code. To make reviewing easier in the future, could you be sure a test example demonstrating the fix is included. Instructions in the PR on how to navigate to and recreate the conditions would be great too.
If something was available and I just missed it, please disregard most of the above.
Anyway, it looks good from a UX perspective!
sugan2416
added
⭐ UX Reviewed
|
@sugan2416 can we add/update an example for this change ? |
|
added do not merge label as the section header changes has to be released and consumed here |
sugan2416
force-pushed
the
flowsheet-defect
branch
from
8c40b05 to
ef012d1
Compare
| @@ -136,6 +141,8 @@ function Section(props) { | |||
| const isGridContext = gridContext.role === GridConstants.GRID; | |||
|
|
|||
| const hasSectionButton = isCollapsible && onSectionSelect; | |||
| const boundedWidth = isCollapsible && boundingRef && boundingRef.current ? boundingRef.current.clientWidth - 50 : null; | |||
There was a problem hiding this comment.
The 50px offset used here is to reduce button width (under header) further from the bounding width to maintain sticky header. It fails to stick when its exactly set to container width.
sugan2416
force-pushed
the
flowsheet-defect
branch
from
b2072cd to
b20a780
Compare
Summary
What was changed:
Changed flowsheet sections to have sticky titles.
Why it was changed:
When flowsheet with sections are height restricted and have more cells in row, the section header is still absolute in its position. Due to this title of
terra-section-headeris made sticky during horizontal scroll.cerner/terra-core#4037
cerner/terra-core#4043
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-10215
Thank you for contributing to Terra.
@cerner/terra