From 8516dd89c83c0ec52ff9618e66edb2d98a887c51 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 13 Sep 2024 13:56:36 -0400
Subject: [PATCH 1/6] Add test case

---
 .../react/src/TooltipV2/__tests__/Tooltip.test.tsx  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index df52b73dcbd..adee1509385 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -109,4 +109,17 @@ describe('Tooltip', () => {
     const triggerEL = getByRole('button')
     expect(triggerEL.getAttribute('aria-describedby')).toContain('custom-tooltip-id')
   })
+  it('should not throw an error when the trigger element is a button', () => {
+    const {getByRole} = HTMLRender(
+      <fieldset>
+        <legend>Legend</legend>
+        <Tooltip text="Tooltip text">
+          <button>Button Text</button>
+        </Tooltip>
+      </fieldset>,
+    )
+
+    const triggerEL = getByRole('button')
+    expect(triggerEL).toBeInTheDocument()
+  })
 })

From 9bda20b1b66588e41a6444070b34fcfd9711a679 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 16 Sep 2024 11:00:25 +1000
Subject: [PATCH 2/6] Update the disabled selector and add another test

---
 packages/react/src/TooltipV2/Tooltip.tsx           |  2 +-
 .../react/src/TooltipV2/__tests__/Tooltip.test.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index b4756ff12d0..ab5c5fe6648 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -171,7 +171,7 @@ const positionToDirection: Record<string, TooltipDirection> = {
 // The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3
 const interactiveElements = [
   'a[href]',
-  'button:not(:disabled)',
+  'button:not([disabled])',
   'summary',
   'select',
   'input:not([type=hidden])',
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index adee1509385..aac3797b60d 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -109,6 +109,20 @@ describe('Tooltip', () => {
     const triggerEL = getByRole('button')
     expect(triggerEL.getAttribute('aria-describedby')).toContain('custom-tooltip-id')
   })
+  it('should throw an error if the trigger element is disabled', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
+    expect(() => {
+      HTMLRender(
+        <Tooltip text="Tooltip text" direction="n">
+          <Button disabled>Delete</Button>
+        </Tooltip>,
+      )
+    }).toThrow(
+      'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
+    )
+    expect(spy).toHaveBeenCalled()
+    spy.mockRestore()
+  })
   it('should not throw an error when the trigger element is a button', () => {
     const {getByRole} = HTMLRender(
       <fieldset>

From ccd8e719b2a078e31c9425e0f8c587b44a57ec22 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 16 Sep 2024 11:01:07 +1000
Subject: [PATCH 3/6] update test description

---
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index aac3797b60d..3a237603182 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -123,7 +123,7 @@ describe('Tooltip', () => {
     expect(spy).toHaveBeenCalled()
     spy.mockRestore()
   })
-  it('should not throw an error when the trigger element is a button', () => {
+  it('should not throw an error when the trigger element is a button in a fieldset', () => {
     const {getByRole} = HTMLRender(
       <fieldset>
         <legend>Legend</legend>

From 75b9c20f30b19aa86650b1455e55c8bd63b4d1df Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:57:33 -0700
Subject: [PATCH 4/6] Add missing `wide` CSS + className to Stack (#4957)

* add missing css + classname

* Create fuzzy-jobs-deny.md
---
 .changeset/fuzzy-jobs-deny.md            |  5 +++++
 packages/react/src/Stack/Stack.docs.json |  8 ++++++++
 packages/react/src/Stack/Stack.tsx       | 15 ++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-jobs-deny.md

diff --git a/.changeset/fuzzy-jobs-deny.md b/.changeset/fuzzy-jobs-deny.md
new file mode 100644
index 00000000000..4a63867dc87
--- /dev/null
+++ b/.changeset/fuzzy-jobs-deny.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add missing `wide` CSS + className to Stack
diff --git a/packages/react/src/Stack/Stack.docs.json b/packages/react/src/Stack/Stack.docs.json
index 386648b99ea..968e1143328 100644
--- a/packages/react/src/Stack/Stack.docs.json
+++ b/packages/react/src/Stack/Stack.docs.json
@@ -35,6 +35,10 @@
       "name": "padding",
       "type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
       "description": "Specify the padding of the stack container."
+    },
+    {
+      "name": "className",
+      "type": "string"
     }
   ],
   "subcomponents": [
@@ -45,6 +49,10 @@
           "name": "grow",
           "type": "boolean | ResponsiveValue<boolean>",
           "description": "Allow item to keep size or expand to fill the available space."
+        },
+        {
+          "name": "className",
+          "type": "string"
         }
       ]
     }
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 9aafa0e11b3..6b14b52a3e8 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -281,6 +281,14 @@ const StyledStack = styled.div`
     &[data-justify-wide='space-evenly'] {
       justify-content: space-evenly;
     }
+
+    &[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
   }
 `
 
@@ -342,6 +350,7 @@ type StackProps<As> = React.PropsWithChildren<{
    * @default none
    */
   padding?: Padding
+  className?: string
 }>
 
 function Stack<As extends ElementType>({
@@ -353,6 +362,7 @@ function Stack<As extends ElementType>({
   justify = 'start',
   padding = 'none',
   wrap = 'nowrap',
+  className,
   ...rest
 }: StackProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
   const BaseComponent = as ?? 'div'
@@ -361,6 +371,7 @@ function Stack<As extends ElementType>({
     <StyledStack
       {...rest}
       as={BaseComponent}
+      className={className}
       {...getResponsiveAttributes('gap', gap)}
       {...getResponsiveAttributes('direction', direction)}
       {...getResponsiveAttributes('align', align)}
@@ -416,18 +427,20 @@ type StackItemProps<As> = React.PropsWithChildren<{
    * @default false
    */
   grow?: boolean | ResponsiveValue<boolean>
+  className?: string
 }>
 
 function StackItem<As extends ElementType>({
   as,
   children,
   grow,
+  className,
   ...rest
 }: StackItemProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
   const BaseComponent = as ?? 'div'
 
   return (
-    <StyledStackItem {...rest} as={BaseComponent} {...getResponsiveAttributes('grow', grow)}>
+    <StyledStackItem {...rest} as={BaseComponent} className={className} {...getResponsiveAttributes('grow', grow)}>
       {children}
     </StyledStackItem>
   )

From 82232ae20541fa06b17b074ad1b7da870f656c46 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Mon, 16 Sep 2024 12:01:27 +0200
Subject: [PATCH 5/6] adding more code connect (#4952)

---
 .../react/src/ActionMenu/ActionMenu.figma.tsx | 28 ++++++
 .../react/src/Blankslate/Blankslate.figma.tsx | 96 +++++++++++++++++++
 .../src/ButtonGroup/ButtonGroup.figma.tsx     | 10 ++
 packages/react/src/Label/Label.figma.tsx      | 30 ++++++
 packages/react/src/Popover/Popover.figma.tsx  | 48 ++++++++++
 packages/react/src/Spinner/Spinner.figma.tsx  | 14 +++
 .../react/src/StateLabel/StateLabel.figma.tsx | 57 +++++++++++
 .../drafts/Skeleton/SkeletonAvatar.figma.tsx  | 27 ++++++
 .../src/drafts/Skeleton/SkeletonBox.figma.tsx | 12 +++
 .../drafts/Skeleton/SkeletonText.figma.tsx    | 82 ++++++++++++++++
 10 files changed, 404 insertions(+)
 create mode 100644 packages/react/src/ActionMenu/ActionMenu.figma.tsx
 create mode 100644 packages/react/src/Blankslate/Blankslate.figma.tsx
 create mode 100644 packages/react/src/ButtonGroup/ButtonGroup.figma.tsx
 create mode 100644 packages/react/src/Label/Label.figma.tsx
 create mode 100644 packages/react/src/Popover/Popover.figma.tsx
 create mode 100644 packages/react/src/Spinner/Spinner.figma.tsx
 create mode 100644 packages/react/src/StateLabel/StateLabel.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx

diff --git a/packages/react/src/ActionMenu/ActionMenu.figma.tsx b/packages/react/src/ActionMenu/ActionMenu.figma.tsx
new file mode 100644
index 00000000000..3e2f971401e
--- /dev/null
+++ b/packages/react/src/ActionMenu/ActionMenu.figma.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {ActionMenu} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  ActionMenu,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=GFf1GorpZXk4F8Mq-4',
+  {
+    props: {
+      trigger: figma.children('trigger'),
+      open: figma.boolean('open'),
+      align: figma.enum('align', {
+        right: 'end',
+        left: 'start',
+        center: 'center',
+      }),
+      actionList: figma.nestedProps('ActionMenu/Content', {
+        items: figma.children('*'),
+      }),
+    },
+    example: ({trigger, open, align, actionList}) => (
+      <ActionMenu open={open}>
+        <ActionMenu.Anchor>{trigger}</ActionMenu.Anchor>
+        <ActionMenu.Overlay align={align}>{actionList.items}</ActionMenu.Overlay>
+      </ActionMenu>
+    ),
+  },
+)
diff --git a/packages/react/src/Blankslate/Blankslate.figma.tsx b/packages/react/src/Blankslate/Blankslate.figma.tsx
new file mode 100644
index 00000000000..3e09985e29e
--- /dev/null
+++ b/packages/react/src/Blankslate/Blankslate.figma.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import {Blankslate} from '../../src/drafts'
+import figma from '@figma/code-connect'
+
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+  },
+  variant: {primaryAction: 'false', secondaryAction: 'false'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    primaryAction: figma.nestedProps('Primary action', {
+      text: figma.textContent('Button'),
+    }),
+  },
+  variant: {primaryAction: 'true', secondaryAction: 'false'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    primaryAction: figma.nestedProps('Primary action', {
+      text: figma.textContent('Button'),
+    }),
+    secondaryAction: figma.textContent('Secondary action link'),
+  },
+  variant: {primaryAction: 'true', secondaryAction: 'true'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction, secondaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
+      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    secondaryAction: figma.textContent('Secondary action link'),
+  },
+  variant: {primaryAction: 'false', secondaryAction: 'true'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, secondaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
+    </Blankslate>
+  ),
+})
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.figma.tsx b/packages/react/src/ButtonGroup/ButtonGroup.figma.tsx
new file mode 100644
index 00000000000..72f6026b9b4
--- /dev/null
+++ b/packages/react/src/ButtonGroup/ButtonGroup.figma.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import {ButtonGroup} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(ButtonGroup, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=36325-3634&m=dev', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: ({children}) => <ButtonGroup>{children}</ButtonGroup>,
+})
diff --git a/packages/react/src/Label/Label.figma.tsx b/packages/react/src/Label/Label.figma.tsx
new file mode 100644
index 00000000000..bb2d6c85281
--- /dev/null
+++ b/packages/react/src/Label/Label.figma.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import {Label} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(Label, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-65008&m=dev', {
+  props: {
+    text: figma.textContent('Label'),
+    size: figma.enum('size', {
+      small: 'small',
+      large: 'large',
+    }),
+    variant: figma.enum('variant', {
+      default: 'default',
+      primary: 'primary',
+      secondary: 'secondary',
+      accent: 'accent',
+      success: 'success',
+      attention: 'attention',
+      severe: 'severe',
+      danger: 'danger',
+      done: 'done',
+      sponsors: 'sponsors',
+    }),
+  },
+  example: ({size, variant, text}) => (
+    <Label size={size} variant={variant}>
+      {text}
+    </Label>
+  ),
+})
diff --git a/packages/react/src/Popover/Popover.figma.tsx b/packages/react/src/Popover/Popover.figma.tsx
new file mode 100644
index 00000000000..9ce95da1600
--- /dev/null
+++ b/packages/react/src/Popover/Popover.figma.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {Heading, Popover, Text} from '../../src'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(Popover, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=19015-63778&m=dev', {
+  props: {
+    body: figma.string('body'),
+    heading: figma.string('heading'),
+    action: figma.children('Action'),
+    caret: figma.enum('caret', {
+      top: 'top',
+      'top-left': 'top-left',
+      'top-right': 'top-right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom-left',
+      'bottom-right': 'bottom-right',
+      left: 'left',
+      'left-top': 'left-top',
+      'left-bottom': 'left-bottom',
+      right: 'right',
+      'right-top': 'right-top',
+      'right-bottom': 'right-bottom',
+    }),
+  },
+  example: ({caret, heading, body, action}) => (
+    <Popover caret={caret}>
+      <Popover.Content>
+        <Heading
+          sx={{
+            fontSize: 2,
+          }}
+        >
+          {heading}
+        </Heading>
+        <Text as="p">{body}</Text>
+        {action}
+      </Popover.Content>
+    </Popover>
+  ),
+})
diff --git a/packages/react/src/Spinner/Spinner.figma.tsx b/packages/react/src/Spinner/Spinner.figma.tsx
new file mode 100644
index 00000000000..194c59e275b
--- /dev/null
+++ b/packages/react/src/Spinner/Spinner.figma.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import {Spinner} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(Spinner, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=11025-38126&m=dev', {
+  props: {
+    size: figma.enum('size', {
+      small: 'small',
+      medium: 'medium',
+      large: 'large',
+    }),
+  },
+  example: ({size}) => <Spinner size={size} />,
+})
diff --git a/packages/react/src/StateLabel/StateLabel.figma.tsx b/packages/react/src/StateLabel/StateLabel.figma.tsx
new file mode 100644
index 00000000000..ebdae7cf3f4
--- /dev/null
+++ b/packages/react/src/StateLabel/StateLabel.figma.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {StateLabel} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  StateLabel,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-64962&t=gQF1OJTEGB3vTxPz-4',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        normal: 'normal',
+      }),
+      status: figma.enum('status', {
+        draft: 'issueDraft',
+        open: 'issueOpened',
+        closed: 'issueClosed',
+        unavailable: 'unavailable',
+      }),
+      text: figma.textContent('Label'),
+    },
+    variant: {variant: 'issue'},
+    example: ({text, size, status}) => (
+      <StateLabel variant={size} status={status}>
+        {text}
+      </StateLabel>
+    ),
+  },
+)
+
+figma.connect(
+  StateLabel,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-64962&t=gQF1OJTEGB3vTxPz-4',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        normal: 'normal',
+      }),
+      status: figma.enum('status', {
+        draft: 'draft',
+        open: 'pullOpened',
+        closed: 'pullClosed',
+        merged: 'pullMerged',
+        queued: 'pullQueued',
+        unavailable: 'unavailable',
+      }),
+      text: figma.textContent('Label'),
+    },
+    variant: {variant: 'pull request'},
+    example: ({text, size, status}) => (
+      <StateLabel variant={size} status={status}>
+        {text}
+      </StateLabel>
+    ),
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx
new file mode 100644
index 00000000000..648ca02dc62
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {SkeletonAvatar} from '../../../src/drafts'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  SkeletonAvatar,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=29994-6840&m=dev',
+  {
+    props: {
+      size: figma.enum('size', {
+        '16px': 16,
+        '20px': 20,
+        '24px': 24,
+        '28px': 28,
+        '32px': 32,
+        '40px': 40,
+        '48px': 48,
+        '64px': 64,
+      }),
+      square: figma.enum('shape', {
+        circle: false,
+        square: true,
+      }),
+    },
+    example: ({size, square}) => <SkeletonAvatar size={size} square={square} />,
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx
new file mode 100644
index 00000000000..58b1e2dbf56
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import {SkeletonBox} from '..'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  SkeletonBox,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=36445-82&t=yGFSCgMOJ0ItJpsF-4',
+  {
+    // @ts-ignore: needs comment for figma code connect
+    example: () => <SkeletonBox height={/* set height */} width={/* set height */} />,
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx
new file mode 100644
index 00000000000..49de0372403
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import {SkeletonText} from '../../../src/drafts'
+import figma from '@figma/code-connect'
+
+const props = {
+  size: figma.enum('size', {
+    display: 'display',
+    titleLarge: 'titleLarge',
+    titleMedium: 'titleMedium',
+    titleSmall: 'titleSmall',
+    bodyLarge: 'bodyLarge',
+    bodyMedium: 'bodyMedium',
+    bodySmall: 'bodySmall',
+    subtitle: 'subtitle',
+  }),
+}
+
+figma.connect(SkeletonText, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6946&m=dev', {
+  props,
+  example: ({size}) => <SkeletonText size={size} />,
+})
+
+figma.connect(undefined, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props: {
+    size: figma.enum('size', {
+      display: 'display',
+      titleLarge: 'titleLarge',
+      titleMedium: 'titleMedium',
+      titleSmall: 'titleSmall',
+      bodyLarge: 'bodyLarge',
+      bodyMedium: 'bodyMedium',
+      bodySmall: 'bodySmall',
+      subtitle: 'subtitle',
+    }),
+  },
+  variant: {lines: '2'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '3'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '4'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '5'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})

From 0ad154283eada1bfc701b0fc8f0d277875864295 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 16 Sep 2024 08:51:41 -0400
Subject: [PATCH 6/6] Add changeset

---
 .changeset/flat-avocados-cheer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/flat-avocados-cheer.md

diff --git a/.changeset/flat-avocados-cheer.md b/.changeset/flat-avocados-cheer.md
new file mode 100644
index 00000000000..1c248bdaec4
--- /dev/null
+++ b/.changeset/flat-avocados-cheer.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Utilizes `[disabled]` selector instead of `:disabled` in `TooltipV2` to address a false positive