Adds loading state to ActionList items #4051

mperrotti · 2023-12-11T18:39:15Z

Relates to https://github.com/github/primer/issues/2681

Kapture.2023-12-11.at.13.38.49.mp4

Changelog

New

ActionList.item accepts loading prop

Changed

Removed

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 · 2023-12-11T18:39:19Z

🦋 Changeset detected

Latest commit: 2c2f814

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

mperrotti · 2023-12-11T18:39:30Z

This will be a draft until #3913 is merged

github-actions · 2023-12-11T18:41:57Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.25 KB (+0.16% 🔺)
packages/react/dist/browser.umd.js	91.51 KB (+0.19% 🔺)

…list-item

mperrotti · 2024-07-03T20:14:42Z

Updating snapshots since we updated the stories.

…tive items

…into mp/loading-actionlist-item

TylerJDev

I have two suggestions, but otherwise looks good!

TylerJDev · 2024-07-05T16:14:17Z

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

+export const WithLoadingItems: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" loading>


Now that we don't have loading for links, should this prop & story be removed from NavList? I noticed that this story wasn't working, and I think it's because all NavList.Item(s) utilize ActionList.LinkItem by default.

Thanks - I missed this one.

TylerJDev · 2024-07-05T16:25:24Z

packages/react/src/ActionList/Item.tsx

@@ -456,7 +428,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
              {slots.blockDescription}
            </Box>
          </ItemWrapper>
-          {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
+          {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
+          {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}


I think we might need to put this in the Box above so that it is referenced to via aria-labelledby, or we could include it in the aria-labelledby list and generate a unique ID for the VisuallyHidden component that we could add to the list.

Ahh ok I understand.

mperrotti temporarily deployed to github-pages December 11, 2023 18:43 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 December 11, 2023 18:44 Inactive

mperrotti temporarily deployed to github-pages December 11, 2023 18:53 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 December 11, 2023 18:53 Inactive

mperrotti added 2 commits December 12, 2023 09:43

adds loading state to inactive items

330d2ea

adds changeset

6906bec

mperrotti force-pushed the mp/loading-actionlist-item branch from b6b3884 to 6906bec Compare December 12, 2023 14:44

mperrotti marked this pull request as ready for review December 12, 2023 14:44

mperrotti requested review from a team and broccolinisoup December 12, 2023 14:44

mperrotti temporarily deployed to github-pages December 12, 2023 14:48 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 December 12, 2023 14:48 Inactive

mperrotti added the update snapshots label Dec 12, 2023

mperrotti requested a review from pksjce December 12, 2023 14:59

test(vrt): update snapshots

6fc5176

github-actions bot removed the update snapshots label Dec 12, 2023

primer bot temporarily deployed to github-pages December 12, 2023 15:09 Inactive

github-actions bot temporarily deployed to storybook-preview-4051 December 12, 2023 15:10 Inactive

Merge branch 'main' of github.com:primer/react into mp/loading-action…

26a4827

…list-item

mperrotti had a problem deploying to github-pages December 14, 2023 19:07 — with GitHub Actions Failure

Merge branch 'main' of github.com:primer/react into mp/loading-action…

52056a3

…list-item

mperrotti had a problem deploying to github-pages December 18, 2023 17:35 — with GitHub Actions Failure

Merge branch 'main' into mp/loading-actionlist-item

da33bd8

mperrotti temporarily deployed to github-pages December 18, 2023 20:45 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 December 18, 2023 20:45 Inactive

mperrotti added the update snapshots label Dec 18, 2023

test(vrt): update snapshots

a37edde

mperrotti temporarily deployed to github-pages July 3, 2024 19:51 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 July 3, 2024 19:51 Inactive

rm loading link item from feature story

5090548

mperrotti temporarily deployed to github-pages July 3, 2024 20:00 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 July 3, 2024 20:01 Inactive

mperrotti added the update snapshots label Jul 3, 2024

test(vrt): update snapshots

1a54bb6

github-actions bot removed the update snapshots label Jul 3, 2024

primer bot temporarily deployed to github-pages July 3, 2024 20:26 Inactive

github-actions bot temporarily deployed to storybook-preview-4051 July 3, 2024 20:27 Inactive

mperrotti added 2 commits July 3, 2024 16:55

rm 'default state test' assertion for ActionMenus w/ loading and inac…

91aadc0

…tive items

Merge branch 'mp/loading-actionlist-item' of github.com:primer/react …

38c6643

…into mp/loading-actionlist-item

mperrotti temporarily deployed to github-pages July 3, 2024 20:59 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4051 July 3, 2024 20:59 Inactive

TylerJDev approved these changes Jul 5, 2024

View reviewed changes

addresses last bit of PR feedback

2c2f814

mperrotti enabled auto-merge July 5, 2024 18:02

mperrotti deployed to github-pages July 5, 2024 18:07 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-4051 July 5, 2024 18:07 View deployment

mperrotti added this pull request to the merge queue Jul 5, 2024

Merged via the queue into main with commit 7e644b7 Jul 5, 2024
30 checks passed

mperrotti deleted the mp/loading-actionlist-item branch July 5, 2024 18:29

primer bot mentioned this pull request Jul 3, 2024

Release tracking (36.25.0) #4713

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

Mapuppy09 mentioned this pull request Aug 19, 2024

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds loading state to ActionList items #4051

Adds loading state to ActionList items #4051

mperrotti commented Dec 11, 2023 •

edited

Loading

changeset-bot bot commented Dec 11, 2023 •

edited

Loading

mperrotti commented Dec 11, 2023

github-actions bot commented Dec 11, 2023 •

edited

Loading

mperrotti commented Jul 3, 2024

TylerJDev left a comment

TylerJDev Jul 5, 2024

mperrotti Jul 5, 2024

TylerJDev Jul 5, 2024

mperrotti Jul 5, 2024

Adds loading state to ActionList items #4051

Adds loading state to ActionList items #4051

Conversation

mperrotti commented Dec 11, 2023 • edited Loading

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Dec 11, 2023 • edited Loading

🦋 Changeset detected

mperrotti commented Dec 11, 2023

github-actions bot commented Dec 11, 2023 • edited Loading

size-limit report 📦

mperrotti commented Jul 3, 2024

TylerJDev left a comment

Choose a reason for hiding this comment

TylerJDev Jul 5, 2024

Choose a reason for hiding this comment

mperrotti Jul 5, 2024

Choose a reason for hiding this comment

TylerJDev Jul 5, 2024

Choose a reason for hiding this comment

mperrotti Jul 5, 2024

Choose a reason for hiding this comment

mperrotti commented Dec 11, 2023 •

edited

Loading

changeset-bot bot commented Dec 11, 2023 •

edited

Loading

github-actions bot commented Dec 11, 2023 •

edited

Loading