cloudscape-design / components

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

feat: Inline labels for select filters #2355

Open jorycunningham opened 3 weeks ago

jorycunningham commented 3 weeks ago

Description

Filters for tables need persistent visible labels for accessibility. In order to save space in the table header versus the standard label treatment we are creating a new visual treatment that will place the labels inline with the top border of the input.

This PR will add an inlineLabelText string prop to the Select component. Passing in a label as a string will generate the inline label variant where the label is inline with the top border of the select's trigger button.

The PR also updates the app-layout/with-table-collection-select-filter demo page to use this new feature.

How has this been tested?

Tested manually and with automated testing. Reviewed for accessibility.

Visit the app-layout/with-table-collection-select-filter demo page to verify the change

Review checklist _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - X Changes include appropriate documentation updates._ - X Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - X Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - X 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 - X 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 3 weeks ago

Codecov Report

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

Project coverage is 95.62%. Comparing base (7df9e59) to head (855d161). Report is 15 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2355 +/- ## ========================================== + Coverage 95.50% 95.62% +0.12% ========================================== Files 708 722 +14 Lines 18887 19243 +356 Branches 6287 6459 +172 ========================================== + Hits 18038 18402 +364 - Misses 795 833 +38 + Partials 54 8 -46 ```

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