leather-io / mono

Leather monorepo
https://leather.io
MIT License
12 stars 5 forks source link

refactor: convert widget into compound components #630

Closed tigranpetrossian closed 1 week ago

tigranpetrossian commented 1 week ago

Part of LEA-659

Converts the Widget into a Radix-style compound component in preparation for list item animations, but also in an attempt to standardize with other similar components like the Approver

Before

<Widget
  header={
    <WidgetHeader />
  }
>
  ...
</Widget>

After

<Widget>
  <Widget.Header>
    <Widget.Title />
  </Widget.Header>
  <Widget.Body>
    ...
  </Widget.Body>
</Widget>

This significantly reduces the prop drilling and subsequently the need to expose more props, de-couples it from ScrollView, some spacing opinions (padding, gaps, etc.), and replaces the dependency on sheet with a generic action.

codecov[bot] commented 1 week ago

Codecov Report

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

Project coverage is 23.72%. Comparing base (a8c0c84) to head (1de23d3). Report is 1 commits behind head on dev.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## dev #630 +/- ## ======================================= Coverage 23.72% 23.72% ======================================= Files 165 165 Lines 6178 6178 Branches 335 335 ======================================= Hits 1466 1466 Misses 4712 4712 ``` | [Components](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | Coverage Δ | | |---|---|---| | [bitcoin](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | `62.04% <ø> (ø)` | | | [query](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | `12.67% <ø> (ø)` | | | [utils](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | `48.02% <ø> (ø)` | | | [crypto](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | `68.21% <ø> (ø)` | | | [stacks](https://app.codecov.io/gh/leather-io/mono/pull/630/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=leather-io) | `54.71% <ø> (ø)` | |
linear[bot] commented 1 week ago

LEA-659 Define tap/on-press effect for interactive elements

tigranpetrossian commented 1 week ago

This is a good instance of when compound components are great, thanks @tigranpetrossian

I wonder if you'd fancy writing a Coding Convention page on how we should use this pattern (and how we shouldn't).

Definitely! Will get to it during the week.

pete-watters commented 1 week ago

Great work @tigranpetrossian 👏