Test PR (Tooltip)

.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

.changeset/fuzzy-jobs-deny.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add missing `wide` CSS + className to Stack

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>
+    ),
+  },
+)

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>
+  ),
+})

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>,
+})

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>
+  ),
+})

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>
+  ),
+})

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} />,
+})

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"
         }
       ]
     }

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>
   )

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>
+    ),
+  },
+)

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])',