Repository: grommet/grommet (JavaScript)

Issue:
Custom sizes don't work with Anchor
### Expected Behavior

This should work fine, same as with `Text`:

```
<Anchor size="20px" label="link text" />
```

### Actual Behavior

Throws an error.

### URL, screen shot, or Codepen exhibiting the issue

<img width="1053" alt="Screen Shot 2021-05-01 at 9 52 44 AM" src="https://user-images.githubusercontent.com/1175921/116784587-0c503780-aa63-11eb-9396-aa22c8ecd605.png">
<img width="576" alt="Screen Shot 2021-05-01 at 9 52 53 AM" src="https://user-images.githubusercontent.com/1175921/116784588-0c503780-aa63-11eb-9071-e0cc8ba31e0a.png">

### Your Environment

- Grommet version: 2.16.2
- Browser Name and version: Firefox v88
- Operating System and version (desktop or mobile): MacOS



Discussion:

Patch:
diff --git a/src/js/components/Anchor/StyledAnchor.js b/src/js/components/Anchor/StyledAnchor.js
index 26faadf65ab..7ca0747f567 100644
--- a/src/js/components/Anchor/StyledAnchor.js
+++ b/src/js/components/Anchor/StyledAnchor.js
@@ -14,8 +14,8 @@ const sizeStyle = props => {
     const size = props.size || 'medium';
     const data = props.theme.text[size];
     return css`
-      font-size: ${data.size};
-      line-height: ${data.height};
+      font-size: ${data ? data.size : size};
+      line-height: ${data ? data.height : 'normal'};
     `;
   }
   return css`
diff --git a/src/js/components/Anchor/stories/Size.js b/src/js/components/Anchor/stories/Size.js
index 658693ee687..e57ce4378d5 100644
--- a/src/js/components/Anchor/stories/Size.js
+++ b/src/js/components/Anchor/stories/Size.js
@@ -6,11 +6,13 @@ import { grommet } from 'grommet/themes';
 const SizeAnchor = () => (
   <Grommet theme={grommet}>
     <Box align="center" pad="large">
-      {['xxlarge', 'xlarge', 'large', 'medium', 'small', 'xsmall'].map(size => (
-        <Box key={size} margin="small">
-          <Anchor size={size} label={size} href="#" />
-        </Box>
-      ))}
+      {['xxlarge', 'xlarge', 'large', 'medium', 'small', 'xsmall', '10px'].map(
+        size => (
+          <Box key={size} margin="small">
+            <Anchor size={size} label={size} href="#" />
+          </Box>
+        ),
+      )}
     </Box>
   </Grommet>
 );


Test patch:
diff --git a/src/js/components/Anchor/__tests__/Anchor-test.js b/src/js/components/Anchor/__tests__/Anchor-test.js
index edc678435a6..c78eef445cc 100644
--- a/src/js/components/Anchor/__tests__/Anchor-test.js
+++ b/src/js/components/Anchor/__tests__/Anchor-test.js
@@ -159,6 +159,7 @@ describe('Anchor', () => {
         <Anchor size="large" />
         <Anchor size="xlarge" />
         <Anchor size="xxlarge" />
+        <Anchor size="10px" />
       </Grommet>,
     );
     const tree = component.toJSON();
diff --git a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.js.snap b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.js.snap
index 44e92c05475..5b4ba052103 100644
--- a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.js.snap
+++ b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.js.snap
@@ -609,6 +609,22 @@ exports[`Anchor size renders 1`] = `
   text-decoration: underline;
 }
 
+.c7 {
+  box-sizing: border-box;
+  font-size: 10px;
+  line-height: normal;
+  color: #7D4CDB;
+  font-weight: 600;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c7:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 <div
   className="c0"
 >
@@ -648,6 +664,12 @@ exports[`Anchor size renders 1`] = `
     onFocus={[Function]}
     size="xxlarge"
   />
+  <a
+    className="c7"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    size="10px"
+  />
 </div>
 `;