Add TrailingAction support to NavList #4697

khiga8 · 2024-06-25T13:14:12Z

Fixes: https://github.com/github/primer/issues/1966
Unblocks: https://github.com/github/accessibility-audits/issues/2942

Changelog

New

This PR adds TrailingAction support to NavList, extending the support we added to ActionList in #4634.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-06-25T13:14:15Z

🦋 Changeset detected

Latest commit: 27e01a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/react/src/ActionList/Item.tsx

github-actions · 2024-06-25T13:18:06Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.07 KB (+0.12% 🔺)
packages/react/dist/browser.umd.js	91.32 KB (+0.08% 🔺)

packages/react/src/ActionList/Item.tsx

TylerJDev

Just some comments, most aren't blocking!

packages/react/src/NavList/NavList.stories.tsx

TylerJDev · 2024-06-25T14:20:43Z

packages/react/src/NavList/NavList.tsx

+
+export type NavListTrailingActionProps = ActionListTrailingActionProps
+
+const TrailingAction = ActionList.TrailingAction


I noticed when using TrailingAction and there's already an "expand" button/icon, the styling is a bit off. I'm wondering if we'd want to disable TrailingAction in these instances, or allow them?

You're right! I think we should disallow it.

This has been addressed in this diff.

Let me know what you think of this approach!

I've supplemented this with:

Storybook example to enable visual regression tests

unit tests

TylerJDev · 2024-06-25T14:25:58Z

packages/react/src/NavList/NavList.stories.tsx

@@ -246,4 +247,26 @@ export const WithGroup = () => (
  </PageLayout>
 )

