Convert Card component to Typescript #806
Conversation
... and cleaned up its usage along the way. The CardTitle component is used in either one of two ways: * implicitly, through the Card where it's basically _the_ title and should be displayed as h1 element * explicitly, in which case it was always being rendered as an h2 element So, the default heading level is now 2 for the low-level component, while using it implicitly through Card ensures that it's level 1, matching the current behaviour but cleaning up the code quite a bit. This cleanup removes the need for polymorphic component props to support multiple HTML elements - our codebase does not use anythign other than heading elements at the moment (and those landmarks are important for a11y). Next, the Card component itself. The modifiers list is gone in favour of explicit (boolean) props that set/determine the modifiers under the hood, allowing proper combination and usage tracking while being able to document their behaviour individually. Usages have been updated accordingly, but let's wait for Chromatic to confirm nothing broke. The caption did not appear to be used anywhere as Card prop, so that's been removed.
| const modifiers = []; | ||
| if (expanded) { | ||
| modifiers.push('expanded'); | ||
| } |
There was a problem hiding this comment.
Couldn't find any CSS anymore that still did something with it, I reckon we missed this when we rewrote the progress indicator. I broke it because it has another base class name lol
Bundle ReportChanges will decrease total bundle size by 1.34kB (-0.01%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: @open-formulieren/sdk-OpenForms-umdAssets Changed:
Files in
view changes for bundle: @open-formulieren/sdk-esmAssets Changed:
Files in
Files in
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #806 +/- ##
==========================================
- Coverage 83.52% 83.40% -0.13%
==========================================
Files 233 233
Lines 4632 4627 -5
Branches 1180 1178 -2
==========================================
- Hits 3869 3859 -10
- Misses 733 738 +5
Partials 30 30
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
... and cleaned up its usage along the way.
The CardTitle component is used in either one of two ways:
So, the default heading level is now 2 for the low-level component, while using it implicitly through Card ensures that it's level 1, matching the current behaviour but cleaning up the code quite a bit. This cleanup removes the need for polymorphic component props to support multiple HTML elements - our codebase does not use anythign other than heading elements at the moment (and those landmarks are important for a11y).
Next, the Card component itself. The modifiers list is gone in favour of explicit (boolean) props that set/determine the modifiers under the hood, allowing proper combination and usage tracking while being able to document their behaviour individually. Usages have been updated accordingly, but let's wait for Chromatic to confirm nothing broke.
The caption did not appear to be used anywhere as Card prop, so that's been removed.