improve typing for figma code connect files (#5707)

primer · Feb 25, 2025 · 0ecc07f · 0ecc07f
1 parent 67e5872
commit 0ecc07f
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 17 deletions.
diff --git a/packages/react/src/Banner/Banner.figma.tsx b/packages/react/src/Banner/Banner.figma.tsx
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import React from 'react'
 import {Banner} from '../../src/experimental/'
 import figma from '@figma/code-connect'
@@ -31,7 +29,7 @@ const componentProps = {
     false: figma.textContent('Body'),
   }),
   dismissible: figma.boolean('Dismissible?', {
-    true: '() => { /* implement dismiss functionality */ }',
+    true: () => {},
     false: undefined,
   }),
 }

diff --git a/packages/react/src/BranchName/BranchName.figma.tsx b/packages/react/src/BranchName/BranchName.figma.tsx
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import React from 'react'
 import BranchName from './BranchName'
 import figma from '@figma/code-connect'

diff --git a/packages/react/src/Button/Button.figma.tsx b/packages/react/src/Button/Button.figma.tsx
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import {figma} from '@figma/code-connect'
 import {Button} from '../../src'
 import React from 'react'

diff --git a/packages/react/src/Button/IconButton.figma.tsx b/packages/react/src/Button/IconButton.figma.tsx
@@ -1,20 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import {figma} from '@figma/code-connect'
 import {IconButton} from '../../src'
+import type {VariantType} from './types'
 import React from 'react'
 
 figma.connect(
   IconButton,
   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30468-5843&t=eGzObFz2btFEDDNj-4',
   {
     props: {
-      icon: figma.instance('icon'),
-      variant: figma.enum('variant', {
+      icon: figma.instance<React.FunctionComponent>('icon'),
+      variant: figma.enum<VariantType>('variant', {
         primary: 'primary',
-        secondary: 'secondary',
+        secondary: 'default',
         danger: 'danger',
-        outline: 'outline',
         invisible: 'invisible',
       }),
       size: figma.enum('size', {

diff --git a/packages/react/src/Overlay/Overlay.figma.tsx b/packages/react/src/Overlay/Overlay.figma.tsx
@@ -9,5 +9,9 @@ figma.connect(Overlay, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Prim
     children: figma.children('*'),
     overflow: figma.boolean('overflow'),
   },
-  example: ({children}) => <Overlay>{children}</Overlay>,
+  example: ({children}) => (
+    <Overlay onClickOutside={() => {}} onEscape={() => {}} returnFocusRef={}>
+      {children}
+    </Overlay>
+  ),
 })
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx b/packages/react/src/SegmentedControl/SegmentedControl.figma.tsx
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import React from 'react'
 import {SegmentedControl} from './SegmentedControl'
 import figma from '@figma/code-connect'
@@ -48,6 +46,8 @@ figma.connect(
       selected: figma.enum('state', {selected: true}),
       icon: figma.instance('icon').getProps<{name: string; fn: React.ReactElement}>(),
     },
-    example: ({selected, icon}) => <SegmentedControl.IconButton selected={selected} icon={icon.fn} />,
+    example: ({selected, icon}) => (
+      <SegmentedControl.IconButton aria-label="Describe action" selected={selected} icon={icon.fn} />
+    ),
   },
 )