+export const WithTrailingAction = () => {


Non-blocking: A story showing this feature within sub items could be cool!

Done!

See Storybook: WithTrailingActionInSubItem

khiga8 · 2024-06-25T14:26:54Z

The failing test is a snapshot test which seems to be failing unrelated to my changes.

Co-authored-by: Tyler Jones <tylerjdev@github.com>

TylerJDev

LGTM! Left a few comments, but not truly blocking. Will take a look at the failing CI test to see what's up.

TylerJDev · 2024-06-27T20:50:39Z

packages/react/src/NavList/NavList.stories.tsx

+  )
+}
+
+export const WithBadExampleOfSubNavAndTrailingAction = () => {


Is this test just to show a bad implementation of NavList? If so, I'm wondering if we should add this under "DevOnly" story as I think this is what it's for 🤔 (e.g. "DevOnly" story)

TylerJDev · 2024-06-27T20:57:07Z

.changeset/tender-parrots-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch


I'm thinking this might be a minor, but will leave it up to you!

packages/react/src/NavList/NavList.docs.json

Co-authored-by: Tyler Jones <tylerjdev@github.com>

khiga8 commented Jun 25, 2024

View reviewed changes

packages/react/src/ActionList/Item.tsx Outdated Show resolved Hide resolved

khiga8 temporarily deployed to github-pages June 25, 2024 13:18 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4697 June 25, 2024 13:18 Inactive

khiga8 requested a review from TylerJDev June 25, 2024 13:23

khiga8 temporarily deployed to github-pages June 25, 2024 13:26 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4697 June 25, 2024 13:26 Inactive

TylerJDev reviewed Jun 25, 2024

View reviewed changes

packages/react/src/ActionList/Item.tsx Outdated Show resolved Hide resolved

TylerJDev reviewed Jun 25, 2024

View reviewed changes

packages/react/src/ActionList/Item.tsx Outdated Show resolved Hide resolved

khiga8 temporarily deployed to github-pages June 25, 2024 14:07 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4697 June 25, 2024 14:07 Inactive

TylerJDev reviewed Jun 25, 2024

View reviewed changes

khiga8 temporarily deployed to github-pages June 25, 2024 16:49 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4697 June 25, 2024 16:50 Inactive

khiga8 and others added 11 commits June 27, 2024 09:46

Update NavList to support TrailingAction

2a2f3c2

Update conditional in ActionList to allow NavList to set TrailingAction

2c9a5b1

add NavList.TrailingAction support

c3d3139

Update logic to not render for ActionMenu or SelectPanel

20d6c6b

Co-authored-by: Tyler Jones <tylerjdev@github.com>

Create tender-parrots-refuse.md

9105663

Fix syntax

81d330a

Wrap example with PageLayout

8cbd87f

Add subitem

cb6ff9b

Filter out TrailingAction

8de3535

Add test coverage

057ff7c

Move back to minimize diff

646110e

khiga8 force-pushed the add-trailing-action-to-nav-list branch from 2a0a687 to 646110e Compare June 27, 2024 13:46

khiga8 added 2 commits June 27, 2024 09:50

Add bad storybook example

46f8083

Update Story name

ca827ed

TylerJDev approved these changes Jun 27, 2024

View reviewed changes

khiga8 and others added 2 commits June 28, 2024 07:51

Update packages/react/src/NavList/NavList.docs.json

574080c

Co-authored-by: Tyler Jones <tylerjdev@github.com>

Fix description:

c2d3534

khiga8 temporarily deployed to github-pages June 28, 2024 11:55 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4697 June 28, 2024 11:56 Inactive

khiga8 added 3 commits June 28, 2024 07:57

Move to DevOnly

0ea3d9f

Change to minor

2cd3746

Update snapshots

27e01a8

khiga8 added the update snapshots label Jun 28, 2024

khiga8 deployed to github-pages June 28, 2024 12:05 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-4697 June 28, 2024 12:05 View deployment

github-actions bot removed the update snapshots label Jun 28, 2024

mperrotti approved these changes Jul 2, 2024

View reviewed changes

khiga8 added this pull request to the merge queue Jul 2, 2024

Merged via the queue into main with commit a7d1e4f Jul 2, 2024
30 checks passed

khiga8 deleted the add-trailing-action-to-nav-list branch July 2, 2024 13:38

primer bot mentioned this pull request Jul 2, 2024

Release tracking (36.25.0) #4713

Merged

LLotme mentioned this pull request Jul 31, 2024

[Snyk] Upgrade @primer/react from 36.24.0 to 36.25.0 LLotme/documentation#13

Merged

This was referenced Aug 2, 2024

[Snyk] Upgrade @primer/react from 36.20.0 to 36.25.0 OKEAMAH/documentation-1#5

Open

[Snyk] Upgrade @primer/react from 36.20.0 to 36.25.0 OKEAMAH/documentation-1#10

Open

LLotme mentioned this pull request Aug 10, 2024

[Snyk] Upgrade @primer/react from 36.25.0 to 36.26.0 LLotme/documentation#23

Merged

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @primer/react from 36.19.0 to 36.26.0 Playgirlkaybraz11/docs#2

Open

WontonSam mentioned this pull request Aug 16, 2024

[Snyk] Upgrade @primer/react from 35.32.2 to 36.27.0 WontonSam/documentation-1#51

Open

OKEAMAH mentioned this pull request Aug 17, 2024

[Snyk] Upgrade @primer/react from 36.18.0 to 36.27.0 https-github-com-okeamah/docs#1

Merged

Mapuppy09 mentioned this pull request Aug 19, 2024

[Snyk] Upgrade @primer/react from 36.22.0 to 36.27.0 Mapuppy09/documentation#3

Merged

sonukaloshiya mentioned this pull request Sep 4, 2024

[Snyk] Upgrade @primer/react from 36.23.0 to 36.27.0 sonukaloshiya/docs-1#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TrailingAction support to NavList #4697

Add TrailingAction support to NavList #4697

khiga8 commented Jun 25, 2024 •

edited

Loading

changeset-bot bot commented Jun 25, 2024 •

edited

Loading

github-actions bot commented Jun 25, 2024 •

edited

Loading

TylerJDev left a comment

TylerJDev Jun 25, 2024

khiga8 Jun 26, 2024

khiga8 Jun 27, 2024

TylerJDev Jun 25, 2024

khiga8 Jun 27, 2024

khiga8 commented Jun 25, 2024

TylerJDev left a comment

TylerJDev Jun 27, 2024

TylerJDev Jun 27, 2024


		export type NavListTrailingActionProps = ActionListTrailingActionProps

		const TrailingAction = ActionList.TrailingAction

Add TrailingAction support to NavList #4697

Add TrailingAction support to NavList #4697

Conversation

khiga8 commented Jun 25, 2024 • edited Loading

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Jun 25, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Jun 25, 2024 • edited Loading

size-limit report 📦

TylerJDev left a comment

Choose a reason for hiding this comment

TylerJDev Jun 25, 2024

Choose a reason for hiding this comment

khiga8 Jun 26, 2024

Choose a reason for hiding this comment

khiga8 Jun 27, 2024

Choose a reason for hiding this comment

TylerJDev Jun 25, 2024

Choose a reason for hiding this comment

khiga8 Jun 27, 2024

Choose a reason for hiding this comment

khiga8 commented Jun 25, 2024

TylerJDev left a comment

Choose a reason for hiding this comment

TylerJDev Jun 27, 2024

Choose a reason for hiding this comment

TylerJDev Jun 27, 2024

Choose a reason for hiding this comment

khiga8 commented Jun 25, 2024 •

edited

Loading

changeset-bot bot commented Jun 25, 2024 •

edited

Loading

github-actions bot commented Jun 25, 2024 •

edited

Loading