diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-linux.png new file mode 100644 index 00000000000..56cdb8b9ae2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-linux.png new file mode 100644 index 00000000000..8f992956eb0 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-linux.png new file mode 100644 index 00000000000..81316846fc1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-linux.png new file mode 100644 index 00000000000..56cdb8b9ae2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-linux.png new file mode 100644 index 00000000000..56cdb8b9ae2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-linux.png new file mode 100644 index 00000000000..b9559a5197e Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-linux.png new file mode 100644 index 00000000000..9e0dd6d9c87 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-linux.png new file mode 100644 index 00000000000..b9559a5197e Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-linux.png new file mode 100644 index 00000000000..b9559a5197e Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png index 5ea93b9dfe9..529be7a4eba 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png index 608337e4be4..dd00e9e0d25 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png index 3e488d322de..d1d2ac23a08 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png index 5ea93b9dfe9..529be7a4eba 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png index 5ea93b9dfe9..529be7a4eba 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png index dec02ff0e54..51003be5974 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png index ebf7cb41670..5e597f2e2e1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png index 1e29e18ee79..51003be5974 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png index dec02ff0e54..51003be5974 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png index bc142ac9968..2db0c5148c1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png index 86a798479c2..1ca05efc880 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-linux.png index 645cb361d63..e532557db21 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png index bc142ac9968..2db0c5148c1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png index bc142ac9968..2db0c5148c1 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png index ee0890b5296..d75cb6cd27b 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-linux.png index 9d94a2b87e8..d938592bc9f 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png index fa6e907f18c..d75cb6cd27b 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png index ee0890b5296..d75cb6cd27b 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..09581c5e8c5 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..0d0fb3af4b7 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..dcd5b512c30 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-linux.png new file mode 100644 index 00000000000..09581c5e8c5 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..09581c5e8c5 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..1e7dc04338a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..a34d6c48398 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-linux.png new file mode 100644 index 00000000000..1e7dc04338a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..1e7dc04338a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-linux.png new file mode 100644 index 00000000000..4bf7e046e82 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-linux.png new file mode 100644 index 00000000000..7fd1f5a0d19 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b0599541329 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-linux.png new file mode 100644 index 00000000000..4bf7e046e82 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4bf7e046e82 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-linux.png new file mode 100644 index 00000000000..d046a0c6158 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-linux.png new file mode 100644 index 00000000000..d21051adc74 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-linux.png new file mode 100644 index 00000000000..d046a0c6158 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-linux.png new file mode 100644 index 00000000000..d046a0c6158 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..cfb4048d49a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..b52b16819bf Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b27d7c75ae7 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-linux.png new file mode 100644 index 00000000000..cfb4048d49a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cfb4048d49a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..9fb4714c8a0 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..506a1bda95d Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-linux.png new file mode 100644 index 00000000000..9fb4714c8a0 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..9fb4714c8a0 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-linux.png new file mode 100644 index 00000000000..de117ee00ca Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-linux.png new file mode 100644 index 00000000000..9f3525cdf61 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-linux.png new file mode 100644 index 00000000000..826d621bb2a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-linux.png new file mode 100644 index 00000000000..de117ee00ca Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-linux.png new file mode 100644 index 00000000000..de117ee00ca Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-linux.png new file mode 100644 index 00000000000..536a8f69d6c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-linux.png new file mode 100644 index 00000000000..7415888da28 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-linux.png new file mode 100644 index 00000000000..536a8f69d6c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-linux.png new file mode 100644 index 00000000000..536a8f69d6c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png index feb1cd5b7bc..09581c5e8c5 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png index 787cb9079a9..0d0fb3af4b7 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-linux.png index 90c18678048..dcd5b512c30 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png index feb1cd5b7bc..09581c5e8c5 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png index feb1cd5b7bc..09581c5e8c5 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png index c489ea37ce1..1e7dc04338a 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-linux.png index 350175df18b..a34d6c48398 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png index 8d027dd75dc..1e7dc04338a 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png index c489ea37ce1..1e7dc04338a 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-linux.png new file mode 100644 index 00000000000..b011840f740 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-linux.png new file mode 100644 index 00000000000..2743b58295e Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6e1b08a967a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-linux.png new file mode 100644 index 00000000000..b011840f740 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b011840f740 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-linux.png new file mode 100644 index 00000000000..259963d9fe1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-linux.png new file mode 100644 index 00000000000..b2fe6cb33f1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-linux.png new file mode 100644 index 00000000000..259963d9fe1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-linux.png new file mode 100644 index 00000000000..259963d9fe1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-linux.png new file mode 100644 index 00000000000..d8ca9b21694 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-linux.png new file mode 100644 index 00000000000..fb7041db909 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-linux.png new file mode 100644 index 00000000000..22847943033 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-linux.png new file mode 100644 index 00000000000..d8ca9b21694 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d8ca9b21694 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-linux.png new file mode 100644 index 00000000000..a201450fbe2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-linux.png new file mode 100644 index 00000000000..556307a531d Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-linux.png new file mode 100644 index 00000000000..a201450fbe2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-linux.png new file mode 100644 index 00000000000..a201450fbe2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-linux.png new file mode 100644 index 00000000000..6cd0441ab65 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-linux.png new file mode 100644 index 00000000000..3ab36166892 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-linux.png new file mode 100644 index 00000000000..fe5eadbc151 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-linux.png new file mode 100644 index 00000000000..6cd0441ab65 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-linux.png new file mode 100644 index 00000000000..6cd0441ab65 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-linux.png new file mode 100644 index 00000000000..6126ac50abc Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-linux.png new file mode 100644 index 00000000000..0ab21a1e173 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-linux.png new file mode 100644 index 00000000000..6126ac50abc Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-linux.png new file mode 100644 index 00000000000..6126ac50abc Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-linux.png new file mode 100644 index 00000000000..1ede1c7322a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-linux.png new file mode 100644 index 00000000000..aa9cd03c390 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-linux.png new file mode 100644 index 00000000000..913066fb951 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-linux.png new file mode 100644 index 00000000000..1ede1c7322a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1ede1c7322a Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-linux.png new file mode 100644 index 00000000000..a36027ba5b4 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-linux.png new file mode 100644 index 00000000000..4a66b3ec0e2 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-linux.png new file mode 100644 index 00000000000..a36027ba5b4 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-linux.png new file mode 100644 index 00000000000..a36027ba5b4 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-linux.png new file mode 100644 index 00000000000..2223fec8a8c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-linux.png new file mode 100644 index 00000000000..7e2216be83f Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-linux.png new file mode 100644 index 00000000000..eb952c28d42 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-linux.png new file mode 100644 index 00000000000..2223fec8a8c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2223fec8a8c Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-linux.png new file mode 100644 index 00000000000..d827de02a40 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-linux.png new file mode 100644 index 00000000000..65c92b6e757 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-linux.png new file mode 100644 index 00000000000..d827de02a40 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-linux.png new file mode 100644 index 00000000000..d827de02a40 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-linux.png differ diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts index 8db0ed311f3..50c7cb5a457 100644 --- a/e2e/components/SelectPanel.test.ts +++ b/e2e/components/SelectPanel.test.ts @@ -14,8 +14,11 @@ test.describe('SelectPanel', () => { }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot(`SelectPanel.Default.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -36,19 +39,156 @@ test.describe('SelectPanel', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--single-select-story', + id: 'components-selectpanel-features--single-select', globals: { colorScheme: theme, }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot(`SelectPanel.Single Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Single Select.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--single-select', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('With External Anchor', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-external-anchor', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.External Anchor.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-external-anchor', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('With Footer', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-footer', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.With Footer.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-footer', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('With Groups', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-groups', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.With Groups.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-groups', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('With Item Dividers', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-features--with-item-dividers', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.With Item Dividers.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--single-select-story', + id: 'components-selectpanel-features--with-item-dividers', globals: { colorScheme: theme, }, @@ -59,24 +199,29 @@ test.describe('SelectPanel', () => { } }) - test.describe('External Anchor', () => { + test.describe('With Placeholder for Search Input', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--external-anchor-story', + id: 'components-selectpanel-features--with-placeholder-for-seach-input', globals: { colorScheme: theme, }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot(`SelectPanel.External Anchor.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.With Placeholder for Search Input.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--external-anchor-story', + id: 'components-selectpanel-features--with-placeholder-for-seach-input', globals: { colorScheme: theme, }, @@ -87,26 +232,29 @@ test.describe('SelectPanel', () => { } }) - test.describe('SelectPanel, Initial Height, Overflowing Items', () => { + test.describe('With Placeholder Select', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-height-initial-with-overflowing-items-story', + id: 'components-selectpanel-features--with-placeholder-select', globals: { colorScheme: theme, }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot( - `SelectPanel.SelectPanel, Initial Height, Overflowing Items.${theme}.png`, + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.With Placeholder Select.${theme}.png`, ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-height-initial-with-overflowing-items-story', + id: 'components-selectpanel-features--with-placeholder-select', globals: { colorScheme: theme, }, @@ -117,26 +265,29 @@ test.describe('SelectPanel', () => { } }) - test.describe('SelectPanel, Initial Height, Underflowing Items', () => { + test.describe('Above Tall Body', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-height-initial-with-underflowing-items-story', + id: 'components-selectpanel-examples--above-tall-body', globals: { colorScheme: theme, }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot( - `SelectPanel.SelectPanel, Initial Height, Underflowing Items.${theme}.png`, + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Above Tall Body.${theme}.png`, ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-height-initial-with-underflowing-items-story', + id: 'components-selectpanel-examples--above-tall-body', globals: { colorScheme: theme, }, @@ -147,24 +298,128 @@ test.describe('SelectPanel', () => { } }) - test.describe('SelectPanel, Above a Tall Body', () => { + test.describe('Height Variantions and Scroll', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-above-tall-body', + id: 'components-selectpanel-examples--height-variantions-and-scroll', globals: { colorScheme: theme, }, }) + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') // Default state - expect(await page.screenshot()).toMatchSnapshot(`SelectPanel.SelectPanel, Above a Tall Body.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Height Variantions and Scroll.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-variantions-and-scroll', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Height Initial with Overflowing Items', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Height Initial with Overflowing Items.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Height Initial with Underflowing Items', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Height Initial with Underflowing Items.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Height Initial with Underflowing Items After Fetch', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', + globals: { + colorScheme: theme, + }, + }) + + // Open select panel + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SelectPanel.Height Initial with Underflowing Items After Fetch.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-selectpanel-features--select-panel-above-tall-body', + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', globals: { colorScheme: theme, }, diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index 44b5f661c19..7bec423a15c 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx @@ -9,7 +9,7 @@ import type {TextInputProps} from '../TextInput' import TextInput from '../TextInput' import {get} from '../constants' import {ActionList} from '../deprecated/ActionList' -import type {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List' +import type {GroupedListProps, ListPropsBase} from '../SelectPanel/types' import {useFocusZone} from '../hooks/useFocusZone' import {useId} from '../hooks/useId' import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate' diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx new file mode 100644 index 00000000000..3dd388f5a77 --- /dev/null +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx @@ -0,0 +1,244 @@ +import React, {useState} from 'react' +import Box from '../Box' +import type {Meta} from '@storybook/react' +import {Button} from '../Button' +import type {ItemInput} from '../deprecated/ActionList/List' +import {SelectPanel} from './SelectPanel' +import type {OverlayProps} from '../Overlay' +import {TriangleDownIcon} from '@primer/octicons-react' + +const meta = { + title: 'Components/SelectPanel/Examples', + component: SelectPanel, +} satisfies Meta + +export default meta + +function getColorCircle(color: string) { + return function () { + return ( + + ) + } +} + +const items = [ + {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1}, + {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2}, + {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3}, + {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4}, + {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5}, + {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6}, + {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}, +] + +export const HeightInitialWithOverflowingItemsStory = () => { + const [selected, setSelected] = React.useState(items[0]) + const [filter, setFilter] = React.useState('') + const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [open, setOpen] = useState(false) + + return ( + <> +

Single Select Panel

+
Please select a label that describe your issue:
+ ( + + )} + placeholderText="Filter Labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} + /> + + ) +} +HeightInitialWithOverflowingItemsStory.storyName = 'Height: Initial, Overflowing Items' + +export const HeightInitialWithUnderflowingItemsStory = () => { + const underflowingItems = [items[0], items[1]] + const [selected, setSelected] = React.useState(underflowingItems[0]) + const [filter, setFilter] = React.useState('') + const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [open, setOpen] = useState(false) + + return ( + <> +

Single Select Panel

+
Please select a label that describe your issue:
+ ( + + )} + placeholderText="Filter Labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} + /> + + ) +} +HeightInitialWithUnderflowingItemsStory.storyName = 'Height: Initial, Underflowing Items' + +export const HeightInitialWithUnderflowingItemsAfterFetch = () => { + const [selected, setSelected] = React.useState(items[0]) + const [filter, setFilter] = React.useState('') + const [fetchedItems, setFetchedItems] = useState([]) + const filteredItems = React.useMemo( + () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), + [fetchedItems, filter], + ) + const [open, setOpen] = useState(false) + const [height, setHeight] = useState('auto') + + const onOpenChange = () => { + setOpen(!open) + setTimeout(() => { + setFetchedItems([items[0], items[1]]) + setHeight('initial') + }, 1500) + } + + return ( + <> +

Single Select Panel

+
Please select a label that describe your issue:
+ ( + + )} + placeholderText="Filter Labels" + open={open} + onOpenChange={onOpenChange} + loading={filteredItems.length === 0} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{width: 'small', height, maxHeight: 'xsmall'}} + /> + + ) +} +HeightInitialWithUnderflowingItemsAfterFetch.storyName = 'Height: Initial, Underflowing Items (After Fetch)' + +export const AboveTallBody = () => { + const [selected, setSelected] = React.useState(items[0]) + const [filter, setFilter] = React.useState('') + const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [open, setOpen] = useState(false) + + return ( + <> +

Single Select Panel

+
Please select a label that describe your issue:
+ ( + + )} + placeholderText="Filter Labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{width: 'small', height: 'xsmall'}} + /> +
+ This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal + is far down the page +
+ + ) +} + +export const HeightVariantionsAndScroll = () => { + const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items] + const [selectedA, setSelectedA] = React.useState(longItems[0]) + const [selectedB, setSelectedB] = React.useState(longItems[0]) + const [filter, setFilter] = React.useState('') + const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [openA, setOpenA] = useState(false) + const [openB, setOpenB] = useState(false) + + return ( + <> +

With height:medium

+ ( + + )} + placeholderText="Filter Labels" + open={openA} + onOpenChange={setOpenA} + items={filteredItems} + selected={selectedA} + onSelectedChange={setSelectedA} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{height: 'medium'}} + /> +

