Improve state surfacing support #25
Conversation
arkadiuszbachorski
force-pushed
the
arek/add-error-state-component
branch
from
65422b9 to
814840d
Compare
There was a problem hiding this comment.
Thanks for all the additions @arkadiuszbachorski, looks great!
Left some smaller comments.
| <div | ||
| className={cn( | ||
| 'flex-center', | ||
| padding && 'py-8', |
There was a problem hiding this comment.
Do we really want to hardcode this to 8?
There was a problem hiding this comment.
Most definitely! StateContainer aims to standarize spacing between elements for any state.
There are two most common way to use it:
- Without
grow- in that scenario, it just relies on thepadding - With
grow- it expands to fulfill the container, but still has thepadding.
If custom padding is necessary, they can provide custom container or remove it with padding={false} prop. There is even already case for that in the design system - FormError component. Nevertheless, by providing defaults we keep it consistent for most usages.
Co-authored-by: Nikolai Madlener <[email protected]>
…into arek/add-error-state-component
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #25 +/- ##
==========================================
- Coverage 81.21% 81.13% -0.08%
==========================================
Files 125 139 +14
Lines 2437 2638 +201
Branches 278 316 +38
==========================================
+ Hits 1979 2140 +161
- Misses 437 477 +40
Partials 21 21
Continue to review full report in Codecov by Sentry.
|
Improve state surfacing support
♻️ Current situation & Problem
Design system needs to establish a consistent and easy way to support operations states: loading, error, empty, success.
⚙️ Release Notes
StanfordBDHG/ENGAGE-HF-Web-Frontend#95 uses all the introduced elements.
📝 Code of Conduct & Contributing Guidelines
By submitting creating this pull request, you agree to follow our Code of Conduct and Contributing Guidelines: