cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.3k stars 140 forks source link

fix: Add bottom margin to side split panel #2286

Closed jperals closed 1 month ago

jperals commented 1 month ago

Description

Adds a bottom margin to the split panel when it is positioned on the side. This will allow customers to build features like item palettes without having to manually add spacings.

The added margin is equal to the one added at the top of the content in Visual Refresh —20px in comfortable mode, 16px in compact mode. The reporting team (see ticket below) also suggested to use 20px of margin.

In the cases that the split panel internal content ends with a margin, both margins will collapse so the change is minimal. E.g, if the content ends with a paragraph, the effective bottom margin will grow only from 14px to 20px.

Ticket: AWSUI-43840

How has this been tested?

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`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### 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[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.44%. Comparing base (f881e35) to head (2b48a08). Report is 2 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2286 +/- ## ======================================== Coverage 95.43% 95.44% ======================================== Files 707 707 Lines 18802 18802 Branches 5986 6307 +321 ======================================== + Hits 17944 17945 +1 + Misses 850 803 -47 - Partials 8 54 +46 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.