With height:auto, maxheight:medium

+ ( + + )} + placeholderText="Filter Labels" + open={openB} + onOpenChange={setOpenB} + items={filteredItems} + selected={selectedB} + onSelectedChange={setSelectedB} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{ + height: 'auto', + maxHeight: 'medium', + }} + /> + + ) +} diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index a47a4ca7de6..da4bb2084be 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -1,17 +1,26 @@ -import React, {useState, useRef} from 'react' +import React, {useState, useRef, useMemo} from 'react' import type {Meta} from '@storybook/react' - import Box from '../Box' import {Button} from '../Button' -import type {ItemInput} from '../deprecated/ActionList/List' +import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List' import {SelectPanel} from './SelectPanel' -import {TriangleDownIcon} from '@primer/octicons-react' -import type {OverlayProps} from '../Overlay' +import { + FilterIcon, + GearIcon, + NoteIcon, + ProjectIcon, + SearchIcon, + TriangleDownIcon, + TypographyIcon, + VersionsIcon, +} from '@primer/octicons-react' -export default { +const meta = { title: 'Components/SelectPanel/Features', component: SelectPanel, -} as Meta +} satisfies Meta + +export default meta function getColorCircle(color: string) { return function () { @@ -40,85 +49,116 @@ const items = [ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}, ] -export const SingleSelectStory = () => { - const [selected, setSelected] = React.useState(items[0]) +export const WithItemDividers = () => { + const [selected, setSelected] = React.useState([items[0], items[1]]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) return ( - <> -

