@primer/components 31.2.1-rc.7fa29a87 → 32.0.0-rc.7200a6a6

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