Fix: pass sx prop to Box and Typography #4654
Conversation
Branch preview✅ Deploy successful! Website: |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| const box = getByTestId('box') | ||
| expect(box).toHaveStyle('padding: 24px') | ||
| expect(box).toHaveStyle('font-size: 14px') | ||
| }) | ||
| }) |
There was a problem hiding this comment.
Consider whether testing specific inline styles is necessary, as changes in the component might break these tests unintentionally. Instead, assert the presence of the sx prop and its key properties. This could simplify maintainability and test resilience over time.
| @@ -175,6 +176,7 @@ export const Typography = ({ | |||
| letterSpacing, | |||
| whiteSpace, | |||
| width, | |||
| ...props.sx, | |||
| }} | |||
| {...props} | |||
| /> | |||
There was a problem hiding this comment.
Ensure the spread operator for props.sx does not overwrite other style props unintentionally. Consider merging sx with existing styles explicitly to prevent unintended style clashes.
| color={color} | ||
| sx={{ color: ({ palette }) => (isLoading ? palette.border.main : palette.text.primary) }} | ||
| > | ||
| <Box display="flex" alignItems="center" gap={2} color={color}> | ||
| <Box flexShrink={0}> | ||
| {safeAddress && !isLoading ? ( | ||
| <Identicon address={safeAddress} size={32} /> |
There was a problem hiding this comment.
The code change removed the sx prop for dynamic color styling based on isLoading. Consider re-implementing this logic within a separate style function or component to maintain the original dynamic behavior if it's necessary for the component's functionality.
📦 Next.js Bundle Analysis for safe-wallet-webThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1020.68 KB (🟡 +2 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Coverage report
Show files with reduced coverage 🔻
Test suite run success1676 tests passing in 228 suites. Report generated by 🧪jest coverage report action from aaa61b2 |
What it solves
The
sxprop wasn't passed down to MUI Box and Typography because it was overwritten by individual props.