feat: Make split panel visible when collapsed at the bottom in new toolbar layout

[jperals]

Description

Issue: AWSUI-60031

Now the split panel in the new toolbar layout behaves the same as in the old layout when it is displayed at the bottom:

• When collapsed:
  • it does not completely disappear but instead the header and the open button keep being visible overlaying the bottom part of the content
  • the focus moves to the split panel's own open button instead of the toolbar's split panel trigger
• The findSplitPanelOpenButton test util will return the open button in the split panel and not the toolbar split panel trigger

How has this been tested?

• Manually on dev pages
• Adapted existing tests
• Ran through my pipeline, got an expected diff
• Dry run (7138307483)

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.34%. Comparing base (c04ca9c) to head (9e83dd3).
Report is 10 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3086   +/-   ##
=======================================
  Coverage   96.34%   96.34%           
=======================================
  Files         779      778    -1     
  Lines       21913    21910    -3     
  Branches     7443     7453   +10     
=======================================
- Hits        21112    21110    -2     
+ Misses        749      748    -1     
  Partials       52       52           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jperals]

The path taken by these tests to focus the split panel trigger in the toolbar was not working anymore because it was assuming that the focus stays on the trigger after clicking it, but now it moves to the split panel.

[just-boris]

This change broke split panel slide in animation.

It works fine in the mainline and does not on your PR preview build: https://d21d5uik3ws71m.cloudfront.net/components/783ac3514ee5eb19adb067e5c023a114f456691e/dev-pages/index.html#/light/app-layout/with-split-panel?appLayoutToolbar=true

[jperals]

This change broke split panel slide in animation.

Thanks for noticing! This was addressed in the latest commit (c074481).

[just-boris]

Do we need to do this back-and-forward focus in every test? Is it really worth reusing this code? For example, you could only reuse the assertion part.

[just-boris]

Let's keep this test util class assigned in both cases.

The collapsed split panel will not use this class. All customers' tests will open split panel using this button in every position

[just-boris]

This line does not look like idiomatic React code. What is happening here?

[jperals]

I am using closedPanelBlockSize.current as blockSize in line 86 in order to keep the animated transition. This gives the element the same height that it would already have without applying any value, but a value needs to be explicitly set because you cannot transition from or to undefined; a value has to be defined for the transitioned property in both states.

What do you find most non-idiomatic here? Do you have any suggestion? Or does it look better knowing this information?

[just-boris]

For idiomatic code, it should be a state, not ref. Also, can we reuse reportHeaderHeight somehow which already sets the state?

[jperals]

We can pass down reportHeaderHeight from the app layout, although it is only needed for the toolbar layout, so either we have to make it optional in the split panel context, or we pass it anyway in the three app layouts, whether it is actually used in the split panel or not.

[just-boris]

Okay, let's introduce our own local state then.

Also see cloudscape-design/component-toolkit#107, I added optimization for multiple state changes in this case