Repository: grommet/grommet (JavaScript)

Issue:
Meter type=circle size=full has svg error
When specifying `type="circle" size="full"` to Meter

### Expected Behavior

Shouldn't produce a browser error in the console

### Actual Behavior

This error is displayed in the chrome javascript  console.

### URL, screen shot, or Codepen exhibiting the issue

![image](https://user-images.githubusercontent.com/12054362/133341339-29fc36df-a2f8-4825-b0dd-8255f34ccf9e.png)


### Steps to Reproduce

```jsx
<Meter
   type="circle"
   background="light-2"
   size="full"
   values={[{ value: 50, color: 'accent-1' }]}
/>
```

This is because Circle.js uses 100% for `viewBoxHeight` and `viewBox` doesn't seem to allow the % spec.
```jsx
let viewBoxHeight;
  if (type === 'semicircle') {
    viewBoxHeight = width / 2;
  } else if (size === 'full') {
    viewBoxHeight = '100%';
  } else viewBoxHeight = width;

  return (
    <StyledMeter
      ref={ref}
      viewBox={`0 0 ${width} ${viewBoxHeight}`}
      width={size === 'full' ? '100%' : width}
      height={viewBoxHeight}
```
### Your Environment

- Grommet version: stable 9/14/2021 (post 2.17.5 but before 2.17.6)
- Browser Name and version: chrome latest
- Operating System and version (desktop or mobile): windows



Discussion:

Patch:
diff --git a/src/js/components/Meter/Circle.js b/src/js/components/Meter/Circle.js
index c1b3580b828..82fb94e0e5a 100644
--- a/src/js/components/Meter/Circle.js
+++ b/src/js/components/Meter/Circle.js
@@ -140,19 +140,14 @@ const Circle = forwardRef((props, ref) => {
     );
   }
 
-  let viewBoxHeight;
-  if (type === 'semicircle') {
-    viewBoxHeight = width / 2;
-  } else if (size === 'full') {
-    viewBoxHeight = '100%';
-  } else viewBoxHeight = width;
+  const viewBoxHeight = type === 'semicircle' ? width / 2 : width;
 
   return (
     <StyledMeter
       ref={ref}
       viewBox={`0 0 ${width} ${viewBoxHeight}`}
       width={size === 'full' ? '100%' : width}
-      height={viewBoxHeight}
+      height={size === 'full' ? '100%' : viewBoxHeight}
       {...rest}
     >
       {track}


Test patch:
diff --git a/src/js/components/Meter/__tests__/Meter-test.js b/src/js/components/Meter/__tests__/Meter-test.js
index ffeca7e3397..35b45f08199 100644
--- a/src/js/components/Meter/__tests__/Meter-test.js
+++ b/src/js/components/Meter/__tests__/Meter-test.js
@@ -81,18 +81,28 @@ describe('Meter', () => {
         <Meter size="large" values={VALUES} />
         <Meter size="xlarge" values={VALUES} />
         <Meter size="24px" values={VALUES} />
+        <Meter size="full" values={VALUES} />
         <Meter type="circle" size="xsmall" values={VALUES} />
         <Meter type="circle" size="small" values={VALUES} />
         <Meter type="circle" size="medium" values={VALUES} />
         <Meter type="circle" size="large" values={VALUES} />
         <Meter type="circle" size="xlarge" values={VALUES} />
         <Meter type="circle" size="55px" values={VALUES} />
+        <Meter type="circle" size="full" values={VALUES} />
         <Meter type="pie" size="xsmall" values={VALUES} />
         <Meter type="pie" size="small" values={VALUES} />
         <Meter type="pie" size="medium" values={VALUES} />
         <Meter type="pie" size="large" values={VALUES} />
         <Meter type="pie" size="xlarge" values={VALUES} />
         <Meter type="pie" size="55px" values={VALUES} />
+        <Meter type="pie" size="full" values={VALUES} />
+        <Meter type="semicircle" size="xsmall" values={VALUES} />
+        <Meter type="semicircle" size="small" values={VALUES} />
+        <Meter type="semicircle" size="medium" values={VALUES} />
+        <Meter type="semicircle" size="large" values={VALUES} />
+        <Meter type="semicircle" size="xlarge" values={VALUES} />
+        <Meter type="semicircle" size="55px" values={VALUES} />
+        <Meter type="semicircle" size="full" values={VALUES} />
       </Grommet>,
     );
 
diff --git a/src/js/components/Meter/__tests__/__snapshots__/Meter-test.js.snap b/src/js/components/Meter/__tests__/__snapshots__/Meter-test.js.snap
index c01f1db863a..fd0d2b281e2 100644
--- a/src/js/components/Meter/__tests__/__snapshots__/Meter-test.js.snap
+++ b/src/js/components/Meter/__tests__/__snapshots__/Meter-test.js.snap
@@ -667,6 +667,29 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
   </svg>
+  <svg
+    class="c1"
+    height="24"
+    preserveAspectRatio="none"
+    viewBox="0 0 288 24"
+    width="100%"
+  >
+    <path
+      d="M 0,12 L 288,12"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 0,12 L 57.6,12"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
   <svg
     class="c1"
     height="96"
@@ -811,6 +834,30 @@ exports[`Meter size 1`] = `
       stroke-width="24"
     />
   </svg>
+  <svg
+    class="c1"
+    height="100%"
+    viewBox="0 0 288 288"
+    width="100%"
+  >
+    <circle
+      cx="144"
+      cy="144"
+      fill="none"
+      r="132"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 269.5394601510 103.2097567425 A 132.0000000000 132.0000000000 0 0 0 144.0000000000 12.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
   <svg
     class="c1"
     height="96"
@@ -955,6 +1002,184 @@ exports[`Meter size 1`] = `
       stroke-width="27.5"
     />
   </svg>
+  <svg
+    class="c1"
+    height="100%"
+    viewBox="0 0 288 288"
+    width="100%"
+  >
+    <circle
+      cx="144"
+      cy="144"
+      fill="none"
+      r="72"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="144"
+    />
+    <path
+      d="M 212.4760691733 121.7507764050 A 72.0000000000 72.0000000000 0 0 0 144.0000000000 72.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="144"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="48"
+    viewBox="0 0 96 48"
+    width="96"
+  >
+    <path
+      d="M 84.0000000000 48.0000000000 A 36.0000000000 36.0000000000 0 0 0 12.0000000000 48.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 18.8753882025 26.8397309175 A 36.0000000000 36.0000000000 0 0 0 12.0000000000 48.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="96"
+    viewBox="0 0 192 96"
+    width="192"
+  >
+    <path
+      d="M 180.0000000000 96.0000000000 A 84.0000000000 84.0000000000 0 0 0 12.0000000000 96.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 28.0425724725 46.6260388074 A 84.0000000000 84.0000000000 0 0 0 12.0000000000 96.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="192"
+    viewBox="0 0 384 192"
+    width="384"
+  >
+    <path
+      d="M 372.0000000000 192.0000000000 A 180.0000000000 180.0000000000 0 0 0 12.0000000000 192.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 46.3769410125 86.1986545874 A 180.0000000000 180.0000000000 0 0 0 12.0000000000 192.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="384"
+    viewBox="0 0 768 384"
+    width="768"
+  >
+    <path
+      d="M 756.0000000000 384.0000000000 A 372.0000000000 372.0000000000 0 0 0 12.0000000000 384.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 83.0456780925 165.3438861472 A 372.0000000000 372.0000000000 0 0 0 12.0000000000 384.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="576"
+    viewBox="0 0 1152 576"
+    width="1152"
+  >
+    <path
+      d="M 1140.0000000000 576.0000000000 A 564.0000000000 564.0000000000 0 0 0 12.0000000000 576.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 119.7144151725 244.4891177070 A 564.0000000000 564.0000000000 0 0 0 12.0000000000 576.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="27.5"
+    viewBox="0 0 55 27.5"
+    width="55"
+  >
+    <path
+      d="M 43.0000000000 27.5000000000 A 15.5000000000 15.5000000000 0 0 0 12.0000000000 27.5000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 14.9602365872 18.3893285895 A 15.5000000000 15.5000000000 0 0 0 12.0000000000 27.5000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
+  <svg
+    class="c1"
+    height="100%"
+    viewBox="0 0 288 144"
+    width="100%"
+  >
+    <path
+      d="M 276.0000000000 144.0000000000 A 132.0000000000 132.0000000000 0 0 0 12.0000000000 144.0000000000"
+      fill="none"
+      stroke="#F2F2F2"
+      stroke-linecap="square"
+      stroke-opacity="0.4"
+      stroke-width="24"
+    />
+    <path
+      d="M 37.2097567425 66.4123466974 A 132.0000000000 132.0000000000 0 0 0 12.0000000000 144.0000000000"
+      fill="none"
+      stroke="#6FFFB0"
+      stroke-linecap="butt"
+      stroke-width="24"
+    />
+  </svg>
 </div>
 `;