Single Select Panel

-
Please select a label that describe your issue:
- ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'xsmall'}} - /> - + ( + + )} + placeholderText="Filter labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + showItemDividers={true} + /> ) } -SingleSelectStory.storyName = 'Single Select' -export const ExternalAnchorStory = () => { - const [selected, setSelected] = React.useState(items[0]) +export const WithPlaceholderForSeachInput = () => { + const [selected, setSelected] = React.useState([items[0], items[1]]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) - const buttonRef = useRef(null) return ( - <> -

Select Panel With External Anchor

- - - + ( + + )} + placeholderText="Filter labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + /> ) } -ExternalAnchorStory.storyName = 'With External Anchor' -export const WithFooterStory = () => { +export const WithPlaceholderSelect = () => { + const [selected, setSelected] = React.useState([]) + const [filter, setFilter] = React.useState('') + const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [open, setOpen] = useState(false) + + return ( + ( + + )} + placeholder="Select issue labels" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + onFilterChange={setFilter} + /> + ) +} + +export const SingleSelect = () => { const [selected, setSelected] = React.useState(items[0]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) - const buttonRef = useRef(null) return ( <> -

Select Panel With Footer

+

Single Select Panel

+
Please select a label that describe your issue:
( )} - anchorRef={buttonRef} placeholderText="Filter Labels" open={open} onOpenChange={setOpen} @@ -127,19 +167,13 @@ export const WithFooterStory = () => { onSelectedChange={setSelected} onFilterChange={setFilter} showItemDividers={true} - overlayProps={{width: 'small', height: 'medium'}} - footer={ - - } + overlayProps={{width: 'small', height: 'xsmall'}} /> ) } -WithFooterStory.storyName = 'With Footer' -export const MultiSelectWithFooterStory = () => { +export const MultiSelect = () => { const [selected, setSelected] = React.useState([items[0], items[1]]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) @@ -165,33 +199,27 @@ export const MultiSelectWithFooterStory = () => { onFilterChange={setFilter} showItemDividers={true} overlayProps={{width: 'small', height: 'medium'}} - footer={ - - } /> ) } -MultiSelectWithFooterStory.storyName = 'With Footer (Multi Select)' -export const SelectPanelHeightInitialWithOverflowingItemsStory = () => { +export const WithExternalAnchor = () => { const [selected, setSelected] = React.useState(items[0]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) + const buttonRef = useRef(null) return ( <> -

Single Select Panel

-
Please select a label that describe your issue:
+

Select Panel With External Anchor

+ ( - - )} + renderAnchor={null} + anchorRef={buttonRef} placeholderText="Filter Labels" open={open} onOpenChange={setOpen} @@ -200,30 +228,29 @@ export const SelectPanelHeightInitialWithOverflowingItemsStory = () => { onSelectedChange={setSelected} onFilterChange={setFilter} showItemDividers={true} - overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} + overlayProps={{width: 'small', height: 'xsmall'}} /> ) } -SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items' -export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => { - const underflowingItems = [items[0], items[1]] - const [selected, setSelected] = React.useState(underflowingItems[0]) +export const WithFooter = () => { + const [selected, setSelected] = React.useState(items[0]) const [filter, setFilter] = React.useState('') - const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) + const buttonRef = useRef(null) return ( <> -

Single Select Panel

-
Please select a label that describe your issue:
+

Select Panel With Footer

( )} + anchorRef={buttonRef} placeholderText="Filter Labels" open={open} onOpenChange={setOpen} @@ -232,148 +259,113 @@ export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => { onSelectedChange={setSelected} onFilterChange={setFilter} showItemDividers={true} - overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} + overlayProps={{width: 'small', height: 'medium'}} + footer={ + + } /> ) } -SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items' -export const SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = () => { - const [selected, setSelected] = React.useState(items[0]) - const [filter, setFilter] = React.useState('') - const [fetchedItems, setFetchedItems] = useState([]) - const filteredItems = React.useMemo( - () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), - [fetchedItems, filter], - ) - const [open, setOpen] = useState(false) - const [height, setHeight] = useState('auto') - - const onOpenChange = () => { - setOpen(!open) - setTimeout(() => { - setFetchedItems([items[0], items[1]]) - setHeight('initial') - }, 1500) - } +const listOfItems: Array = [ + { + id: '1', + key: 1, + leadingVisual: SearchIcon, + text: 'item 1', + groupId: '1', + }, + { + id: '2', + key: 2, + leadingVisual: NoteIcon, + text: 'Item 2', + description: 'Some description', + descriptionVariant: 'block', + groupId: '1', + }, + { + id: '3', + key: 3, + leadingVisual: ProjectIcon, + text: 'Item 3', + description: 'Some description as well', + descriptionVariant: 'block', + groupId: '2', + }, + { + id: '4', + key: 4, + leadingVisual: FilterIcon, + text: 'Item 4', + groupId: '2', + }, + {id: '5', key: 5, leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '1'}, + {id: '6', key: 6, leadingVisual: GearIcon, text: 'View settings', groupId: '0'}, + {id: '7', key: 7, leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'}, + {id: '8', key: 8, leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'}, +] - return ( - <> -

Single Select Panel

-
Please select a label that describe your issue:
- ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={onOpenChange} - loading={filteredItems.length === 0} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height, maxHeight: 'xsmall'}} - /> - - ) -} -SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = - 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)' +const groupMetadata: GroupedListProps['groupMetadata'] = [ + {groupId: '0', header: {title: 'Repos', variant: 'filled'}}, + {groupId: '1', header: {title: 'Live query', variant: 'filled'}}, + {groupId: '2', header: {title: 'Layout', variant: 'filled'}}, +] -export const SelectPanelAboveTallBody = () => { - const [selected, setSelected] = React.useState(items[0]) +export const WithGroups = () => { + const [selectedIDs, setSelectedIDs] = useState([]) const [filter, setFilter] = React.useState('') - const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const filteredItems = listOfItems.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = useState(false) + const buttonRef = useRef(null) - return ( - <> -

