@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/src/__tests__/Header.types.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Header from '../Header'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Header />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header backgroundColor="saddlebrown" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Item backgroundColor="salmon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Link backgroundColor="sandybrown" />
+    </>
+  )
+}

package/src/__tests__/Label.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Label from '../Label'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Label />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Label backgroundColor="mintcream" />
+}

package/src/__tests__/LabelGroup.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import LabelGroup from '../LabelGroup'
+
+export function shouldAcceptCallWithNoProps() {
+  return <LabelGroup />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <LabelGroup backgroundColor="khaki" />
+}

package/src/__tests__/Link.test.tsx

@@ -28,9 +28,9 @@ describe('Link', () => {
     expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
   })
 
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Link as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  it('respects the "sx" prop', () => {
+    expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link as="i" sx={{fontStyle: 'normal'}} />)).toHaveStyleRule('font-style', 'normal')
   })
 
   it('applies button styles when rendering a button element', () => {
@@ -41,7 +41,7 @@ describe('Link', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
 
-  it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
+  it('respectes the  "sx" prop when "muted" prop is also passed', () => {
+    expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
 })

package/src/__tests__/Link.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Link from '../Link'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Link />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Link backgroundColor="mistyrose" />
+}

package/src/__tests__/Overlay.types.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Overlay from '../Overlay'
+
+export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
+  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
+}
+
+export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
+  return (
+    <Overlay
+      returnFocusRef={ref}
+      onClickOutside={() => null}
+      onEscape={() => null}
+      // @ts-expect-error system props should not be accepted
+      backgroundColor="olivedrab"
+    />
+  )
+}

package/src/__tests__/Pagehead.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Pagehead from '../Pagehead'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Pagehead />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Pagehead backgroundColor="orchid" />
+}

package/src/__tests__/Pagination.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Pagination from '../Pagination'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Pagination currentPage={1} pageCount={2} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Pagination currentPage={1} pageCount={2} backgroundColor="palegoldenrod" />
+}

package/src/__tests__/Popover.types.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Popover from '../Popover'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Popover />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Popover backgroundColor="palegreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Popover.Content backgroundColor="paleturquoise" />
+    </>
+  )
+}

package/src/__tests__/SelectMenu.types.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import SelectMenu from '../SelectMenu'
+
+export function shouldAcceptCallWithNoProps() {
+  return <SelectMenu />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu backgroundColor="lightgray" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.List backgroundColor="lightgreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Divider backgroundColor="lightgrey" />
+      {/* This will not error for now, but once TextInputProps is fixed, a ts-expect-error can be added */}
+      <SelectMenu.Filter backgroundColor="lightpink" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Footer backgroundColor="lightsalmon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Item backgroundColor="lightseagreen" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Modal backgroundColor="lightskyblue" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Tabs backgroundColor="lightslategray" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Tab backgroundColor="lightslategrey" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.TabPanel backgroundColor="lightsteelblue" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.Header backgroundColor="lightyellow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SelectMenu.LoadingAnimation backgroundColor="lightcyan" />
+    </>
+  )
+}

package/src/__tests__/SideNav.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import SideNav from '../SideNav'
+
+export function shouldAcceptCallWithNoProps() {
+  return <SideNav />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <SideNav backgroundColor="aliceblue" />
+}

package/src/__tests__/StateLabel.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import StateLabel from '../StateLabel'
+
+export function shouldAcceptCallWithNoProps() {
+  return <StateLabel />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <StateLabel backgroundColor="bisque" />
+}

package/src/__tests__/StyledOcticon.types.test.tsx

@@ -0,0 +1,12 @@
+import {MoonIcon} from '@primer/octicons-react'
+import React from 'react'
+import StyledOcticon from '../StyledOcticon'
+
+export function shouldAcceptCallWithNoProps() {
+  return <StyledOcticon icon={MoonIcon} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <StyledOcticon backgroundColor="wheat" />
+}

package/src/__tests__/SubNav.types.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import SubNav from '../SubNav'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <SubNav />
+      <SubNav.Link />
+      <SubNav.Links />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <SubNav backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SubNav.Link backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <SubNav.Links backgroundColor="thistle" />
+    </>
+  )
+}

package/src/__tests__/TabNav.types.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import TabNav from '../TabNav'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <TabNav />
+      <TabNav.Link />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <TabNav backgroundColor="maroon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <TabNav.Link backgroundColor="fuchsia" />
+    </>
+  )
+}

package/src/__tests__/Timeline.types.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Timeline from '../Timeline'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <Timeline />
+      <Timeline.Item />
+      <Timeline.Badge />
+      <Timeline.Body />
+      <Timeline.Break />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline backgroundColor="red" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Item backgroundColor="orange" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Badge backgroundColor="yellow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Body backgroundColor="green" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Break backgroundColor="blue" />
+    </>
+  )
+}

package/src/__tests__/Tooltip.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Tooltip from '../Tooltip'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Tooltip />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Tooltip backgroundColor="thistle" />
+}

package/src/__tests__/Truncate.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Truncate from '../Truncate'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Truncate title="Hello" />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Truncate title="Hello" backgroundColor="indigo" />
+}

