test(eslint): update eslint to error if style prop is used (#12924)

* test(eslint): update eslint to error if style prop is used * fix(eslint): ignore storybook files with this rule * fix(eslint): add more eslint ignores Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 18, 2023 · 899c996 · 899c996
1 parent cd87bd2
commit 899c996
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 0 deletions.
diff --git a/config/eslint-config-carbon/plugins/react.js b/config/eslint-config-carbon/plugins/react.js
@@ -33,6 +33,14 @@ module.exports = {
     'react/jsx-no-useless-fragment': 2,
     'react/no-typos': 2,
     'react/sort-prop-types': 2,
+    'react/forbid-component-props': [
+      2,
+      { forbid: [{ propName: 'style', message: 'Avoid using style prop' }] },
+    ],
+    'react/forbid-dom-props': [
+      2,
+      { forbid: [{ propName: 'style', message: 'Avoid using style prop' }] },
+    ],
 
     // react-hooks
     'react-hooks/rules-of-hooks': 2,
@@ -77,6 +85,16 @@ module.exports = {
       rules: {
         'react/display-name': 0,
         'react/prop-types': 0,
+        'react/forbid-component-props': 0,
+        'react/forbid-dom-props': 0,
+      },
+    },
+    // style prop is fine to be used in internal unit testing
+    {
+      files: ['*.e2e.js'],
+      rules: {
+        'react/forbid-component-props': 0,
+        'react/forbid-dom-props': 0,
       },
     },
 

diff --git a/packages/react/src/components/FocusScope/index.js b/packages/react/src/components/FocusScope/index.js
@@ -89,6 +89,7 @@ function FocusScopeBumper(props) {
   return (
     <span
       data-carbon-focus-scope=""
+      // eslint-disable-next-line react/forbid-dom-props
       style={bumperStyle}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex="0"

diff --git a/packages/react/src/components/Menu/_storybook-utils.js b/packages/react/src/components/Menu/_storybook-utils.js
@@ -22,6 +22,7 @@ const InfoBanner = () => (
 
 // eslint-disable-next-line react/prop-types
 export const StoryFrame = ({ children }) => (
+  // eslint-disable-next-line react/forbid-dom-props
   <div style={{ height: 'calc(100vh - 6.25rem)' }}>
     <InfoBanner />
     {children}

diff --git a/packages/react/src/components/Stack/Stack.js b/packages/react/src/components/Stack/Stack.js
@@ -59,6 +59,7 @@ const Stack = React.forwardRef(function Stack(props, ref) {
   }
 
   return (
+    // eslint-disable-next-line react/forbid-component-props
     <BaseComponent {...rest} ref={ref} className={className} style={style}>
       {children}
     </BaseComponent>

diff --git a/www/src/pages/insights/[owner]/[repo].js b/www/src/pages/insights/[owner]/[repo].js
@@ -154,6 +154,7 @@ export default function InsightPage(props) {
                               {formatChange(sprint.issues.states.open.change)}
                             </span>
                           </TableCell>
+                          {/* eslint-disable-next-line react/forbid-component-props */}
                           <TableCell style={closedStyle}>
                             <Flex align-center justify-between gap-x-5>
                               <span>
@@ -165,6 +166,7 @@ export default function InsightPage(props) {
                               {closedLabel}
                             </Flex>
                           </TableCell>
+                          {/* eslint-disable-next-line react/forbid-component-props */}
                           <TableCell style={createdStyle}>
                             <Flex align-center justify-between gap-x-5>
                               <span>