diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png new file mode 100644 index 00000000000..b5dac8804bf Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png new file mode 100644 index 00000000000..726c00c29d2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7783a492154 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png new file mode 100644 index 00000000000..b5dac8804bf Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b5dac8804bf Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png new file mode 100644 index 00000000000..127e8b2af7b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png new file mode 100644 index 00000000000..4eea763fb04 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png new file mode 100644 index 00000000000..127e8b2af7b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png new file mode 100644 index 00000000000..127e8b2af7b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-colorblind-linux.png new file mode 100644 index 00000000000..b46b064a927 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-dimmed-linux.png new file mode 100644 index 00000000000..df52e4afe9d Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-high-contrast-linux.png new file mode 100644 index 00000000000..68f95efbe88 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-linux.png new file mode 100644 index 00000000000..b46b064a927 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b46b064a927 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-colorblind-linux.png new file mode 100644 index 00000000000..6100f47637e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-high-contrast-linux.png new file mode 100644 index 00000000000..0ec0798a310 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-linux.png new file mode 100644 index 00000000000..6100f47637e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-tritanopia-linux.png new file mode 100644 index 00000000000..6100f47637e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Default-Empty-State-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png new file mode 100644 index 00000000000..cdd313a56d0 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-dimmed-linux.png new file mode 100644 index 00000000000..dbf6ec5ecc5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c2c239ba0b2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-linux.png new file mode 100644 index 00000000000..d3446d125f2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d3446d125f2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-colorblind-linux.png new file mode 100644 index 00000000000..1edd6524c6e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-high-contrast-linux.png new file mode 100644 index 00000000000..7f5a34af831 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-linux.png new file mode 100644 index 00000000000..f1f226a58ba Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-tritanopia-linux.png new file mode 100644 index 00000000000..f1f226a58ba Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-colorblind-linux.png new file mode 100644 index 00000000000..02e8c3682a3 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-dimmed-linux.png new file mode 100644 index 00000000000..112b1d8a0a4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ddd5db5801e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-linux.png new file mode 100644 index 00000000000..02e8c3682a3 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-tritanopia-linux.png new file mode 100644 index 00000000000..02e8c3682a3 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-colorblind-linux.png new file mode 100644 index 00000000000..20511ea41ac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-high-contrast-linux.png new file mode 100644 index 00000000000..bdac4b30988 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-linux.png new file mode 100644 index 00000000000..20511ea41ac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-tritanopia-linux.png new file mode 100644 index 00000000000..20511ea41ac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Radio-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-colorblind-linux.png new file mode 100644 index 00000000000..0d14d306522 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-dimmed-linux.png new file mode 100644 index 00000000000..306f6db9908 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png new file mode 100644 index 00000000000..e3b5f3d5324 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png new file mode 100644 index 00000000000..13947bf497e Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-tritanopia-linux.png new file mode 100644 index 00000000000..0d14d306522 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-colorblind-linux.png new file mode 100644 index 00000000000..ec7269a93ec Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-high-contrast-linux.png new file mode 100644 index 00000000000..9445e893f77 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-linux.png new file mode 100644 index 00000000000..ec7269a93ec Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-tritanopia-linux.png new file mode 100644 index 00000000000..4f789477c0c Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-colorblind-linux.png new file mode 100644 index 00000000000..cfbb7e0d9e0 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-dimmed-linux.png new file mode 100644 index 00000000000..81f10faf758 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d7bbd757e1b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-linux.png new file mode 100644 index 00000000000..cfbb7e0d9e0 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cfbb7e0d9e0 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-colorblind-linux.png new file mode 100644 index 00000000000..3493594f1c1 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-high-contrast-linux.png new file mode 100644 index 00000000000..1d2aa6331cc Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-linux.png new file mode 100644 index 00000000000..3493594f1c1 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-tritanopia-linux.png new file mode 100644 index 00000000000..3493594f1c1 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Single-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-colorblind-linux.png new file mode 100644 index 00000000000..bff95c553b4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-dimmed-linux.png new file mode 100644 index 00000000000..23c83cc6633 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7194bb47fe7 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-linux.png new file mode 100644 index 00000000000..bff95c553b4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-tritanopia-linux.png new file mode 100644 index 00000000000..bff95c553b4 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-colorblind-linux.png new file mode 100644 index 00000000000..b6fe08f7d67 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-high-contrast-linux.png new file mode 100644 index 00000000000..560ba2f3073 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-linux.png new file mode 100644 index 00000000000..b6fe08f7d67 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-tritanopia-linux.png new file mode 100644 index 00000000000..b6fe08f7d67 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Virtualized-List-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..4d614ebea32 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..67f50a0aa7f Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5e77932efad Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-linux.png new file mode 100644 index 00000000000..4d614ebea32 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4d614ebea32 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..cd3164dc37a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..3505c968672 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-linux.png new file mode 100644 index 00000000000..cd3164dc37a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..cd3164dc37a Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Disabled-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-colorblind-linux.png new file mode 100644 index 00000000000..f8e1ab05535 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-dimmed-linux.png new file mode 100644 index 00000000000..cfb6cd79bd2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ce73d055d7c Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-linux.png new file mode 100644 index 00000000000..f8e1ab05535 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f8e1ab05535 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-colorblind-linux.png new file mode 100644 index 00000000000..9fc682e174c Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-high-contrast-linux.png new file mode 100644 index 00000000000..39f2562bc5d Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-linux.png new file mode 100644 index 00000000000..9fc682e174c Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-tritanopia-linux.png new file mode 100644 index 00000000000..9fc682e174c Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-Groups-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-colorblind-linux.png new file mode 100644 index 00000000000..b65d8a30379 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-dimmed-linux.png new file mode 100644 index 00000000000..59888cae083 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-high-contrast-linux.png new file mode 100644 index 00000000000..fcec3e7f182 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-linux.png new file mode 100644 index 00000000000..b65d8a30379 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b65d8a30379 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-colorblind-linux.png new file mode 100644 index 00000000000..cf42b651c92 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-high-contrast-linux.png new file mode 100644 index 00000000000..ea4572873ee Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-linux.png new file mode 100644 index 00000000000..cf42b651c92 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-tritanopia-linux.png new file mode 100644 index 00000000000..cf42b651c92 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-With-No-Results-Message-light-tritanopia-linux.png differ diff --git a/e2e/components/Axe.test.ts b/e2e/components/Axe.test.ts index 714ac97c6f0..7cd0e333107 100644 --- a/e2e/components/Axe.test.ts +++ b/e2e/components/Axe.test.ts @@ -14,6 +14,13 @@ const SKIPPED_TESTS = [ 'components-flash-features--with-icon-action-dismiss', // TODO: Remove once color-contrast issues have been resolved 'components-flash-features--with-icon-and-action', // TODO: Remove once color-contrast issues have been resolved 'components-filteredactionlist--default', + // TODO: Remove these once FilteredActionList feature stories no longer trigger label/nested-interactive axe violations. + 'components-filteredactionlist-features--loading-with-body-skeleton', + 'components-filteredactionlist-features--loading-with-body-spinner', + 'components-filteredactionlist-features--radio-select', + 'components-filteredactionlist-features--virtualized-list', + 'components-filteredactionlist-features--with-groups', + 'components-filteredactionlist-features--with-no-results-message', 'components-pagelayout-performance-tests--medium-content', 'components-pagelayout-performance-tests--heavy-content', ] diff --git a/e2e/components/FilteredActionList.test.ts b/e2e/components/FilteredActionList.test.ts index fd6eab58e54..f954e68bfc2 100644 --- a/e2e/components/FilteredActionList.test.ts +++ b/e2e/components/FilteredActionList.test.ts @@ -11,6 +11,58 @@ const stories = [ title: 'With Long Items', id: 'components-filteredactionlist-examples--with-long-items', }, + { + title: 'Multi Select With Select All', + id: 'components-filteredactionlist-features--multi-select-with-select-all', + }, + { + title: 'Single Select', + id: 'components-filteredactionlist-features--single-select', + }, + { + title: 'Radio Select', + id: 'components-filteredactionlist-features--radio-select', + }, + { + title: 'Select All Selected', + id: 'components-filteredactionlist-features--select-all-selected', + }, + { + title: 'With Disabled Items', + id: 'components-filteredactionlist-features--with-disabled-items', + }, + { + title: 'With Groups', + id: 'components-filteredactionlist-features--with-groups', + }, + { + title: 'With No Results Message', + id: 'components-filteredactionlist-features--with-no-results-message', + }, + { + title: 'Default Empty State', + id: 'components-filteredactionlist-features--default-empty-state', + }, + { + title: 'Custom Item Rendering', + id: 'components-filteredactionlist-features--custom-item-rendering', + }, + // { + // title: 'Loading In Input', + // id: 'components-filteredactionlist-features--loading-in-input', + // }, + // { + // title: 'Loading With Body Spinner', + // id: 'components-filteredactionlist-features--loading-with-body-spinner', + // }, + // { + // title: 'Loading With Body Skeleton', + // id: 'components-filteredactionlist-features--loading-with-body-skeleton', + // }, + { + title: 'Virtualized List', + id: 'components-filteredactionlist-features--virtualized-list', + }, ] as const test.describe('FilteredActionList', () => { @@ -26,7 +78,12 @@ test.describe('FilteredActionList', () => { }) // Default state - await expect(page).toHaveScreenshot(`FilteredActionList.${story.title}.${theme}.png`) + await expect(page).toHaveScreenshot(`FilteredActionList.${story.title}.${theme}.png`, { + animations: 'disabled', + caret: 'hide', + // 0.02 ratio (2%) absorbs small cross-environment pixel shifts from virtualization. + ...(story.title === 'Virtualized List' ? {maxDiffPixelRatio: 0.02} : {}), + }) }) } }) diff --git a/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx b/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx new file mode 100644 index 00000000000..5f96f8278bf --- /dev/null +++ b/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx @@ -0,0 +1,584 @@ +import { + FilterIcon, + GearIcon, + NoteIcon, + ProjectIcon, + SearchIcon, + TypographyIcon, + VersionsIcon, +} from '@primer/octicons-react' +import type {Meta} from '@storybook/react-vite' +import React from 'react' +import {ActionList} from '../ActionList' +import { + FilteredActionList, + FilteredActionListLoadingTypes, + type GroupedListProps, + type RenderItemFn, +} from '../FilteredActionList' +import classes from './FilteredActionList.stories.module.css' + +const meta: Meta = { + title: 'Components/FilteredActionList/Features', + component: FilteredActionList, + parameters: { + controls: { + disable: true, + }, + }, +} satisfies Meta + +export default meta + +function getColorCircle(color: string) { + return function ColorCircle() { + return ( + + ) + } +} + +const labelItems = [ + { + leadingVisual: getColorCircle('#a2eeef'), + text: 'enhancement', + id: 'enhancement', + description: 'New feature or request', + }, + { + leadingVisual: getColorCircle('#d73a4a'), + text: 'bug', + id: 'bug', + description: 'Something is not working', + }, + { + leadingVisual: getColorCircle('#0cf478'), + text: 'good first issue', + id: 'good-first-issue', + description: 'Good for newcomers', + }, + { + leadingVisual: getColorCircle('#ffd78e'), + text: 'design', + id: 'design', + description: 'Needs design feedback', + }, + { + leadingVisual: getColorCircle('#ff0000'), + text: 'blocker', + id: 'blocker', + description: 'Blocking other work', + }, + { + leadingVisual: getColorCircle('#a4f287'), + text: 'backend', + id: 'backend', + description: 'Server-side changes', + }, + { + leadingVisual: getColorCircle('#8dc6fc'), + text: 'frontend', + id: 'frontend', + description: 'Client-side changes', + }, +] + +const groupedItems: GroupedListProps['items'] = [ + { + id: 'repo-settings', + leadingVisual: GearIcon, + text: 'Repository settings', + description: 'Update branch protection and visibility', + descriptionVariant: 'block', + groupId: 'repositories', + }, + { + id: 'saved-search', + leadingVisual: SearchIcon, + text: 'Saved search', + description: 'Reuse issue and pull request filters', + descriptionVariant: 'block', + groupId: 'repositories', + }, + { + id: 'view-settings', + leadingVisual: FilterIcon, + text: 'View settings', + groupId: 'repositories', + }, + { + id: 'project-board', + leadingVisual: ProjectIcon, + text: 'Project board', + description: 'Plan and track work across repositories', + descriptionVariant: 'block', + groupId: 'planning', + }, + { + id: 'release-notes', + leadingVisual: NoteIcon, + text: 'Release notes', + groupId: 'planning', + }, + { + id: 'rename-view', + leadingVisual: TypographyIcon, + text: 'Rename view', + groupId: 'views', + }, + { + id: 'duplicate-view', + leadingVisual: VersionsIcon, + text: 'Duplicate view', + groupId: 'views', + }, +] + +const groupMetadata: GroupedListProps['groupMetadata'] = [ + {groupId: 'repositories', header: {title: 'Repositories', variant: 'filled'}}, + {groupId: 'planning', header: {title: 'Planning', variant: 'filled'}}, + {groupId: 'views', header: {title: 'Views', variant: 'filled'}}, +] + +const repositoryItems = Array.from({length: 150}, (_, index) => { + const number = index + 1 + + return { + id: `repository-${number}`, + text: `primer/react example repository ${number}`, + description: number % 3 === 0 ? 'Updated recently' : 'Available to add as context', + descriptionVariant: 'block' as const, + leadingVisual: ProjectIcon, + trailingVisual: number % 5 === 0 ? 'Private' : 'Public', + } +}) + +const noop = () => undefined + +function getTrailingVisualContent(trailingVisual: Parameters[0]['trailingVisual']): React.ReactNode { + if ( + typeof trailingVisual === 'string' || + typeof trailingVisual === 'number' || + React.isValidElement(trailingVisual) + ) { + return trailingVisual + } + + return null +} + +const customRenderItem: RenderItemFn = item => { + const { + description, + leadingVisual: LeadingVisual, + selected, + text, + trailingVisual, + onAction, + id, + children, + ...rest + } = item + + const trailingVisualContent = getTrailingVisualContent(trailingVisual) + + return ( + { + if (typeof onAction === 'function') { + onAction(item, e as unknown as React.MouseEvent | React.KeyboardEvent) + } + }} + {...rest} + > + {LeadingVisual ? ( + + + + ) : null} + {children} + + {text} + {description ? {description} : null} + + {trailingVisualContent ? {trailingVisualContent} : null} + + ) +} + +function useBodyLoaderReady() { + return true +} + +export function MultiSelectWithSelectAll() { + const [filter, setFilter] = React.useState('') + const [selectedIds, setSelectedIds] = React.useState(['bug', 'design']) + + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => ({ + ...item, + selected: selectedIds.includes(item.id), + onAction: () => { + setSelectedIds(current => { + if (current.includes(item.id)) { + return current.filter(id => id !== item.id) + } + + return [...current, item.id] + }) + }, + })) + + return ( + <> +

Multiple selection

+
Select labels that describe your issue.
+ { + setSelectedIds(checked ? visibleItems.map(item => item.id) : []) + }} + placeholderText="Filter labels" + selectionVariant="multiple" + showItemDividers + textInputProps={{leadingVisual: SearchIcon}} + /> + + ) +} + +export function SingleSelect() { + const [filter, setFilter] = React.useState('') + const [selectedId, setSelectedId] = React.useState('bug') + + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => ({ + ...item, + selected: item.id === selectedId, + onAction: () => { + setSelectedId(item.id) + }, + })) + + return ( + <> +

Single selection

+
Select one label from the filtered list.
+ + + ) +} + +export function RadioSelect() { + const [filter, setFilter] = React.useState('') + const [selectedId, setSelectedId] = React.useState('backend') + + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => ({ + ...item, + selected: item.id === selectedId, + onAction: () => { + setSelectedId(item.id) + }, + })) + + return ( + <> +

Radio selection

+
Use the radio selection variant when the selected item should be explicit.
+ + + ) +} + +export function SelectAllSelected() { + const [filter, setFilter] = React.useState('') + const [selectedIds, setSelectedIds] = React.useState(labelItems.map(item => item.id)) + + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => ({ + ...item, + selected: selectedIds.includes(item.id), + onAction: () => { + setSelectedIds(current => { + if (current.includes(item.id)) { + return current.filter(id => id !== item.id) + } + + return [...current, item.id] + }) + }, + })) + + return ( + <> +

Select all selected

+
Show the select-all control when every visible item is selected.
+ { + setSelectedIds(checked ? visibleItems.map(item => item.id) : []) + }} + placeholderText="Filter labels" + selectionVariant="multiple" + showItemDividers + textInputProps={{leadingVisual: SearchIcon}} + /> + + ) +} + +export function WithDisabledItems() { + const [filter, setFilter] = React.useState('') + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => { + if (item.id === 'design') { + return {...item, disabled: true, description: 'Disabled until design review is complete'} + } + + return item + }) + + return ( + <> +

Disabled items

+
Disable options that are visible but unavailable.
+ + + ) +} + +export function WithGroups() { + const [filter, setFilter] = React.useState('') + const visibleItems = groupedItems.filter(item => item.text?.toLowerCase().includes(filter.toLowerCase())) + + return ( + <> +

Grouped options

+
Group related options under headings.
+ + + ) +} + +export function WithNoResultsMessage() { + const [filter, setFilter] = React.useState('archived') + const visibleItems = labelItems.filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + const hasNoResults = visibleItems.length === 0 + + return ( + <> +

No results message

+
Provide a custom message when filtering removes every item.
+ +

No labels found

+

Try another search term or create a new label.

+ + ) : undefined + } + messageText={{ + title: 'No labels found', + description: 'Try another search term or create a new label.', + }} + onFilterChange={setFilter} + placeholderText="Filter labels" + textInputProps={{leadingVisual: SearchIcon}} + /> + + ) +} + +export function DefaultEmptyState() { + return ( + <> +

Default empty state

+
Render an empty list when there are no items and no custom message.
+ + + ) +} + +export function CustomItemRendering() { + const [filter, setFilter] = React.useState('') + const visibleItems = labelItems + .filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + .map(item => ({ + ...item, + renderItem: customRenderItem, + trailingVisual: item.id === 'bug' ? 'Required' : undefined, + })) + + return ( + <> +

Custom item rendering

+
Use renderItem to customize how each item is displayed.
+ + + ) +} + +export function LoadingInInput() { + const [filter, setFilter] = React.useState('fea') + const visibleItems = labelItems.filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + + return ( + <> +

Input loading

+
Show progress in the input while filtering existing results.
+ + + ) +} + +export function LoadingWithBodySpinner() { + const ready = useBodyLoaderReady() + + return ( + <> +

Body spinner loading

+
Use the body spinner while fetching the initial list.
+ + + ) +} + +export function LoadingWithBodySkeleton() { + const ready = useBodyLoaderReady() + + return ( + <> +

Body skeleton loading

+
Use the body skeleton to reserve space for the incoming list.
+ + + ) +} + +export function VirtualizedList() { + const [filter, setFilter] = React.useState('') + const visibleItems = repositoryItems.filter(item => item.text.toLowerCase().includes(filter.toLowerCase())) + + return ( + <> +

Virtualized list

+
Use virtualization for large client-side lists.
+ + + ) +} diff --git a/packages/react/src/FilteredActionList/FilteredActionList.stories.module.css b/packages/react/src/FilteredActionList/FilteredActionList.stories.module.css index f582bd30166..79a069b5f6f 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.stories.module.css +++ b/packages/react/src/FilteredActionList/FilteredActionList.stories.module.css @@ -12,3 +12,61 @@ border: var(--borderWidth-thin) solid; box-sizing: border-box; } + +.FeatureListContainer { + width: 100%; + max-width: 360px; + height: 320px; + border: var(--borderWidth-thin) solid; + padding: var(--base-size-8); +} + +.GroupedListContainer { + width: 100%; + max-width: 420px; + height: 360px; + border: var(--borderWidth-thin) solid; + padding: var(--base-size-8); +} + +.VirtualizedListContainer { + width: 100%; + max-width: 440px; + height: 360px; + border: var(--borderWidth-thin) solid; + padding: var(--base-size-8); +} + +.Message { + display: flex; + min-height: 200px; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--base-size-24); + text-align: center; +} + +.MessageTitle { + margin: 0; + color: var(--fgColor-default); + font-size: var(--text-title-size-medium); +} + +.MessageDescription { + max-width: 240px; + margin: var(--base-size-4) 0 0; + color: var(--fgColor-muted); + font-size: var(--text-body-size-medium); +} + +.CustomItemText { + display: flex; + flex-direction: column; +} + +.CustomItemDescription { + color: var(--fgColor-muted); + font-size: var(--text-body-size-small); +}