Merge branch 'main' into stamat/text-decoration-cannot-be-animated

.changeset/brown-spoons-think.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated the following library depedencies: `@oddbird/popover-polyfill`, `clsx`, `autoprefixer`, `css-loader`, `mini-css-extract-plugin`, `postcss`, `postcss-loader`, `postcss-preset-env`, `style-loader`, `typed-css-modules`, `typescript-plugin-css-modules`, `webpack-cli`, `fast-glob`.
+
+These updates should not affect the library’s visuals or component APIs. **In most cases, no additional action is required**. Please note however, that the compiled output may be slightly different due to changes in the bundling process.

.changeset/kind-years-repair.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed a bug in the `ActionMenu` component where items with falsy values (eg `""`) would not trigger the `onSelect` callback when selected.

.changeset/moody-plants-add.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Increased the gap between primary and secondary buttons in `Hero`, `CTABanner` and `ButtonGroup` components from `8px` to `16px`.

.github/workflows/deploy_docs.yml

@@ -26,8 +26,8 @@ jobs:
   build_deploy:
     if: ${{ github.repository == 'primer/brand' }}
     name: Production
-    # SHA for security hardening. Points at last verified HEAD of main branch.
-    uses: primer/.github/.github/workflows/deploy.yml@rezrah/fix-prod-deployment
+    # SHA for security hardening. Points at 2.1.1 release
+    uses: primer/.github/.github/workflows/deploy.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca
     with:
       node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..

.github/workflows/deploy_docs_preview.yml

@@ -14,8 +14,8 @@ jobs:
   deploy:
     if: ${{ github.repository == 'primer/brand' }}
     name: Preview
-    # SHA for security hardening. Points at last verified HEAD of main branch.
-    uses: primer/.github/.github/workflows/deploy_preview.yml@cd223835608ca5e9401e0ffe6081f6d2fcc912f3
+    # SHA for security hardening. Points at 2.1.1 release
+    uses: primer/.github/.github/workflows/deploy_preview.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca
     with:
       node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..

.github/workflows/deploy_docs_preview_forks.yml

@@ -14,8 +14,8 @@ jobs:
   deploy:
     if: ${{ github.repository != github.event.pull_request.head.repo.full_name }}
     name: Preview
-    # SHA for security hardening. Points at last verified HEAD of main branch.
-    uses: primer/.github/.github/workflows/deploy_preview.yml@cd223835608ca5e9401e0ffe6081f6d2fcc912f3
+    # SHA for security hardening. Points at 2.1.1 release
+    uses: primer/.github/.github/workflows/deploy_preview.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca
     with:
       node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..

.github/workflows/release.yml

@@ -10,15 +10,16 @@ jobs:
   release:
     if: github.ref_name == 'main'
     name: Release
-    uses: primer/.github/.github/workflows/[email protected]
+
+    uses: primer/.github/.github/workflows/release.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca # SHA for security hardening. Points at v2.1.1 release
     secrets:
       gh_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
 
   release-next-minor:
     if: github.ref_name == 'next-minor'
     name: Next minor
-    uses: primer/.github/.github/workflows/release.yml@v1.0.0
+    uses: primer/.github/.github/workflows/release.yml@2a60f4cc62889bd218f3019ce4a090ff89b71cca # SHA for security hardening. Points at v2.1.1 release
     with:
       title: Release tracking (next minor)
     secrets:

apps/docs/content/components/Breadcrumbs/index.mdx

@@ -1,46 +1,40 @@
 ---
 title: Breadcrumbs
-source: https://github.com/primer/brand/tree/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
-storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground'
-description: Use breadcrumbs to enable wayfinding through navigational links
+description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
 ---
 
-import {Label} from '@primer/react'
-import {BreadcrumbVariants} from '@primer/react-brand'
-import {PropTableValues} from '../../../src/components'
+import ComponentLayout from '../../../src/layouts/component-layout'
 
+import anatomy from './images/anatomy.png'
+import variants from './images/variants.png'
 import doOverflow from './images/do-overflow.png'
 import dontOverflow from './images/dont-overflow.png'
 
-```js
-import {Breadcrumbs} from '@primer/react-brand'
-```
+export default ComponentLayout
 
-## Examples
+## Anatomy
 
-### Default
+<img
+  src={anatomy}
+  alt="Breadcrumbs with location-based annotations for parent-level links, divider, and current page."
+/>
 