Single Select Panel

-
Please select a label that describe your issue:
- ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'xsmall'}} - /> -
- This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal - is far down the page -
- - ) -} -SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body' + const onSelectedChange = async (selections: ItemInput[]) => { + const _selectedIDs = selections.flatMap(item => { + if (item.id === undefined || typeof item.id !== 'string') { + return [] + } + return item.id + }) -export const SelectPanelHeightAndScroll = () => { - const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items] - const [selectedA, setSelectedA] = React.useState(longItems[0]) - const [selectedB, setSelectedB] = React.useState(longItems[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [openA, setOpenA] = useState(false) - const [openB, setOpenB] = useState(false) + setSelectedIDs(_selectedIDs) + } + + const selectedObjects: ItemInput[] = useMemo(() => { + const selected: ItemInput[] = [] + + for (const selectedID of selectedIDs) { + const item = listOfItems.find(value => value.id === selectedID) + if (item) { + selected.push(item) + } + } + return selected + }, [selectedIDs]) return ( - <> -

With height:medium

- ( - - )} - placeholderText="Filter Labels" - open={openA} - onOpenChange={setOpenA} - items={filteredItems} - selected={selectedA} - onSelectedChange={setSelectedA} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{height: 'medium'}} - /> -

With height:auto, maxheight:medium

