Merge branch 'main' into hussam-i-am/preview-page

primer · Jan 9, 2025 · 934ec19 · 934ec19
2 parents e624f26 + 37901a8
commit 934ec19
Show file tree

Hide file tree

Showing 19 changed files with 496 additions and 717 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,14 +5,6 @@
 
 version: 2
 updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
-    versioning-strategy: increase
-    labels:
-      - 'dependencies'
-      - 'skip changeset'
   - package-ecosystem: 'npm'
     directory: '/'
     schedule:
@@ -26,6 +18,7 @@ updates:
         patterns:
           - '@storybook/*'
           - 'storybook'
+
   - package-ecosystem: 'github-actions'
     directory: '/'
     schedule:

diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.9.0",
+    "@primer/react": "37.9.1",
     "next": "^14.2.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@primer/react": "37.9.0",
+    "@primer/react": "37.9.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

diff --git a/examples/theming/package.json b/examples/theming/package.json
@@ -10,8 +10,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/octicons-react": "^19.9.0",
-    "@primer/react": "37.9.0",
+    "@primer/octicons-react": "^19.14.0",
+    "@primer/react": "37.9.1",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
     "react": "^18.3.1",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @primer/react
 
+## 37.9.1
+
+### Patch Changes
+
+- [`8c1cff4`](https://github.com/primer/react/commit/8c1cff46f206b0c51feeb32ed1ab85c7db18acd1) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(ActionList): remove className from menuItemProps to prevent duplicate className bug
+
 ## 37.9.0
 
 ### Minor Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.9.0",
+  "version": "37.9.1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -335,7 +335,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       ...(includeSelectionAttribute && {[itemSelectionAttribute]: selected}),
       role: itemRole,
       id: itemId,
-      className,
     }
 
     const containerProps = _PrivateItemWrapper

diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -1363,11 +1363,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="octicon octicon-chevron-down c9"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -1884,11 +1886,13 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
               >
                 <svg
                   aria-hidden="true"
-                  class="c9"
+                  class="octicon octicon-chevron-down c9"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >

diff --git a/packages/react/src/Octicon/Octicon.tsx b/packages/react/src/Octicon/Octicon.tsx
@@ -5,7 +5,7 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
+type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps & SxProp
 
 const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
   const {icon: IconComponent, ...rest} = props
@@ -15,7 +15,11 @@ const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGE
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-const Octicon = styled(Icon)<SxProp>`
+const Octicon = styled(Icon).withConfig({
+  shouldForwardProp(prop) {
+    return prop !== 'sx'
+  },
+})<SxProp>`
   ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
 `
 

diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -34,16 +34,15 @@ exports[`StateLabel renders children 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -95,16 +94,15 @@ exports[`StateLabel respects the status prop 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -155,16 +153,15 @@ exports[`StateLabel respects the status prop 2`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-closed c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -215,16 +212,15 @@ exports[`StateLabel respects the status prop 3`] = `
 >
   <svg
     aria-label="Issue, not planned"
-    className="c1"
+    className="octicon octicon-skip c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -272,16 +268,15 @@ exports[`StateLabel respects the status prop 4`] = `
 >
   <svg
     aria-label="Pull request"
-    className="c1"
+    className="octicon octicon-git-merge c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -329,16 +324,15 @@ exports[`StateLabel respects the status prop 5`] = `
 >
   <svg
     aria-label="Pull request"
-    className="c1"
+    className="octicon octicon-git-merge-queue c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -386,16 +380,15 @@ exports[`StateLabel respects the variant prop 1`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
@@ -446,16 +439,15 @@ exports[`StateLabel respects the variant prop 2`] = `
 >
   <svg
     aria-label="Issue"
-    className="c1"
+    className="octicon octicon-issue-opened c1"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height={16}
+    overflow="visible"
     role="img"
     style={
       {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }