Enable direct-slot-children rule (#3063)

* Bump eslint-plugin-primer-react

* Fix errors

* Add eslint disable

Author: colebemis

.eslintrc.js

@@ -99,6 +99,7 @@ module.exports = {
         'import/no-namespace': 'off',
         'import/no-named-as-default': 'off',
         'import/no-named-as-default-member': 'off',
+        'primer-react/direct-slot-children': ['error', {skipImportCheck: true}],
         'no-unused-vars': [
           'error',
           {
@@ -137,6 +138,7 @@ module.exports = {
         'import/no-deprecated': 'off',
         'import/no-named-as-default': 'off',
         'import/no-named-as-default-member': 'off',
+        'primer-react/direct-slot-children': ['error', {skipImportCheck: true}],
         'no-restricted-imports': [
           'error',
           {

docs/components/ThemeReferenceTree.js

@@ -22,15 +22,13 @@ const getLeadingVisual = property => {
   const propertyStr = property.toString()
   if (isColor(propertyStr)) {
     return (
-      <TreeView.LeadingVisual>
-        <Box
-          bg={`${propertyStr}`}
-          width={16}
-          height={16}
-          borderRadius={1}
-          boxShadow="inset 0px 0px 0px 1px rgba(0,0,0,0.125)"
-        />
-      </TreeView.LeadingVisual>
+      <Box
+        bg={`${propertyStr}`}
+        width={16}
+        height={16}
+        borderRadius={1}
+        boxShadow="inset 0px 0px 0px 1px rgba(0,0,0,0.125)"
+      />
     )
   } else {
     return null
@@ -55,7 +53,7 @@ function RecursiveTree({property, propertyName, isRootTreeItem = false}) {
     if (isLeafItem) {
       return (
         <TreeView.Item>
-          {getLeadingVisual(property)}
+          <TreeView.LeadingVisual>{getLeadingVisual(property)}</TreeView.LeadingVisual>
           <Text fontWeight="bold">{propertyName}</Text> : <Text>{property && property.toString()}</Text>
         </TreeView.Item>
       )

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -11,6 +11,7 @@ function ThemeSwitcher() {
   return (
     <ActionMenu>
       <ActionMenu.Button aria-label="Select field type">{selectedItem?.name}</ActionMenu.Button>
+      {/* eslint-disable-next-line primer-react/no-system-props */}
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single">
           {items.map((type, index) => (

package-lock.json

@@ -192,7 +192,7 @@
     "eslint-plugin-mdx": "2.0.5",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-primer-react": "1.0.1",
+    "eslint-plugin-primer-react": "2.0.2",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.11",

package.json

@@ -365,7 +365,7 @@ export const ChildWithSideEffects = () => {
       return () => window.clearInterval(interval)
     }, [])
 
-    return <ActionList.Description>{seconds} seconds passed</ActionList.Description>
+    return <>{seconds} seconds passed</>
   }
 
   return (
@@ -375,7 +375,9 @@ export const ChildWithSideEffects = () => {
           <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />
         </ActionList.LeadingVisual>
         {user.login}
-        <SideEffectDescription />
+        <ActionList.Description>
+          <SideEffectDescription />
+        </ActionList.Description>
       </ActionList.Item>
     </ActionList>
   )

src/ActionList/ActionList.features.stories.tsx

@@ -41,6 +41,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
   divider = 'line',
   ...props
 }) => {
+  // eslint-disable-next-line primer-react/direct-slot-children
   return <PageLayout.Header padding={padding} divider={divider} {...props} />
 }
 
@@ -87,6 +88,7 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
   divider = 'line',
   ...props
 }) => {
+  // eslint-disable-next-line primer-react/direct-slot-children
   return <PageLayout.Footer padding={padding} divider={divider} {...props} />
 }
 

src/SplitPageLayout/SplitPageLayout.tsx

@@ -190,7 +190,6 @@ describe('CheckboxOrRadioGroup', () => {
 
     render(
       <CheckboxOrRadioGroup>
-        <FormControl.Label>{INPUT_GROUP_LABEL}</FormControl.Label>
         <FormControl>
           <FormControl.Label>Choice one</FormControl.Label>
           <TextInput />

src/__tests__/CheckboxOrRadioGroup.test.tsx

@@ -703,9 +703,6 @@ export const InOverlayWithCustomScrollContainerRef = (args: FormControlArgs<Auto
         side="inside-top"
         renderAnchor={props => <Button {...props}>open overlay</Button>}
       >
-        <FormControl.Label htmlFor="autocompleteInput" id="autocompleteLabel" visuallyHidden>
-          Pick tags
-        </FormControl.Label>
         <Autocomplete>
           <Box display="flex" flexDirection="column" height="100%">
             <Box borderWidth={0} borderBottomWidth={1} borderColor="border.default" borderStyle="solid">