- ( - - )} - placeholderText="Filter Labels" - open={openB} - onOpenChange={setOpenB} - items={filteredItems} - selected={selectedB} - onSelectedChange={setSelectedB} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{ - height: 'auto', - maxHeight: 'medium', - }} - /> - + ( + + )} + anchorRef={buttonRef} + groupMetadata={groupMetadata} + placeholderText="Filter things" + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selectedObjects} + onSelectedChange={onSelectedChange} + onFilterChange={setFilter} + showItemDividers={true} + overlayProps={{width: 'large', height: 'xlarge'}} + /> ) } -SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll' diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx index 97d7903a42e..a8951c1211a 100644 --- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx @@ -7,10 +7,12 @@ import {Button} from '../Button' import {SelectPanel} from '../SelectPanel' import type {ItemInput} from '../deprecated/ActionList/List' -export default { +const meta = { title: 'Components/SelectPanel', component: SelectPanel, -} as Meta +} satisfies Meta + +export default meta function getColorCircle(color: string) { return function () { @@ -63,15 +65,12 @@ export const Default = () => { {children ?? 'Select Labels'} )} - placeholderText="Filter labels" open={open} onOpenChange={setOpen} items={filteredItems} selected={selected} onSelectedChange={setSelected} onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'xsmall'}} /> ) diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx index a3a2d7d2576..636cd390973 100644 --- a/packages/react/src/SelectPanel/SelectPanel.test.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx @@ -1,6 +1,7 @@ import {render, screen} from '@testing-library/react' import React from 'react' import {SelectPanel, type SelectPanelProps} from '../SelectPanel' +import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List' import {userEvent} from '@testing-library/user-event' import ThemeProvider from '../ThemeProvider' @@ -373,4 +374,122 @@ describe('SelectPanel', () => { expect(screen.getByText('test footer')).toBeVisible() }) }) + + const listOfItems: Array = [ + { + id: '1', + key: 1, + text: 'Item 1', + groupId: '1', + }, + { + id: '2', + key: 2, + text: 'Item 2', + groupId: '1', + }, + { + id: '3', + key: 3, + text: 'Item 3', + groupId: '2', + }, + { + id: '4', + key: 4, + text: 'Item 4', + groupId: '3', + }, + ] + + const groupMetadata: GroupedListProps['groupMetadata'] = [ + {groupId: '1', header: {title: 'Group title 1'}}, + {groupId: '2', header: {title: 'Group title 2'}}, + {groupId: '3', header: {title: 'Group title 3'}}, + ] + + function SelectPanelWithGroups() { + const [selectedItems, setSelectedItems] = React.useState([]) + const [open, setOpen] = React.useState(false) + const [filter, setFilter] = React.useState('') + + const onSelectedChange = (selections: ItemInput[]) => { + setSelectedItems(selections) + } + + return ( + + { + setOpen(isOpen) + }} + filterValue={filter} + onFilterChange={value => { + setFilter(value) + }} + /> + + ) + } + + describe('with groups', () => { + it('should render groups with items', async () => { + const user = userEvent.setup() + + render() + + await user.click(screen.getByText('Select items')) + const listbox = screen.getByRole('listbox') + expect(listbox).toBeVisible() + expect(listbox).toHaveAttribute('aria-multiselectable', 'true') + + // listbox should has 3 gorups and each have heading + const headings = screen.getAllByRole('heading') + + // The first heading is the h1 and it is the title of the dialog + expect(headings[1]).toHaveTextContent('Group title 1') + expect(headings[2]).toHaveTextContent('Group title 2') + expect(headings[3]).toHaveTextContent('Group title 3') + + expect(screen.getAllByRole('option')).toHaveLength(4) + }) + it('should select items within groups', async () => { + const user = userEvent.setup() + + render() + + await user.click(screen.getByText('Select items')) + + // Select the first item + await user.click(screen.getByRole('option', {name: 'Item 1'})) + expect( + screen.getByRole('option', { + name: 'Item 1', + }), + ).toHaveAttribute('aria-selected', 'true') + + await user.click(screen.getByRole('option', {name: 'Item 3'})) + expect( + screen.getByRole('option', { + name: 'Item 3', + }), + ).toHaveAttribute('aria-selected', 'true') + + await user.click(screen.getByRole('option', {name: 'Item 4'})) + expect( + screen.getByRole('option', { + name: 'Item 4', + }), + ).toHaveAttribute('aria-selected', 'true') + }) + }) }) diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 73bbcaa5948..5763081361b 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -9,8 +9,8 @@ import {FilteredActionList} from '../FilteredActionList' import Heading from '../Heading' import type {OverlayProps} from '../Overlay' import type {TextInputProps} from '../TextInput' -import type {ItemProps} from '../deprecated/ActionList' -import type {ItemInput} from '../deprecated/ActionList/List' +import type {ItemProps, ItemInput} from './types' + import {Button} from '../Button' import {useProvidedRefOrCreate} from '../hooks' import type {FocusZoneHookSettings} from '../hooks/useFocusZone' diff --git a/packages/react/src/SelectPanel/types.ts b/packages/react/src/SelectPanel/types.ts new file mode 100644 index 00000000000..fddc8d0b09d --- /dev/null +++ b/packages/react/src/SelectPanel/types.ts @@ -0,0 +1,4 @@ +import type {ItemProps} from '../deprecated/ActionList' +import type {ItemInput, GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List' +// Re-exporting the types from SelectPanel for the gradual migration to drop deprecated ActionList props. +export type {ItemProps, ItemInput, GroupedListProps, ListPropsBase} diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index c65e2e71587..b7447529dbf 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -1125,28 +1125,52 @@ const components = new Map([ name: 'Default', }, { - id: 'components-selectpanel-features--single-select-story', + id: 'components-selectpanel-features--single-select', name: 'Single Select', }, { - id: 'components-selectpanel-features--external-anchor-story', - name: 'External Anchor', + id: 'components-selectpanel-features--with-external-anchor', + name: 'With External Anchor', }, { - id: 'components-selectpanel-features--select-panel-height-initial-with-overflowing-items-story', - name: 'SelectPanel, Height: Initial, Overflowing Items', + id: 'components-selectpanel-features--with-footer', + name: 'With Footer', }, { - id: 'components-selectpanel-features--select-panel-height-initial-with-underflowing-items-story', - name: 'SelectPanel, Height: Initial, Underflowing Items', + id: 'components-selectpanel-features--with-groups', + name: 'With Groups', }, { - id: 'components-selectpanel-features--select-panel-above-tall-body', - name: 'SelectPanel, Above a Tall Body', + id: 'components-selectpanel-features--with-item-dividers', + name: 'With Item Dividers', }, { - id: 'components-selectpanel-features-select-panel-height-and-scroll', - name: 'SelectPanel, Height and Scroll', + id: 'components-selectpanel-features--with-placeholder-for-seach-input', + name: 'With Placeholder for Search Input', + }, + { + id: 'components-selectpanel-features--with-placeholder-select', + name: 'With Placeholder Select', + }, + { + id: 'components-selectpanel-examples--above-tall-body', + name: 'Above Tall Body', + }, + { + id: 'components-selectpanel-examples--height-variantions-and-scroll', + name: 'Height Variantions and Scroll', + }, + { + id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story', + name: 'Height Initial with Overflowing Items', + }, + { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-story', + name: 'Height Initial with Underflowing Items', + }, + { + id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', + name: 'Height Initial with Underflowing Items After Fetch', }, ], },