Repository: marigold-ui/marigold
Pull request #1935 (2022-03-31 12:34:41)

feat(comp): improve SVG to handle width and height prop

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 92c683bbd97fd7d68215700d16e35d1eb6960874

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/fix-svg?filename=.changeset/cyan-buttons-rush.md&value=---%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Afeat(comp)%3A%20improve%20SVG%20to%20handle%20width%20and%20height%20prop%0A)



Patch:
diff --git a/.changeset/dirty-comics-swim.md b/.changeset/dirty-comics-swim.md
new file mode 100644
index 000000000..ed50f2877
--- /dev/null
+++ b/.changeset/dirty-comics-swim.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": minor
+---
+
+feat(comp): improve SVG to handle width and height prop
diff --git a/packages/system/src/SVG.tsx b/packages/system/src/SVG.tsx
index e5b90c375..75fe9e435 100644
--- a/packages/system/src/SVG.tsx
+++ b/packages/system/src/SVG.tsx
@@ -25,7 +25,6 @@ export const SVG = ({
   ...props
 }: SVGProps) => {
   const { css } = useTheme();
-  const dimension = toDimension(size);
 
   return jsx(
     'svg',
@@ -34,8 +33,8 @@ export const SVG = ({
       css: css({
         ...normalizedStyles,
         fill,
-        width: dimension,
-        height: dimension,
+        width: toDimension(props.width || size),
+        height: toDimension(props.height || size),
       }),
       ...props,
     },


Test patch:
diff --git a/packages/system/src/SVG.test.tsx b/packages/system/src/SVG.test.tsx
index 48598a2a3..a0a1376bf 100644
--- a/packages/system/src/SVG.test.tsx
+++ b/packages/system/src/SVG.test.tsx
@@ -99,6 +99,48 @@ test('supports size from theme', () => {
   expect(svg).toHaveStyle('height: 16px');
 });
 
+test('supports custom width instead of default size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" width={16}>
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 16px');
+  expect(svg).toHaveStyle('height: 24px');
+});
+
+test('supports custom height instead of default size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" height={16}>
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 24px');
+  expect(svg).toHaveStyle('height: 16px');
+});
+
+test('supports width and height from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" width="small" height="small">
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 16px');
+  expect(svg).toHaveStyle('height: 16px');
+});
+
 test('supports fill prop', () => {
   render(
     <SVG data-testid="svg" fill="#fafafa">