package/src/__tests__/UnderlineNav.types.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import UnderlineNav from '../UnderlineNav'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <UnderlineNav />
+      <UnderlineNav.Link />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <UnderlineNav backgroundColor="snow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <UnderlineNav.Link backgroundColor="springgreen" />
+    </>
+  )
+}

package/src/__tests__/__snapshots__/Label.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`Label renders consistently 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6e7781;
 }
 
 .c0:hover {
@@ -28,16 +28,15 @@ exports[`Label respects the "outline" prop 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6e7781;
   margin-top: -1px;
   margin-bottom: -1px;
   color: #57606a;
   border: 1px solid #d0d7de;
   box-shadow: none;
-  background-color: #6e7781;
   background-color: transparent;
 }
 
@@ -57,10 +56,10 @@ exports[`Label respects the "variant" prop 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 14px;
   line-height: 16px;
   padding: 8px 12px;
-  background-color: #6e7781;
 }
 
 .c0:hover {

package/src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`Link renders consistently 1`] = `
 />
 `;
 
-exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
+exports[`Link respectes the  "sx" prop when "muted" prop is also passed 1`] = `
 .c0 {
   color: #57606a;
   -webkit-text-decoration: none;
@@ -136,7 +136,6 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 <a
   className="c0"
-  color="fg.onEmphasis"
   muted={true}
 />
 `;

package/src/__tests__/__snapshots__/NewButton.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }
@@ -83,6 +84,7 @@ exports[`Button renders consistently 1`] = `
 >
   <span
     data-component="text"
+    hidden={false}
   />
 </button>
 `;
@@ -128,6 +130,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }
@@ -171,6 +174,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 >
   <span
     data-component="text"
+    hidden={false}
   >
      Disabled
   </span>
@@ -222,6 +226,7 @@ exports[`Button styles icon only button to make it a square 1`] = `
 }
 
 .c0:disabled {
+  cursor: default;
   color: #8c959f;
   background-color: btn.disabledBg;
 }

package/src/stories/ActionList2.stories.tsx

@@ -318,8 +318,8 @@ export function GroupsStory(): JSX.Element {
     <>
       <h1>Groups</h1>
       <ErsatzOverlay>
-        <ActionList selectionVariant="multiple" showDividers role="listbox" aria-label="Select reviewers">
-          <ActionList.Group title="Suggestions" variant="filled">
+        <ActionList selectionVariant="multiple" showDividers aria-label="Select reviewers">
+          <ActionList.Group title="Suggestions" variant="filled" role="listbox">
             {users.slice(0, 2).map(user => (
               <ActionList.Item
                 key={user.login}
@@ -336,7 +336,7 @@ export function GroupsStory(): JSX.Element {
               </ActionList.Item>
             ))}
           </ActionList.Group>
-          <ActionList.Group title="Everyone" variant="filled">
+          <ActionList.Group title="Everyone" variant="filled" role="listbox">
             {users.slice(2).map(user => (
               <ActionList.Item
                 role="option"

package/src/stories/ActionMenu.stories.tsx

@@ -98,10 +98,7 @@ export function SimpleListStory(): JSX.Element {
           onAction={onAction}
           anchorContent="Menu"
           overlayProps={{
-            'data-test-id': 'some_test_id',
-            onMouseDown: (e: React.MouseEvent) =>
-              // eslint-disable-next-line no-console
-              console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+            'data-test-id': 'some_test_id'
           }}
           items={[
             {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon},

package/src/stories/ConfirmationDialog.stories.tsx

@@ -64,16 +64,16 @@ export const ShorthandHook = () => {
   )
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
     </Box>

package/src/stories/Dialog.stories.tsx

@@ -160,11 +160,11 @@ function CustomHeader({
   return null
 }
 function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body bg="danger.subtle">{children}</Dialog.Body>
+  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
 }
 function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
   return (
-    <Dialog.Footer bg="attention.subtle">
+    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
       {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
     </Dialog.Footer>
   )

package/src/stories/useFocusTrap.stories.tsx

@@ -165,7 +165,7 @@ export const CustomInitialFocus = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the
           &ldquo;Elderberry&rdquo; button will receive the initial focus (if the trap zone container does not already
           have focus).
@@ -302,7 +302,7 @@ export const MultipleFocusTraps = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an
           active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled,
           the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be

package/src/stories/useFocusZone.stories.tsx

@@ -58,7 +58,7 @@ export const BasicFocusZone = () => {
         <Box position="absolute" right={5} top={2}>
           Last key pressed: {lastKey}
         </Box>
-        <ToggleButton mb={3} onClick={toggleFz}>
+        <ToggleButton onClick={toggleFz} sx={{mb: 3}}>
           {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
         </ToggleButton>
         <MarginButton>Apple</MarginButton>
@@ -396,7 +396,7 @@ export const SpecialSituations = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
           different situations. Focus treatment within your component should be evaluated for your particular UX using
           the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard">ARIA guidelines</a>.
@@ -491,7 +491,7 @@ export const ChangingSubtree = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates that focusZone is consistent even when the container&rsquo;s subtree changes.
         </Flash>
         <Box position="absolute" right={5} top={2}>
@@ -620,7 +620,7 @@ export const ActiveDescendant = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
           active element. Below, you can focus the input box then use the up/down arrow keys to change the active
           descendant (dark blue outline).