fixes

Author: jfuchs

src/rules/__tests__/no-system-props.test.js

@@ -23,7 +23,7 @@ ruleTester.run('no-system-props', rule, {
   invalid: [
     {
       code: `import {Button} from '@primer/components'; <Button width={200} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: 200}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -33,7 +33,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width="200" />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -43,7 +43,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={"200"} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: "200"}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: "200"}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -53,7 +53,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={myWidth} />`,
-      output: `import {Button} from '@primer/components'; <Button sx={{width: myWidth}} />`,
+      output: `import {Button} from '@primer/components'; <Button  sx={{width: myWidth}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -63,7 +63,7 @@ ruleTester.run('no-system-props', rule, {
     },
     {
       code: `import {Button} from '@primer/components'; <Button width={200} height={100} />`,
-      output: `import {Button} from '@primer/components'; <Button  sx={{width: 200, height: 100}} />`,
+      output: `import {Button} from '@primer/components'; <Button   sx={{width: 200, height: 100}} />`,
       errors: [
         {
           messageId: 'noSystemProps',
@@ -110,6 +110,16 @@ ruleTester.run('no-system-props', rule, {
           data: {propNames: 'width', componentName: 'Button'}
         }
       ]
+    },
+    {
+      code: `import {Label} from '@primer/components'; <Label width={200} outline />`,
+      output: `import {Label} from '@primer/components'; <Label  outline sx={{width: 200}} />`,
+      errors: [
+        {
+          messageId: 'noSystemProps',
+          data: {propNames: 'width', componentName: 'Label'}
+        }
+      ]
     }
   ]
 })

src/rules/no-system-props.js

@@ -7,10 +7,13 @@ const excludedComponents = new Set(['Box', 'Text'])
 
 // Components for which we allow a set of prop names
 const excludedComponentProps = new Map([
+  ['AnchoredOverlay', new Set(['width', 'height'])],
   ['Avatar', new Set(['size'])],
+  ['Dialog', new Set(['width', 'height'])],
   ['Label', new Set(['variant'])],
   ['ProgressBar', new Set(['bg'])],
-  ['Spinner', new Set(['size'])]
+  ['Spinner', new Set(['size'])],
+  ['StyledOcticon', new Set(['size'])]
 ])
 
 module.exports = {
@@ -96,7 +99,7 @@ module.exports = {
 }
 
 const sxPropTextFromStylesMap = styles => {
-  return `sx={{${objectEntriesStringFromStylesMap(styles)}}}`
+  return ` sx={{${objectEntriesStringFromStylesMap(styles)}}}`
 }
 
 const objectEntriesStringFromStylesMap = styles => {