cloudscape-design / components

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

Feat: support typed select values (Proof of Concept) #2350

Open PieterVanZyl-Dev opened 3 weeks ago

PieterVanZyl-Dev commented 3 weeks ago

Description

Whenever we code select we pass in Enum Strings that match our API 1:1. Since Cloudscape Select Components Option & OptionDefinition has value typed as a string.

We end up needing to type cast the output (when onChange event occurs)

It would be nice if cloudscape components supported a generic that let you scope down further than just string (specifically string enums).

I included an example using the existing tests

export declare const SelectValues: {
  readonly FIRST: '1';
  readonly SECOND: '2';
  readonly THIRD: '3';
  readonly FORTH: 'Option 4, test"2';
};

export type EnumStringType = (typeof SelectValues)[keyof typeof SelectValues];

The way this has been implemented, it defaults to string if you don't pass a type.

Behaviour will be unchanged if you don't pass a type, and if you do pass a type that type still needs to extend a string.

Related links, issue #, if available: n/a

How has this been tested?

Easiest way to test it, is to pull this and play around with it.

I'm making this PR, so I can play around and test this a bit more extensively.

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 3 weeks ago

Codecov Report

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

Project coverage is 95.50%. Comparing base (8343c78) to head (4a08563). Report is 83 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2350 +/- ## ========================================== + Coverage 95.41% 95.50% +0.08% ========================================== Files 696 706 +10 Lines 18667 18876 +209 Branches 6246 6340 +94 ========================================== + Hits 17811 18027 +216 + Misses 803 795 -8 - Partials 53 54 +1 ```

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