diff --git a/.changeset/forty-cooks-drive.md b/.changeset/forty-cooks-drive.md new file mode 100644 index 0000000000..d19821951b --- /dev/null +++ b/.changeset/forty-cooks-drive.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': minor +--- + +Improve SelectPanel messages API (no items/no results, errors) diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark.png index 8f2e5cd710..f316b1210e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_colorblind.png index 8f2e5cd710..f316b1210e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_dimmed.png index 2b42ec257a..2137bfc5c7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_high_contrast.png index 3b78004436..7f11fb0dbc 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light.png index cc76cec0cd..060d55c9b2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_colorblind.png index cc76cec0cd..060d55c9b2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_high_contrast.png index c6a64bdab2..eb56d637e2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_description/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark.png index 89294c583d..4714e29d5e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_colorblind.png index 89294c583d..4714e29d5e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_dimmed.png index 66ac8a9f32..52b4d183b9 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_high_contrast.png index 492df04309..dc28fb1b14 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light.png index dc98ffea79..3103144a2e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_colorblind.png index dc98ffea79..3103144a2e 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_high_contrast.png index e75dce9f98..9ad367233b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/custom_loading_label/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png index 587191937b..929cd0164a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png index 7e33a4c83c..3f07723a71 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png index ea3a6cae1e..e048190c84 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png index bbfc2df88b..4d5630748a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png index 24c2927ca5..b65199e9c4 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png index 6101aedf21..f1d5396424 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png index 7a70214cb7..fbaf7c90c8 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png index a16d90ceb9..ab426651bf 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png index a16d90ceb9..ab426651bf 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png index 373ea878c8..a87d2b2427 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png index 06746f2068..9d500756cc 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png index 8ab4946c16..7194011cda 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png index 8ab4946c16..7194011cda 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png index 9f819b54b0..a04c25e13b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png index b51c14dc8c..01ded81397 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png index b9c542775c..01ded81397 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png index 276e39118c..1870964cb3 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png index d3eb4ced14..9b64809f25 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png index e5f06264ce..fc41f477f7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png index e5f06264ce..fc41f477f7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png index 25978804ad..86352a032b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png index 587191937b..929cd0164a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png index 7e33a4c83c..3f07723a71 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png index ea3a6cae1e..e048190c84 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png index bbfc2df88b..4d5630748a 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png index 24c2927ca5..b65199e9c4 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png index 6101aedf21..f1d5396424 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png index 7a70214cb7..fbaf7c90c8 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png index a16d90ceb9..ab426651bf 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png index a16d90ceb9..ab426651bf 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png index 373ea878c8..a87d2b2427 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png index 06746f2068..9d500756cc 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png index 8ab4946c16..7194011cda 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png index 8ab4946c16..7194011cda 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png index 9f819b54b0..a04c25e13b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png differ diff --git a/Procfile b/Procfile index a23064be9c..5e14bbd306 100644 --- a/Procfile +++ b/Procfile @@ -1,3 +1,3 @@ vite: cd demo; script/start-vite css: cd demo; script/start-css -web: cd demo; bin/rails s -p 4000 +web: cd demo; bin/rails s -p 4000 -b 0.0.0.0 diff --git a/app/components/primer/alpha/select_panel.html.erb b/app/components/primer/alpha/select_panel.html.erb index 564f5eaaed..d85190e9e4 100644 --- a/app/components/primer/alpha/select_panel.html.erb +++ b/app/components/primer/alpha/select_panel.html.erb @@ -10,15 +10,10 @@ <% end %> <% if show_filter? %> <% header.with_filter do %> - + <% unless banner_error_message? %> + <% with_banner_error_message { "Sorry, something went wrong." } %> + <% end %> + <%= banner_error_message %> <%= render(Primer::BaseComponent.new( tag: :"remote-input", aria: { owns: @body_id }, @@ -76,25 +71,32 @@ <% end %> - + <% end %> + <%= body_error_message %> <% end %> <% end %> <% else %> <%= render(@list) %> <% end %> - + <% unless no_items_message? %> + <% with_no_items_message do |message| %> + <% message.with_title { "No items found." } %> + <% end %> + <% end %> + <%= no_items_message %> + <% unless no_matches_message? %> + <% with_no_matches_message do |message| %> + <% message.with_title { "No matches found." } %> + <% message.with_description { "Try adjusting your search terms." } %> + <% end %> + <% end %> + <%= no_matches_message %> <% end %> <% end %> diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb index d0544bd1d0..dff3e45cc1 100644 --- a/app/components/primer/alpha/select_panel.rb +++ b/app/components/primer/alpha/select_panel.rb @@ -294,6 +294,31 @@ def with_avatar_item(**system_arguments) end end + # The message rendered in place of the list of items if an error occurrs when fetching items for the first time. + class BodyErrorMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered in place of the list of items if there are no items and no filter text. + class NoItemsMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered in place of the list of items if there are no items that match the filter text. + class NoMatchesMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered above the filter input when an error occurs when fetching items as the result of a filter operation. + class BannerErrorMessage < Primer::Component + def initialize(scheme: DEFAULT_BANNER_SCHEME) + @scheme = scheme + end + end + status :alpha DEFAULT_PRELOAD = false @@ -368,7 +393,6 @@ def with_avatar_item(**system_arguments) # @param size [Symbol] The size of the panel. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %> # @param select_variant [Symbol] <%= one_of(Primer::Alpha::SelectPanel::SELECT_VARIANT_OPTIONS) %> # @param fetch_strategy [Symbol] <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %> - # @param no_results_label [String] The label to display when no results are found. # @param preload [Boolean] Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened. # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button. # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button. @@ -391,7 +415,6 @@ def initialize( size: :small, select_variant: DEFAULT_SELECT_VARIANT, fetch_strategy: DEFAULT_FETCH_STRATEGY, - no_results_label: "No results found", preload: DEFAULT_PRELOAD, dynamic_label: false, dynamic_label_prefix: nil, @@ -405,7 +428,7 @@ def initialize( anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE, loading_label: "Loading content...", loading_description: nil, - banner_scheme: DEFAULT_BANNER_SCHEME, + banner_scheme: nil, **system_arguments ) raise_if_role_given!(**system_arguments) @@ -422,7 +445,6 @@ def initialize( @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD) @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT) @fetch_strategy = fetch_or_fallback(FETCH_STRATEGIES, fetch_strategy, DEFAULT_FETCH_STRATEGY) - @no_results_label = no_results_label @show_filter = show_filter @dynamic_label = dynamic_label @dynamic_label_prefix = dynamic_label_prefix @@ -433,7 +455,7 @@ def initialize( @loading_description_id = "#{@panel_id}-loading-description" end @loading_description = loading_description - @banner_scheme = fetch_or_fallback(BANNER_SCHEME_OPTIONS, banner_scheme, DEFAULT_BANNER_SCHEME) + @banner_scheme = banner_scheme @system_arguments = deny_tag_argument(**system_arguments) @system_arguments[:id] = @panel_id @@ -534,12 +556,21 @@ def initialize( # Customizable content for the error message that appears when items are fetched for the first time. This message # appears in place of the list of items. # For more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning). - renders_one :preload_error_content + renders_one :body_error_message, BodyErrorMessage # Customizable content for the error message that appears when items are fetched as the result of a filter # operation. This message appears as a banner above the previously fetched list of items. # For more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning). - renders_one :error_content + renders_one :banner_error_message, -> (scheme: nil) { + scheme ||= @banner_scheme || DEFAULT_BANNER_SCHEME + + BannerErrorMessage.new( + scheme: fetch_or_fallback(BANNER_SCHEME_OPTIONS, scheme, DEFAULT_BANNER_SCHEME) + ) + } + + renders_one :no_items_message, NoItemsMessage + renders_one :no_matches_message, NoMatchesMessage private diff --git a/app/components/primer/alpha/select_panel/banner_error_message.html.erb b/app/components/primer/alpha/select_panel/banner_error_message.html.erb new file mode 100644 index 0000000000..999eee3276 --- /dev/null +++ b/app/components/primer/alpha/select_panel/banner_error_message.html.erb @@ -0,0 +1,5 @@ + diff --git a/app/components/primer/alpha/select_panel/body_error_message.html.erb b/app/components/primer/alpha/select_panel/body_error_message.html.erb new file mode 100644 index 0000000000..2acd9456df --- /dev/null +++ b/app/components/primer/alpha/select_panel/body_error_message.html.erb @@ -0,0 +1,11 @@ + diff --git a/app/components/primer/alpha/select_panel/no_items_message.html.erb b/app/components/primer/alpha/select_panel/no_items_message.html.erb new file mode 100644 index 0000000000..f8b407e417 --- /dev/null +++ b/app/components/primer/alpha/select_panel/no_items_message.html.erb @@ -0,0 +1,10 @@ + diff --git a/app/components/primer/alpha/select_panel/no_matches_message.html.erb b/app/components/primer/alpha/select_panel/no_matches_message.html.erb new file mode 100644 index 0000000000..c3444531bc --- /dev/null +++ b/app/components/primer/alpha/select_panel/no_matches_message.html.erb @@ -0,0 +1,10 @@ + diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts index 5b7dd86dd1..81d6649e3f 100644 --- a/app/components/primer/alpha/select_panel_element.ts +++ b/app/components/primer/alpha/select_panel_element.ts @@ -71,9 +71,11 @@ export class SelectPanelElement extends HTMLElement { @target filterInputTextField: HTMLInputElement @target remoteInput: HTMLElement @target list: HTMLElement - @target noResults: HTMLElement - @target fragmentErrorElement: HTMLElement - @target bannerErrorElement: HTMLElement + @target ariaLiveContainer: HTMLElement + @target noItemsMessage: HTMLElement + @target noMatchesMessage: HTMLElement + @target bodyErrorMessage: HTMLElement + @target bannerErrorMessage: HTMLElement @target bodySpinner: HTMLElement @target liveRegion: LiveRegionElement @@ -85,7 +87,6 @@ export class SelectPanelElement extends HTMLElement { #inputName = '' #selectedItems: Map = new Map() #loadingDelayTimeoutId: number | null = null - #loadingAnnouncementTimeoutId: number | null = null #hasLoadedData = false get open(): boolean { @@ -398,14 +399,18 @@ export class SelectPanelElement extends HTMLElement { #setTextFieldLoadingSpinnerTimer() { if (!this.#filterInputTextFieldElement) return if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId) - if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId) - this.#loadingAnnouncementTimeoutId = setTimeout(() => { + this.#loadingDelayTimeoutId = setTimeout(() => { + this.#filterInputTextFieldElement?.showLeadingSpinner() this.liveRegion.announce('Loading') - }, 2000) as unknown as number + }, 1000) as unknown as number + } + + #setBodyLoadingTimer() { + if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId) this.#loadingDelayTimeoutId = setTimeout(() => { - this.#filterInputTextFieldElement?.showLeadingSpinner() + this.liveRegion.announce('Loading') }, 1000) as unknown as number } @@ -550,7 +555,7 @@ export class SelectPanelElement extends HTMLElement { case 'error': { this.#toggleIncludeFragmentElements(true) - const errorElement = this.fragmentErrorElement + const errorElement = this.bodyErrorMessage // check if the errorElement is visible in the dom if (errorElement && !errorElement.hasAttribute('hidden')) { this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'}) @@ -597,8 +602,11 @@ export class SelectPanelElement extends HTMLElement { this.#clearErrorState() this.bodySpinner?.removeAttribute('hidden') - if (this.bodySpinner) break - this.#setTextFieldLoadingSpinnerTimer() + if (this.bodySpinner) { + this.#setBodyLoadingTimer() + } else { + this.#setTextFieldLoadingSpinnerTimer() + } } break @@ -606,7 +614,6 @@ export class SelectPanelElement extends HTMLElement { case 'loadend': { this.#filterInputTextFieldElement?.hideLeadingSpinner() - if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId) if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId) this.dispatchEvent(new CustomEvent('loadend')) break @@ -678,9 +685,9 @@ export class SelectPanelElement extends HTMLElement { if (!this.list) return let atLeastOneResult = false + const query = this.filterInputTextField?.value ?? '' if (this.#performFilteringLocally()) { - const query = this.filterInputTextField?.value ?? '' const filter = this.filterFn || this.#defaultFilterFn for (const item of this.items) { @@ -696,7 +703,6 @@ export class SelectPanelElement extends HTMLElement { } this.#updateTabIndices() - this.#maybeAnnounce() for (const item of this.items) { const itemContent = this.#getItemContent(item) @@ -714,43 +720,60 @@ export class SelectPanelElement extends HTMLElement { this.#hasLoadedData = true - if (!this.noResults) return - if (this.#inErrorState()) { - this.noResults.setAttribute('hidden', '') + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.setAttribute('hidden', '') return } if (atLeastOneResult) { - this.noResults.setAttribute('hidden', '') - // TODO can we change this to search for `@panelId-list` + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.setAttribute('hidden', '') + + // TODO can we change this to search for `@panelId-list`? this.list?.querySelector('.ActionListWrap')?.removeAttribute('hidden') - } else { + } else if (!this.#isLoading()) { + if (query === '') { + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.removeAttribute('hidden') + } else { + this.noMatchesMessage?.removeAttribute('hidden') + this.noItemsMessage?.setAttribute('hidden', '') + } + this.list?.querySelector('.ActionListWrap')?.setAttribute('hidden', '') - this.noResults.removeAttribute('hidden') } + + this.#maybeAnnounce() + } + + #isLoading(): boolean { + return Boolean(this.bodySpinner) || (this.#filterInputTextFieldElement?.isLoading() ?? false) } #inErrorState(): boolean { - if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) { + if (this.bodyErrorMessage && !this.bodyErrorMessage.hasAttribute('hidden')) { return true } - if (!this.bannerErrorElement) return false + if (!this.bannerErrorMessage) return false - return !this.bannerErrorElement.hasAttribute('hidden') + return !this.bannerErrorMessage.hasAttribute('hidden') } #setErrorState(type: ErrorStateType) { - let errorElement = this.fragmentErrorElement - - if (type === ErrorStateType.BODY && this.fragmentErrorElement) { - this.fragmentErrorElement.removeAttribute('hidden') - this.bannerErrorElement.setAttribute('hidden', '') + let errorElement = this.bodyErrorMessage + + // If the error type is BODY but the body error message element doesn't exist, + // that means the no items/results message is showing, so the error needs to be + // shown in banner form instead. + if (type === ErrorStateType.BODY && this.bodyErrorMessage) { + this.bodyErrorMessage?.removeAttribute('hidden') + this.bannerErrorMessage.setAttribute('hidden', '') } else { - errorElement = this.bannerErrorElement - this.bannerErrorElement?.removeAttribute('hidden') - this.fragmentErrorElement?.setAttribute('hidden', '') + errorElement = this.bannerErrorMessage + this.bannerErrorMessage?.removeAttribute('hidden') + this.bodyErrorMessage?.setAttribute('hidden', '') } // check if the errorElement is visible in the dom @@ -761,8 +784,8 @@ export class SelectPanelElement extends HTMLElement { } #clearErrorState() { - this.fragmentErrorElement?.setAttribute('hidden', '') - this.bannerErrorElement.setAttribute('hidden', '') + this.bodyErrorMessage?.setAttribute('hidden', '') + this.bannerErrorMessage.setAttribute('hidden', '') } #maybeAnnounce() { @@ -773,7 +796,14 @@ export class SelectPanelElement extends HTMLElement { const instructions = 'tab for results' this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`) } else { - const noResultsEl = this.noResults + const noResultsEl = (() => { + if (this.noMatchesMessage && !this.noMatchesMessage.hasAttribute('hidden')) { + return this.noMatchesMessage + } + + return this.noItemsMessage + })() + if (noResultsEl) { this.liveRegion.announceFromElement(noResultsEl) } diff --git a/app/lib/primer/forms/primer_text_field.ts b/app/lib/primer/forms/primer_text_field.ts index bce11220e6..da225a7c48 100644 --- a/app/lib/primer/forms/primer_text_field.ts +++ b/app/lib/primer/forms/primer_text_field.ts @@ -106,4 +106,8 @@ export class PrimerTextFieldElement extends HTMLElement { this.leadingSpinner?.setAttribute('hidden', '') this.leadingVisual?.removeAttribute('hidden') } + + isLoading(): boolean { + return !this.leadingSpinner?.hasAttribute('hidden') + } } diff --git a/previews/primer/alpha/select_panel_preview.rb b/previews/primer/alpha/select_panel_preview.rb index d5e2b539f0..af61d84fed 100644 --- a/previews/primer/alpha/select_panel_preview.rb +++ b/previews/primer/alpha/select_panel_preview.rb @@ -36,12 +36,12 @@ def playground( render_with_template(locals: { subtitle: subtitle, selected_items: selected_items, + no_results_label: no_results_label, system_arguments: { title: title, size: size, simulate_failure: simulate_failure, simulate_no_results: simulate_no_results, - no_results_label: no_results_label, dynamic_label: dynamic_label, dynamic_label_prefix: dynamic_label_prefix, dynamic_aria_label_prefix: dynamic_aria_label_prefix, diff --git a/previews/primer/alpha/select_panel_preview/playground.html.erb b/previews/primer/alpha/select_panel_preview/playground.html.erb index d7e869c049..7285e7e5a6 100644 --- a/previews/primer/alpha/select_panel_preview/playground.html.erb +++ b/previews/primer/alpha/select_panel_preview/playground.html.erb @@ -19,6 +19,14 @@ <% if subtitle %> <% panel.with_subtitle { subtitle } %> <% end %> + <% if no_results_label %> + <% panel.with_no_items_message do |message| %> + <% message.with_title { no_results_label } %> + <% end %> + <% panel.with_no_matches_message do |message| %> + <% message.with_title { no_results_label } %> + <% end %> + <% end %> <% end %> <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %> diff --git a/test/components/alpha/select_panel_test.rb b/test/components/alpha/select_panel_test.rb index 36fb472eb2..08ee6564bd 100644 --- a/test/components/alpha/select_panel_test.rb +++ b/test/components/alpha/select_panel_test.rb @@ -54,24 +54,6 @@ def test_renders_footer assert_selector "select-panel .Overlay-footer", text: "I'm a footer!" end - def test_renders_custom_preload_error_content - render_inline(Primer::Alpha::SelectPanel.new(fetch_strategy: :eventually_local, src: "/foo")) do |panel| - panel.with_preload_error_content { "Foobar" } - end - - banner_element = page.find_css("select-panel [data-target='select-panel.fragmentErrorElement']") - assert_includes banner_element.text, "Foobar" - end - - def test_renders_custom_error_content - render_inline(Primer::Alpha::SelectPanel.new) do |panel| - panel.with_error_content { "Foobar" } - end - - banner_element = page.find_css("select-panel [data-target='select-panel.bannerErrorElement']").first - assert_includes banner_element.text, "Foobar" - end - def test_invoker_controls_dialog render_preview(:default) @@ -177,6 +159,92 @@ def test_does_not_raise_if_role_not_given_to_avatar_item_slot assert_selector(".avatar-small") end + + def test_renders_default_body_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.bodyErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Sorry, something went wrong.", visible: :hidden + message_el.assert_selector "h3", text: "Try again or if the problem persists, contact support.", visible: :hidden + end + end + + def test_renders_custom_body_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_body_error_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.bodyErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end + + def test_renders_default_banner_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.bannerErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector ".Banner", text: "Sorry, something went wrong.", visible: :hidden + end + end + + def test_renders_custom_banner_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_banner_error_message { "Foobarbazboo" } + end + + assert_selector "select-panel [data-target='select-panel.bannerErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector ".Banner", text: "Foobarbazboo", visible: :hidden + end + end + + def test_renders_default_no_items_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.noItemsMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "No items found.", visible: :hidden + end + end + + def test_renders_custom_no_items_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_no_items_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.noItemsMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end + + def test_renders_default_no_matches_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.noMatchesMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "No matches found.", visible: :hidden + message_el.assert_selector "h3", text: "Try adjusting your search terms.", visible: :hidden + end + end + + def test_renders_custom_no_matches_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_no_matches_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.noMatchesMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end end end end diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb index f6c3e8f750..e74f0bad3e 100644 --- a/test/system/alpha/select_panel_test.rb +++ b/test/system/alpha/select_panel_test.rb @@ -306,6 +306,25 @@ def test_selecting_without_data_values assert_selector "[aria-selected=true]", text: "Item 2", count: 1, visible: :hidden end + def test_no_items_message + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + + assert_selector "select-panel", text: "No items found." + refute_selector "select-panel", text: "No matches found." + end + + def test_no_matches_message + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + filter_results(query: "foobar") + + assert_selector "select-panel", text: "No matches found." + refute_selector "select-panel", text: "No items found." + end + ########## SINGLE SELECT TESTS ############ def test_single_select_item_checked @@ -749,7 +768,7 @@ def test_banner_scheme_is_passed_to_banner_component filter_results(query: "foobar") end - assert_selector "[data-target='select-panel.bannerErrorElement'] .Banner--warning", text: "Sorry, something went wrong" + assert_selector "[data-target='select-panel.bannerErrorMessage'] .Banner--warning", text: "Sorry, something went wrong" end ########## JAVASCRIPT API TESTS ############ @@ -912,17 +931,6 @@ def test_closed_event assert page.evaluate_script("window.panelClosed") end - ########### LOCAL FETCH TESTS ############ - - def test_local_fetch_no_results - visit_preview(:local_fetch_no_results) - - click_on_invoker_button - - refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" - end - ########## EVENTUALLY LOCAL TESTS ############ def test_ev_loc_items_load @@ -943,7 +951,7 @@ def test_ev_loc_no_results end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No items found." end def test_ev_loc_no_results_after_filter @@ -958,7 +966,7 @@ def test_ev_loc_no_results_after_filter filter_results(query: "foobar") refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No matches found." end def test_ev_loc_initial_failure @@ -969,8 +977,8 @@ def test_ev_loc_initial_failure end refute_selector "select-panel ul li" - assert_selector "[data-target='select-panel.fragmentErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.bannerErrorElement']" + assert_selector "[data-target='select-panel.bodyErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bannerErrorMessage']" end def test_ev_loc_items_load_without_filter @@ -1004,7 +1012,7 @@ def test_remote_no_results end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No items found." end def test_remote_no_results_after_filter @@ -1021,7 +1029,7 @@ def test_remote_no_results_after_filter end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No matches found." end def test_remote_initial_failure @@ -1034,8 +1042,8 @@ def test_remote_initial_failure refute_selector "select-panel ul li" # only the error message in the list body should appear - assert_selector "[data-target='select-panel.fragmentErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.bannerErrorElement']" + assert_selector "[data-target='select-panel.bodyErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bannerErrorMessage']" end def test_remote_filter_failure @@ -1055,8 +1063,8 @@ def test_remote_filter_failure assert_selector "select-panel ul li" # only the banner-based error message should appear - assert_selector "[data-target='select-panel.bannerErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.fragmentErrorElement']" + assert_selector "[data-target='select-panel.bannerErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bodyErrorMessage']" end def test_no_results_filter_failure @@ -1067,15 +1075,15 @@ def test_no_results_filter_failure end # no items on initial load - assert_selector "select-panel", text: "No results found" + assert_selector "select-panel", text: "No items found" wait_for_items_to_load do filter_results(query: "foobar") end # only the banner-based error message should appear - assert_selector "[data-target='select-panel.bannerErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.fragmentErrorElement']" + assert_selector "[data-target='select-panel.bannerErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bodyErrorMessage']" end def test_remote_fetch_clears_input_on_close @@ -1278,7 +1286,7 @@ def test_remote_fetch_announces_items def test_ev_loc_announces_no_results visit_preview(:eventually_local_fetch_no_results) - assert_announces(message: "No results found") do + assert_announces(message: "No items found.") do wait_for_items_to_load do click_on_invoker_button end @@ -1288,7 +1296,7 @@ def test_ev_loc_announces_no_results def test_remote_fetch_announces_no_results visit_preview(:remote_fetch_no_results) - assert_announces(message: "No results found") do + assert_announces(message: "No items found.") do wait_for_items_to_load do click_on_invoker_button end