-```jsx live
-<Breadcrumbs>
-  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
-  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
-  <Breadcrumbs.Item href="/copilot/chat" selected>
-    Chat
-  </Breadcrumbs.Item>
-</Breadcrumbs>
-```
+## Usage
 
-### Accent
+Use breadcrumbs to display a user's path within a site's hierarchy, helping them understand their location and easily navigate back to higher-level pages, especially on sites with deep structures.
 
-```jsx live
-<Breadcrumbs variant="accent">
-  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
-  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
-  <Breadcrumbs.Item href="/copilot/chat" selected>
-    Chat
-  </Breadcrumbs.Item>
-</Breadcrumbs>
-```
+Breadcrumbs are most appropriate on pages that:
+
+- Are missing section-level navigation elements E.g. [SubNav](/components/SubNav)
+- Need to surface contextually-relevant content through its parent page(s)
+
+### Placement
+
+Place breadcrumbs at the top of the page, below the header and any navigation bar, to ensure they are immediately visible and accessible to users as they begin navigating the page.
+
+Align breadcrumbs with the main content area to maintain a consistent and orderly layout, helping users easily associate the breadcrumbs with the content they are navigating.
+
+Use consistent placement across all pages of the site so that users can rely on breadcrumbs as a stable navigation tool.
 
 ## Accessibility
 
@@ -63,17 +57,22 @@ Ensure that the text of each individual Breadcrumb item fits entirely within a 3
   </Dont>
 </DoDontContainer>
 
-## Component props
+## Options
+
+### Variants
+
+The breadcrumbs component is available in two variants:
 
-### Breadcrumbs <Label>Required</Label>
+- The default variant uses the standard text color, positioning the navigation as a secondary element on the page. This is suitable for most scenarios.  
+- The accent variant emphasizes parent links with an accent color. This variant should should be reserved for pages where the breadcrumbs are essential for navigation.
 
-| name      | type                                                          | default | required | description                               |
-| --------- | ------------------------------------------------------------- | ------- | -------- | ----------------------------------------- |
-| `variant` | <PropTableValues values={BreadcrumbVariants} addLineBreaks /> |         | `false`  | Specify alternative breadcrumb appearance |
+<img
+  src={variants}
+  alt="The two breadcrumbs variants available: default and accent"
+/>
 
-### Breadcrumbs.Item <Label>Required</Label>
+## Related components
 
-| name       | type      | default | required | description                         |
-| ---------- | --------- | ------- | -------- | ----------------------------------- |
-| `selected` | `boolean` |         | `false`  | Used for indicating the active link |
-| `href`     | `string`  |         | `true`   | URL of the page the link goes to    |
+- [Anchor nav](/components/AnchorNav): To display navigation for different sections of a page.
+- [Pagination](/components/Pagination): To display navigation for content that is split into sequential pages.
+- [Sub nav](/components/SubNav): To display the secondary navigation of a site.

apps/docs/content/components/Breadcrumbs/react.mdx

@@ -0,0 +1,59 @@
+---
+title: Breadcrumbs
+source: https://github.com/primer/brand/tree/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground'
+description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
+---
+
+import ComponentLayout from '../../../src/layouts/component-layout'
+
+import {Label} from '@primer/react'
+import {BreadcrumbVariants} from '@primer/react-brand'
+import {PropTableValues} from '../../../src/components'
+
+export default ComponentLayout
+
+```js
+import {Breadcrumbs} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx live
+<Breadcrumbs>
+  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot/chat" selected>
+    Chat
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+### Accent
+
+```jsx live
+<Breadcrumbs variant="accent">
+  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/copilot/chat" selected>
+    Chat
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+## Component props
+
+### Breadcrumbs <Label>Required</Label>
+
+| name      | type                                                          | default | required | description                               |
+| --------- | ------------------------------------------------------------- | ------- | -------- | ----------------------------------------- |
+| `variant` | <PropTableValues values={BreadcrumbVariants} addLineBreaks /> |         | `false`  | Specify alternative breadcrumb appearance |
+
+### Breadcrumbs.Item <Label>Required</Label>
+
+| name       | type      | default | required | description                         |
+| ---------- | --------- | ------- | -------- | ----------------------------------- |
+| `selected` | `boolean` |         | `false`  | Used for indicating the active link |
+| `href`     | `string`  |         | `true`   | URL of the page the link goes to    |

apps/storybook/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @primer/brand-storybook
 
+## 0.47.0
+
 ## 0.46.0
 
 ## 0.45.1

apps/storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-storybook",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "private": true,
   "description": "Primer Brand Storybook",
   "keywords": [