diff --git a/.changeset/lucky-squids-happen.md b/.changeset/lucky-squids-happen.md new file mode 100644 index 00000000000..51cc29a5ac5 --- /dev/null +++ b/.changeset/lucky-squids-happen.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Adds a loading state to ActionList items. Also allows the Spinner component to accept screenreader text. + + diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png index 1d84bd10f8f..78bcafea137 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png index a253a59e487..4ef9b156f59 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png index 114b00e3a98..0dddcff3a41 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png index 1d84bd10f8f..b37da39acdb 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png index 1d84bd10f8f..78bcafea137 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png index ada03906c18..43a1f22cac9 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png index d022a52fba9..3f08177d8f4 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png index 24db9886990..ac570cf2ec3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png index ada03906c18..43a1f22cac9 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Item-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-colorblind-linux.png new file mode 100644 index 00000000000..e078f8adcfe Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-dimmed-linux.png new file mode 100644 index 00000000000..bf3cfb84ee8 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-high-contrast-linux.png new file mode 100644 index 00000000000..23b962da477 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-linux.png new file mode 100644 index 00000000000..da163c110e0 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e078f8adcfe Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-colorblind-linux.png new file mode 100644 index 00000000000..79bd8b28598 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-high-contrast-linux.png new file mode 100644 index 00000000000..b71ee993bb7 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-linux.png new file mode 100644 index 00000000000..a27b2d9fea1 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-tritanopia-linux.png new file mode 100644 index 00000000000..79bd8b28598 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Loading-Item-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png index 3dc736f1241..c823c882334 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png index 5e78010f54f..e2c337222e4 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png index 3dc736f1241..5dd7110cf7b 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png index 395f7075559..62930acab9d 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png index 975612bb1cd..2461195a2d7 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png index 43337681c51..9641e143816 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png index 4f6f5ac9f9a..95b2c6797e1 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png index 5e78010f54f..e2c337222e4 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png index 1ef2b16eecf..07a925529aa 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png index 5e78010f54f..e2c337222e4 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png index 1f318c865e4..e9a9351765c 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png index e3148bbeb25..bfbf4b39e93 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png index 730a4322a64..057ae21001c 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png index b5a2167757b..e686461d8d5 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png index 2d514d82d01..4482e390a6a 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png index e3148bbeb25..bfbf4b39e93 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png index 1f318c865e4..e9a9351765c 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png index e3148bbeb25..bfbf4b39e93 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-default-vrt-1-linux.png new file mode 100644 index 00000000000..918ff29dc79 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..af77e086c12 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-default-vrt-1-linux.png new file mode 100644 index 00000000000..918ff29dc79 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-default-vrt-1-linux.png new file mode 100644 index 00000000000..e2f94151513 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..d57ef3dc739 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-default-vrt-1-linux.png new file mode 100644 index 00000000000..a0c4b7f5bdd Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9cbefc6f1ed Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png new file mode 100644 index 00000000000..37fd1431f1f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-default-vrt-1-linux.png new file mode 100644 index 00000000000..918ff29dc79 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..af77e086c12 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-default-vrt-1-linux.png new file mode 100644 index 00000000000..3b886c8ebf9 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..56db03d54c1 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-default-vrt-1-linux.png new file mode 100644 index 00000000000..3b886c8ebf9 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-default-vrt-1-linux.png new file mode 100644 index 00000000000..896258ff306 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..ca414be29c8 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png new file mode 100644 index 00000000000..d6342f1e6d7 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-default-vrt-1-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-default-vrt-1-linux.png new file mode 100644 index 00000000000..3b886c8ebf9 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-default-vrt-1-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..56db03d54c1 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-colorblind-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-colorblind-linux.png index 741d01c3a94..b8bc1aaac59 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-colorblind-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-dimmed-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-dimmed-linux.png index 5209f300f12..679d80e71e6 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-dimmed-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-high-contrast-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-high-contrast-linux.png index 2d8c2a019ec..b7fa203baa5 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-linux.png index 741d01c3a94..b8bc1aaac59 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-tritanopia-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-tritanopia-linux.png index 741d01c3a94..b8bc1aaac59 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-colorblind-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-colorblind-linux.png index e831bab1c39..8a255e431d6 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-colorblind-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-high-contrast-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-high-contrast-linux.png index c2031e0a837..128475af6ae 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-high-contrast-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-linux.png index e831bab1c39..c5c806ab29d 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-linux.png differ diff --git a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-tritanopia-linux.png b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-tritanopia-linux.png index e831bab1c39..8a255e431d6 100644 Binary files a/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-tritanopia-linux.png and b/.playwright/snapshots/components/ToggleSwitch.test.ts-snapshots/ToggleSwitch-Loading-light-tritanopia-linux.png differ diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts index 7fef2326cc3..69dd0010c15 100644 --- a/e2e/components/ActionList.test.ts +++ b/e2e/components/ActionList.test.ts @@ -515,6 +515,36 @@ test.describe('ActionList', () => { } }) + test.describe('Loading Item', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--loading-item', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionList.Loading Item.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--loading-item', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + test.describe('Group With Filled Title', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts index 452a26164bc..17da8466c54 100644 --- a/e2e/components/ActionMenu.test.ts +++ b/e2e/components/ActionMenu.test.ts @@ -100,6 +100,36 @@ test.describe('ActionMenu', () => { } }) + test.describe('Loading Items', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-actionmenu-features--loading-items', + globals: { + colorScheme: theme, + }, + }) + + // Open menu + await page.locator('button', {hasText: 'Open menu'}).waitFor() + await page.getByRole('button', {name: 'Open menu'}).click() + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot() + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-actionmenu-features--loading-items', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + test.describe('Multi Select', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index f80485534bc..d57c2817ac7 100644 --- a/packages/react/src/ActionList/ActionList.docs.json +++ b/packages/react/src/ActionList/ActionList.docs.json @@ -89,6 +89,11 @@ "defaultValue": "", "description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. \nIf there is a leading visual, the alert icon will replace the leading visual. \n If there is a trailing visual, it will replace the trailing visual.\n If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. \nText will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items." }, + { + "name": "loading", + "type": "boolean", + "description": "Whether the item is loading." + }, { "name": "role", "type": "AriaRole", diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx index a55a043cef6..1b3b2981c2d 100644 --- a/packages/react/src/ActionList/ActionList.examples.stories.tsx +++ b/packages/react/src/ActionList/ActionList.examples.stories.tsx @@ -456,6 +456,7 @@ export function AllCombinations(): JSX.Element { + {/* Inactive items */} L + B + TBlock description @@ -493,6 +494,44 @@ export function AllCombinations(): JSX.Element { + {/* Loading items */} + + L + B + TBlock description + + + L + B + TInline description + + + + + + L + I + Tinline description + + + + + + + + + L + B + TBlock description + + + + + + L + B + TBlock description + + + + + + I + B + Tinline description + Block description + + + + diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx index 3f23e88166b..42f50eac08e 100644 --- a/packages/react/src/ActionList/ActionList.features.stories.tsx +++ b/packages/react/src/ActionList/ActionList.features.stories.tsx @@ -442,6 +442,19 @@ export const InactiveItem = () => { ) } +export const LoadingItem = () => { + return ( + + {projects.map((project, index) => ( + + {project.name} + {project.scope} + + ))} + + ) +} + export const Links = () => ( <> diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx index fed8618d822..5e77aab1b4a 100644 --- a/packages/react/src/ActionList/ActionList.stories.tsx +++ b/packages/react/src/ActionList/ActionList.stories.tsx @@ -141,6 +141,11 @@ ItemPlayground.argTypes = { }, options: icons, }, + loading: { + control: { + type: 'boolean', + }, + }, trailingVisual: { control: { type: 'select', @@ -164,6 +169,7 @@ ItemPlayground.args = { variant: 'default', id: 'item-1', leadingVisual: null, + loading: false, trailingVisual: null, selectionVariant: 'single', } @@ -216,6 +222,7 @@ LinkItemPlayground.args = { id: 'item-1', inactiveText: '', leadingVisual: null, + loading: false, trailingVisual: null, } LinkItemPlayground.argTypes = { @@ -241,6 +248,11 @@ LinkItemPlayground.argTypes = { }, options: icons, }, + loading: { + control: { + type: 'boolean', + }, + }, trailingVisual: { control: { type: 'select', diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 9c5c4afe14f..4e47d219758 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -35,6 +35,13 @@ const projects = [ {name: 'Primer React', scope: 'github/primer'}, {name: 'Disabled Project', scope: 'github/primer', disabled: true}, {name: 'Inactive Project', scope: 'github/primer', inactiveText: 'Unavailable due to an outage'}, + {name: 'Loading Project', scope: 'github/primer', loading: true}, + { + name: 'Inactive and Loading Project', + scope: 'github/primer', + loading: true, + inactiveText: 'Unavailable due to an outage, but loading still passed', + }, ] function SingleSelectListStory(): JSX.Element { const [selectedIndex, setSelectedIndex] = React.useState(0) @@ -49,6 +56,7 @@ function SingleSelectListStory(): JSX.Element { onSelect={() => setSelectedIndex(index)} disabled={project.disabled} inactiveText={project.inactiveText} + loading={project.loading} > {project.name} @@ -145,6 +153,24 @@ describe('ActionList', () => { expect(options[3]).toHaveAttribute('aria-selected', 'false') }) + it('should skip onSelect on loading items', async () => { + const component = HTMLRender() + const options = await waitFor(() => component.getAllByRole('option')) + + expect(options[0]).toHaveAttribute('aria-selected', 'true') + expect(options[4]).toHaveAttribute('aria-selected', 'false') + + fireEvent.click(options[4]) + + expect(options[0]).toHaveAttribute('aria-selected', 'true') + expect(options[4]).toHaveAttribute('aria-selected', 'false') + + fireEvent.keyPress(options[3], {key: 'Enter', charCode: 13}) + + expect(options[0]).toHaveAttribute('aria-selected', 'true') + expect(options[4]).toHaveAttribute('aria-selected', 'false') + }) + it('should throw when selected is provided without a selectionVariant on parent', async () => { // we expect console.error to be called, so we suppress that in the test const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn()) @@ -178,10 +204,20 @@ describe('ActionList', () => { it('should focus the button around the leading visual when tabbing to an inactive item', async () => { const component = HTMLRender() - const inactiveOptionButton = await waitFor(() => - component.getByRole('button', {description: projects[3].inactiveText}), - ) - const inactiveIndex = projects.findIndex(project => 'inactiveText' in project) + const inactiveOptionButton = await waitFor(() => component.getByRole('button', {name: projects[3].inactiveText})) + const inactiveIndex = projects.findIndex(project => project.inactiveText === projects[3].inactiveText) + + for (let i = 0; i < inactiveIndex; i++) { + await userEvent.tab() + } + + expect(inactiveOptionButton).toHaveFocus() + }) + + it('should behave as inactive if both inactiveText and loading props are passed', async () => { + const component = HTMLRender() + const inactiveOptionButton = await waitFor(() => component.getByRole('button', {name: projects[5].inactiveText})) + const inactiveIndex = projects.findIndex(project => project.inactiveText === projects[5].inactiveText) for (let i = 0; i < inactiveIndex; i++) { await userEvent.tab() diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index b1551d0028b..d0fc3ed733e 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -1,10 +1,7 @@ import React from 'react' import styled from 'styled-components' -import {AlertIcon} from '@primer/octicons-react' import Box from '../Box' -import type {TooltipProps} from '../TooltipV2/Tooltip' -import {Tooltip} from '../TooltipV2/Tooltip' import {useId} from '../hooks/useId' import {useSlots} from '../hooks/useSlots' import type {BetterSystemStyleObject, SxProp} from '../sx' @@ -17,42 +14,16 @@ import {Description} from './Description' import {GroupContext} from './Group' import type {ActionListItemProps, ActionListProps} from './shared' import {Selection} from './Selection' +import {LeadingVisual, TrailingVisual, VisualOrIndicator} from './Visuals' import {getVariantStyles, ItemContext, TEXT_ROW_HEIGHT, ListContext} from './shared' -import type {VisualProps} from './Visuals' -import {LeadingVisual, TrailingVisual} from './Visuals' import {TrailingAction} from './TrailingAction' import {ConditionalWrapper} from '../internal/components/ConditionalWrapper' import {invariant} from '../utils/invariant' import {useFeatureFlag} from '../FeatureFlags' +import VisuallyHidden from '../_VisuallyHidden' const LiBox = styled.li(sx) -const InactiveIndicator: React.FC<{ - labelId: string - text: TooltipProps['text'] - visualComponent: React.FC> -}> = ({labelId, text, visualComponent: VisualComponent}) => ( - - - - - - - -) - export const Item = React.forwardRef( ( { @@ -65,6 +36,7 @@ export const Item = React.forwardRef( sx: sxProp = defaultSxProp, id, role, + loading, _PrivateItemWrapper, ...props }, @@ -199,8 +171,11 @@ export const Item = React.forwardRef( marginX: listVariant === 'inset' && !buttonSemantics ? 2 : 0, borderRadius: 2, transition: 'background 33.333ms linear', - color: getVariantStyles(variant, disabled, inactive).color, + color: getVariantStyles(variant, disabled, inactive || loading).color, cursor: 'pointer', + '&[data-loading]': { + cursor: 'default', + }, '&[aria-disabled], &[data-inactive]': { cursor: 'not-allowed', '[data-component="ActionList.Checkbox"]': { @@ -220,9 +195,9 @@ export const Item = React.forwardRef( marginY: 'unset', '@media (hover: hover) and (pointer: fine)': { - ':hover:not([aria-disabled]):not([data-inactive])': { + ':hover:not([aria-disabled]):not([data-inactive]):not([data-loading])': { backgroundColor: `actionListItem.${variant}.hoverBg`, - color: getVariantStyles(variant, disabled, inactive).hoverColor, + color: getVariantStyles(variant, disabled, inactive || loading).hoverColor, boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`, }, '&:focus-visible, > a.focus-visible, &:focus.focus-visible': { @@ -230,9 +205,9 @@ export const Item = React.forwardRef( border: `2 solid`, boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`, }, - ':active:not([aria-disabled]):not([data-inactive])': { + ':active:not([aria-disabled]):not([data-inactive]):not([data-loading])': { backgroundColor: `actionListItem.${variant}.activeBg`, - color: getVariantStyles(variant, disabled, inactive).hoverColor, + color: getVariantStyles(variant, disabled, inactive || loading).hoverColor, }, }, @@ -263,11 +238,11 @@ export const Item = React.forwardRef( // hide divider after dividers & group header, with higher importance! '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'}, // hide border on current and previous item - '&:hover:not([aria-disabled]):not([data-inactive]), &:focus:not([aria-disabled]):not([data-inactive]), &[data-focus-visible-added]:not([aria-disabled]):not([data-inactive])': + '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), &:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), &[data-focus-visible-added]:not([aria-disabled]):not([data-inactive])': { '--divider-color': 'transparent', }, - '&:hover:not([aria-disabled]):not([data-inactive]) + &, &[data-focus-visible-added] + li': { + '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + &, &[data-focus-visible-added] + li': { '--divider-color': 'transparent', }, ...(active ? activeStyles : {}), @@ -275,15 +250,15 @@ export const Item = React.forwardRef( const clickHandler = React.useCallback( (event: React.MouseEvent) => { - if (disabled || inactive) return + if (disabled || inactive || loading) return onSelect(event, afterSelect) }, - [onSelect, disabled, inactive, afterSelect], + [onSelect, disabled, inactive, afterSelect, loading], ) const keyPressHandler = React.useCallback( (event: React.KeyboardEvent) => { - if (disabled || inactive) return + if (disabled || inactive || loading) return if ([' ', 'Enter'].includes(event.key)) { if (event.key === ' ') { event.preventDefault() // prevent scrolling on Space @@ -294,7 +269,7 @@ export const Item = React.forwardRef( onSelect(event, afterSelect) } }, - [onSelect, disabled, inactive, afterSelect], + [onSelect, disabled, loading, inactive, afterSelect], ) const itemId = useId(id) @@ -332,6 +307,7 @@ export const Item = React.forwardRef( onKeyPress: keyPressHandler, 'aria-disabled': disabled ? true : undefined, 'data-inactive': inactive ? true : undefined, + 'data-loading': loading && !inactive ? true : undefined, tabIndex: disabled || showInactiveIndicator ? undefined : 0, 'aria-labelledby': `${labelId} ${slots.inlineDescription ? inlineDescriptionId : ''}`, 'aria-describedby': slots.blockDescription @@ -383,25 +359,25 @@ export const Item = React.forwardRef( > - { - // If we're showing an inactive indicator and a leading visual has been passed, - // replace the leading visual with the inactive indicator. - // - // Inactive items without a leading visual place the inactive indicator in the - // trailing visual slot. This preserves the left alignment of item text. - showInactiveIndicator && slots.leadingVisual ? ( - - ) : ( - // If it's not inactive, just render the leading visual slot - slots.leadingVisual - ) - } + + {slots.leadingVisual} + ( }} > {childrenWithoutSlots} + {/* Loading message needs to be in here so it is read with the label */} + {loading === true && Loading} {slots.inlineDescription} - { - // If we're showing an inactive indicator and a leading visual has NOT been passed, - // replace the trailing visual with the inactive indicator. - // - // This preserves the left alignment of item text. - showInactiveIndicator && !slots.leadingVisual ? ( - - ) : ( - // If it's not inactive, or it has a leading visual that can be replaced, - // just render the trailing visual slot. - trailingVisual - ) - } + + {trailingVisual} + { // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel), @@ -456,7 +430,7 @@ export const Item = React.forwardRef( {slots.blockDescription} - {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction} + {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction} ) diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx index 215cbaac74a..c878a821d1b 100644 --- a/packages/react/src/ActionList/LinkItem.tsx +++ b/packages/react/src/ActionList/LinkItem.tsx @@ -20,7 +20,7 @@ type LinkProps = { referrerPolicy?: React.AnchorHTMLAttributes['referrerPolicy'] } -// LinkItem does not support selected, variants, etc. +// LinkItem does not support selected, loading, variants, etc. export type ActionListLinkItemProps = Pick & LinkProps diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx index 5ec5e6f61f3..b207da08419 100644 --- a/packages/react/src/ActionList/Visuals.tsx +++ b/packages/react/src/ActionList/Visuals.tsx @@ -1,9 +1,12 @@ import React from 'react' +import {AlertIcon} from '@primer/octicons-react' import Box from '../Box' +import Spinner from '../Spinner' import {get} from '../constants' import type {SxProp} from '../sx' import {merge} from '../sx' import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared' +import {Tooltip, type TooltipProps} from '../TooltipV2' export type VisualProps = SxProp & React.HTMLAttributes @@ -77,3 +80,56 @@ export const TrailingVisual: React.FC> = ({ ) } + +// VisualOrIndicator handles the positioning of indicators and determines whether to show a visual or an indicator. +// +// If we're showing an *inactive* or *loading* indicator and a leading visual has NOT been passed, +// replace the trailing visual with the inactive indicator. +// +// This preserves the left alignment of item text. +export const VisualOrIndicator: React.FC< + React.PropsWithChildren<{ + inactiveText?: TooltipProps['text'] + itemHasLeadingVisual: boolean + labelId?: string + loading?: boolean + position: 'leading' | 'trailing' + }> +> = ({children, labelId, loading, inactiveText, itemHasLeadingVisual, position}) => { + const VisualComponent = position === 'leading' ? LeadingVisual : TrailingVisual + + if (!loading && !inactiveText) return children + + if ( + (itemHasLeadingVisual && position === 'trailing') || // has a leading visual, and it's in the trailing position, or + (!itemHasLeadingVisual && position === 'leading') // it doesn't have a leading visual, and it's in the leading position + ) { + // => so we don't render the indicator here + return children + } + + return inactiveText ? ( + + + + + + + + ) : ( + + + + ) +} diff --git a/packages/react/src/ActionList/shared.ts b/packages/react/src/ActionList/shared.ts index 44fe91b3a84..e558660039b 100644 --- a/packages/react/src/ActionList/shared.ts +++ b/packages/react/src/ActionList/shared.ts @@ -44,6 +44,10 @@ export type ActionListItemProps = { * is unavailable due to a system error such as a database outage. */ inactiveText?: string + /** + * Whether the item is loading + */ + loading?: boolean /** * Private API for use internally only. Used by LinkItem to wrap contents in an anchor */ diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx index ff7ea0c382c..7913ed14af2 100644 --- a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx @@ -195,6 +195,55 @@ export const InactiveItems = () => ( ) +export const LoadingItems = () => ( + + Open menu + + + alert('Workflows clicked')} loading> + Workflows + + + + + alert('Archived items clicked')} loading> + Archived items + + + + + alert('Make a copy clicked')} loading> + Make a copy + + + + + + + + What's new + + + + + + Give feedback + + + + + + GitHub Docs + + + + + + + + +) + export const Submenus = () => ( Edit diff --git a/packages/react/src/NavList/NavList.stories.tsx b/packages/react/src/NavList/NavList.stories.tsx index 7603d6082d5..97403ba9d2d 100644 --- a/packages/react/src/NavList/NavList.stories.tsx +++ b/packages/react/src/NavList/NavList.stories.tsx @@ -225,7 +225,7 @@ export const WithInactiveItems: StoryFn = () => ( ) -export const WithGroup = () => ( +export const WithGroup: StoryFn = () => ( diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index 780e5632073..759ad681045 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -75,6 +75,10 @@ exports[`NavList renders a simple list 1`] = ` background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } +.c2[data-loading] { + cursor: default; +} + .c2[aria-disabled], .c2[data-inactive] { cursor: not-allowed; @@ -110,13 +114,13 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: transparent !important; } -.c2:hover:not([aria-disabled]):not([data-inactive]), -.c2:focus:not([aria-disabled]):not([data-inactive]), +.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c2:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c2:hover:not([aria-disabled]):not([data-inactive]) + .c1, +.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1, .c2[data-focus-visible-added] + li { --divider-color: transparent; } @@ -164,6 +168,10 @@ exports[`NavList renders a simple list 1`] = ` margin-bottom: unset; } +.c7[data-loading] { + cursor: default; +} + .c7[aria-disabled], .c7[data-inactive] { cursor: not-allowed; @@ -199,13 +207,13 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: transparent !important; } -.c7:hover:not([aria-disabled]):not([data-inactive]), -.c7:focus:not([aria-disabled]):not([data-inactive]), +.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c7:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c7:hover:not([aria-disabled]):not([data-inactive]) + .c1, +.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1, .c7[data-focus-visible-added] + li { --divider-color: transparent; } @@ -264,7 +272,7 @@ exports[`NavList renders a simple list 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c2:hover:not([aria-disabled]):not([data-inactive]) { + .c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -278,7 +286,7 @@ exports[`NavList renders a simple list 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c2:active:not([aria-disabled]):not([data-inactive]) { + .c2:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -293,7 +301,7 @@ exports[`NavList renders a simple list 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c7:hover:not([aria-disabled]):not([data-inactive]) { + .c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -307,7 +315,7 @@ exports[`NavList renders a simple list 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c7:active:not([aria-disabled]):not([data-inactive]) { + .c7:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -515,6 +523,10 @@ exports[`NavList renders with groups 1`] = ` background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } +.c6[data-loading] { + cursor: default; +} + .c6[aria-disabled], .c6[data-inactive] { cursor: not-allowed; @@ -550,13 +562,13 @@ exports[`NavList renders with groups 1`] = ` --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]):not([data-inactive]), -.c6:focus:not([aria-disabled]):not([data-inactive]), +.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c6:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c6[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c6:hover:not([aria-disabled]):not([data-inactive]) + .c5, +.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c5, .c6[data-focus-visible-added] + li { --divider-color: transparent; } @@ -604,6 +616,10 @@ exports[`NavList renders with groups 1`] = ` margin-bottom: unset; } +.c11[data-loading] { + cursor: default; +} + .c11[aria-disabled], .c11[data-inactive] { cursor: not-allowed; @@ -639,13 +655,13 @@ exports[`NavList renders with groups 1`] = ` --divider-color: transparent !important; } -.c11:hover:not([aria-disabled]):not([data-inactive]), -.c11:focus:not([aria-disabled]):not([data-inactive]), +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c11:hover:not([aria-disabled]):not([data-inactive]) + .c5, +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c5, .c11[data-focus-visible-added] + li { --divider-color: transparent; } @@ -704,7 +720,7 @@ exports[`NavList renders with groups 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c6:hover:not([aria-disabled]):not([data-inactive]) { + .c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -718,7 +734,7 @@ exports[`NavList renders with groups 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c6:active:not([aria-disabled]):not([data-inactive]) { + .c6:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -733,7 +749,7 @@ exports[`NavList renders with groups 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c11:hover:not([aria-disabled]):not([data-inactive]) { + .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -747,7 +763,7 @@ exports[`NavList renders with groups 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c11:active:not([aria-disabled]):not([data-inactive]) { + .c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -947,7 +963,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c15:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c15[data-focus-visible-added] + li { --divider-color: transparent; } @@ -986,6 +1002,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } +.c11[data-loading] { + cursor: default; +} + .c11[aria-disabled], .c11[data-inactive] { cursor: not-allowed; @@ -1021,13 +1041,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c11:hover:not([aria-disabled]):not([data-inactive]), -.c11:focus:not([aria-disabled]):not([data-inactive]), +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c11:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c11[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1075,6 +1095,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 600; } +.c4[data-loading] { + cursor: default; +} + .c4[aria-disabled], .c4[data-inactive] { cursor: not-allowed; @@ -1110,13 +1134,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c4:hover:not([aria-disabled]):not([data-inactive]), -.c4:focus:not([aria-disabled]):not([data-inactive]), +.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c4:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c4:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c4[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1185,7 +1209,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } @media (hover:hover) and (pointer:fine) { - .c11:hover:not([aria-disabled]):not([data-inactive]) { + .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -1199,7 +1223,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c11:active:not([aria-disabled]):not([data-inactive]) { + .c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -1214,7 +1238,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } @media (hover:hover) and (pointer:fine) { - .c4:hover:not([aria-disabled]):not([data-inactive]) { + .c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -1228,7 +1252,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c4:active:not([aria-disabled]):not([data-inactive]) { + .c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -1411,7 +1435,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c14:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c14[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1450,6 +1474,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } +.c11[data-loading] { + cursor: default; +} + .c11[aria-disabled], .c11[data-inactive] { cursor: not-allowed; @@ -1485,13 +1513,13 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c11:hover:not([aria-disabled]):not([data-inactive]), -.c11:focus:not([aria-disabled]):not([data-inactive]), +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c11:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c11[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1511,7 +1539,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c15:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c15[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1549,6 +1577,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24))); } +.c4[data-loading] { + cursor: default; +} + .c4[aria-disabled], .c4[data-inactive] { cursor: not-allowed; @@ -1584,13 +1616,13 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t --divider-color: transparent !important; } -.c4:hover:not([aria-disabled]):not([data-inactive]), -.c4:focus:not([aria-disabled]):not([data-inactive]), +.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c4:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c4:hover:not([aria-disabled]):not([data-inactive]) + .c3, +.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3, .c4[data-focus-visible-added] + li { --divider-color: transparent; } @@ -1670,7 +1702,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t } @media (hover:hover) and (pointer:fine) { - .c11:hover:not([aria-disabled]):not([data-inactive]) { + .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -1684,7 +1716,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c11:active:not([aria-disabled]):not([data-inactive]) { + .c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -1707,7 +1739,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t } @media (hover:hover) and (pointer:fine) { - .c4:hover:not([aria-disabled]):not([data-inactive]) { + .c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -1721,7 +1753,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c4:active:not([aria-disabled]):not([data-inactive]) { + .c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index b6bccde352f..d7617f79b62 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -738,6 +738,10 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = margin-bottom: unset; } +.c3[data-loading] { + cursor: default; +} + .c3[aria-disabled], .c3[data-inactive] { cursor: not-allowed; @@ -773,13 +777,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]):not([data-inactive]), -.c3:focus:not([aria-disabled]):not([data-inactive]), +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c3:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c3[data-focus-visible-added] + li { --divider-color: transparent; } @@ -788,13 +792,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c10[data-focus-visible-added] + li { --divider-color: transparent; } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]):not([data-inactive]) { + .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -808,7 +812,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c3:active:not([aria-disabled]):not([data-inactive]) { + .c3:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -1511,6 +1515,10 @@ exports[`snapshots renders a multiselect input 1`] = ` margin-bottom: unset; } +.c3[data-loading] { + cursor: default; +} + .c3[aria-disabled], .c3[data-inactive] { cursor: not-allowed; @@ -1546,19 +1554,19 @@ exports[`snapshots renders a multiselect input 1`] = ` --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]):not([data-inactive]), -.c3:focus:not([aria-disabled]):not([data-inactive]), +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c3:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c3[data-focus-visible-added] + li { --divider-color: transparent; } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]):not([data-inactive]) { + .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -1572,7 +1580,7 @@ exports[`snapshots renders a multiselect input 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c3:active:not([aria-disabled]):not([data-inactive]) { + .c3:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -2256,6 +2264,10 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` margin-bottom: unset; } +.c3[data-loading] { + cursor: default; +} + .c3[aria-disabled], .c3[data-inactive] { cursor: not-allowed; @@ -2291,13 +2303,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]):not([data-inactive]), -.c3:focus:not([aria-disabled]):not([data-inactive]), +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c3:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c3[data-focus-visible-added] + li { --divider-color: transparent; } @@ -2334,6 +2346,10 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` margin-bottom: unset; } +.c8[data-loading] { + cursor: default; +} + .c8[aria-disabled], .c8[data-inactive] { cursor: not-allowed; @@ -2369,19 +2385,19 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` --divider-color: transparent !important; } -.c8:hover:not([aria-disabled]):not([data-inactive]), -.c8:focus:not([aria-disabled]):not([data-inactive]), +.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c8:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c8[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c8:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c8[data-focus-visible-added] + li { --divider-color: transparent; } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]):not([data-inactive]) { + .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -2395,7 +2411,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c3:active:not([aria-disabled]):not([data-inactive]) { + .c3:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -2410,7 +2426,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c8:hover:not([aria-disabled]):not([data-inactive]) { + .c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -2424,7 +2440,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c8:active:not([aria-disabled]):not([data-inactive]) { + .c8:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -3024,6 +3040,10 @@ exports[`snapshots renders a single select input 1`] = ` margin-bottom: unset; } +.c3[data-loading] { + cursor: default; +} + .c3[aria-disabled], .c3[data-inactive] { cursor: not-allowed; @@ -3059,19 +3079,19 @@ exports[`snapshots renders a single select input 1`] = ` --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]):not([data-inactive]), -.c3:focus:not([aria-disabled]):not([data-inactive]), +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c3:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c3[data-focus-visible-added] + li { --divider-color: transparent; } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]):not([data-inactive]) { + .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -3085,7 +3105,7 @@ exports[`snapshots renders a single select input 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c3:active:not([aria-disabled]):not([data-inactive]) { + .c3:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } @@ -3491,6 +3511,10 @@ exports[`snapshots renders with a custom text input component 1`] = ` margin-bottom: unset; } +.c3[data-loading] { + cursor: default; +} + .c3[aria-disabled], .c3[data-inactive] { cursor: not-allowed; @@ -3526,19 +3550,19 @@ exports[`snapshots renders with a custom text input component 1`] = ` --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]):not([data-inactive]), -.c3:focus:not([aria-disabled]):not([data-inactive]), +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), +.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } -.c3:hover:not([aria-disabled]):not([data-inactive]) + .c2, +.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2, .c3[data-focus-visible-added] + li { --divider-color: transparent; } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]):not([data-inactive]) { + .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent)); @@ -3552,7 +3576,7 @@ exports[`snapshots renders with a custom text input component 1`] = ` box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da)); } - .c3:active:not([aria-disabled]):not([data-inactive]) { + .c3:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) { background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); }