diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark.png new file mode 100644 index 0000000000..e7821220c7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_colorblind.png new file mode 100644 index 0000000000..43d371a568 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_dimmed.png new file mode 100644 index 0000000000..e190d6e6ec Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_high_contrast.png new file mode 100644 index 0000000000..8dcee54584 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/default.png new file mode 100644 index 0000000000..ecd3bc4ba6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/focused.png new file mode 100644 index 0000000000..c240bd309e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light.png new file mode 100644 index 0000000000..38ddc2f64e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_colorblind.png new file mode 100644 index 0000000000..3da65fd809 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_high_contrast.png new file mode 100644 index 0000000000..f71f1f4df4 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/default/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark.png new file mode 100644 index 0000000000..3be5cc64cc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_colorblind.png new file mode 100644 index 0000000000..97bbce38a6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_dimmed.png new file mode 100644 index 0000000000..58210777da Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_high_contrast.png new file mode 100644 index 0000000000..8c02f07da3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/default.png new file mode 100644 index 0000000000..aaa7525bb0 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/focused.png new file mode 100644 index 0000000000..ac650c6abc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light.png new file mode 100644 index 0000000000..58cf9d7b3f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_colorblind.png new file mode 100644 index 0000000000..064ed1a61e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_high_contrast.png new file mode 100644 index 0000000000..1898216b9b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark.png new file mode 100644 index 0000000000..54aa52295e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_colorblind.png new file mode 100644 index 0000000000..ba186e1726 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_dimmed.png new file mode 100644 index 0000000000..3649f4b187 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_high_contrast.png new file mode 100644 index 0000000000..c245e354d2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/default.png new file mode 100644 index 0000000000..acdc0d17ba Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/focused.png new file mode 100644 index 0000000000..41bf6b4373 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light.png new file mode 100644 index 0000000000..edf87b7e04 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_colorblind.png new file mode 100644 index 0000000000..324ea63dde Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_high_contrast.png new file mode 100644 index 0000000000..e1addbef6e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_select_with_internal_label/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark.png new file mode 100644 index 0000000000..cd825fae78 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_colorblind.png new file mode 100644 index 0000000000..c423465410 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_dimmed.png new file mode 100644 index 0000000000..952fcf5f75 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_high_contrast.png new file mode 100644 index 0000000000..4769603146 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/default.png new file mode 100644 index 0000000000..aaa7525bb0 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/focused.png new file mode 100644 index 0000000000..ac650c6abc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light.png new file mode 100644 index 0000000000..0c2f318fef Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_colorblind.png new file mode 100644 index 0000000000..2989fdab56 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_high_contrast.png new file mode 100644 index 0000000000..0fd024180e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/single_selected_item/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark.png new file mode 100644 index 0000000000..c3c35cc3cb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_colorblind.png new file mode 100644 index 0000000000..bb1de3b52b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_dimmed.png new file mode 100644 index 0000000000..e46ebcc023 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_high_contrast.png new file mode 100644 index 0000000000..e790f74aaa Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/default.png new file mode 100644 index 0000000000..6ba0905b16 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/focused.png new file mode 100644 index 0000000000..6123111cc9 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light.png new file mode 100644 index 0000000000..f6243cd50a Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_colorblind.png new file mode 100644 index 0000000000..177ad6159a Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_high_contrast.png new file mode 100644 index 0000000000..be40c6ec57 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark.png new file mode 100644 index 0000000000..1c4952a495 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_colorblind.png new file mode 100644 index 0000000000..50d24f49bf Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_dimmed.png new file mode 100644 index 0000000000..4a49a4be99 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_high_contrast.png new file mode 100644 index 0000000000..a5f9dd86c7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/default.png new file mode 100644 index 0000000000..dee2327d6b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/focused.png new file mode 100644 index 0000000000..55bf069490 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png new file mode 100644 index 0000000000..a0265be487 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png new file mode 100644 index 0000000000..4fda7820c5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png new file mode 100644 index 0000000000..598ef5acdc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark.png new file mode 100644 index 0000000000..3a031ca5ef Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_colorblind.png new file mode 100644 index 0000000000..1c85c0a685 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_dimmed.png new file mode 100644 index 0000000000..fd9e855759 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_high_contrast.png new file mode 100644 index 0000000000..b1a7771e7b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/default.png new file mode 100644 index 0000000000..9fc047c384 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/focused.png new file mode 100644 index 0000000000..d9075b8ed9 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light.png new file mode 100644 index 0000000000..8134237496 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_colorblind.png new file mode 100644 index 0000000000..115a73843f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_high_contrast.png new file mode 100644 index 0000000000..9a1f98d0eb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/dropdown/default/light_high_contrast.png differ diff --git a/lib/primer/static/generate_previews.rb b/lib/primer/static/generate_previews.rb index dcecfa7997..3a27f76b43 100644 --- a/lib/primer/static/generate_previews.rb +++ b/lib/primer/static/generate_previews.rb @@ -33,10 +33,18 @@ def call scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario] scenarios.map do |scenario| + snapshot_tag = scenario.tags.find { |tag| tag.tag_name == "snapshot" } + snapshot = if snapshot_tag.nil? + "false" + elsif snapshot_tag.text.blank? + "true" + else + snapshot_tag.text + end { preview_path: scenario.lookup_path, name: scenario.name, - snapshot: scenario.tags.any? { |e| e.tag_name == "snapshot" }.to_s, + snapshot: snapshot, skip_rules: Primer::Accessibility.axe_rules_to_skip( component: component, scenario_name: scenario.name diff --git a/previews/primer/alpha/action_menu_preview.rb b/previews/primer/alpha/action_menu_preview.rb index ad41d97b97..831b0db1f7 100644 --- a/previews/primer/alpha/action_menu_preview.rb +++ b/previews/primer/alpha/action_menu_preview.rb @@ -32,6 +32,7 @@ def content_labels # @label Default # + # @snapshot interactive def default render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu| menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" } @@ -50,6 +51,7 @@ def default # @label Wide # + # @snapshot interactive def wide render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu| menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "A wider menu" } @@ -119,6 +121,7 @@ def links # @label Single item selected # + # @snapshot interactive def single_selected_item render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| menu.with_show_button { "Menu" } @@ -130,6 +133,7 @@ def single_selected_item # @label Single Select with Internal Label # + # @snapshot interactive def single_select_with_internal_label render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu| menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" } @@ -143,6 +147,7 @@ def single_select_with_internal_label # @label Multiple items selected # + # @snapshot interactive def multiple_selected_items render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu| menu.with_show_button { "Menu" } diff --git a/previews/primer/alpha/dialog_preview.rb b/previews/primer/alpha/dialog_preview.rb index bbea1b17cc..5346efb66c 100644 --- a/previews/primer/alpha/dialog_preview.rb +++ b/previews/primer/alpha/dialog_preview.rb @@ -37,6 +37,7 @@ def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: # @param visually_hide_title [Boolean] toggle # @param button_text [String] text # @param body_text [String] text + # @snapshot interactive def default(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false) render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d| d.with_show_button { button_text } diff --git a/previews/primer/alpha/dropdown_preview.rb b/previews/primer/alpha/dropdown_preview.rb index 4386cac536..bb0d685868 100644 --- a/previews/primer/alpha/dropdown_preview.rb +++ b/previews/primer/alpha/dropdown_preview.rb @@ -24,6 +24,7 @@ def playground(overlay: :default, with_caret: false) # @label Default # + # @snapshot interactive def default render(Primer::Alpha::Dropdown.new) do |component| component.with_button { "Dropdown" } diff --git a/static/info_arch.json b/static/info_arch.json index a753666420..fcad57c916 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -595,6 +595,45 @@ } ], "subcomponents": [ + { + "fully_qualified_name": "Primer::Alpha::ActionList::Divider", + "description": "Separator with optional text rendered above groups or between individual items.", + "is_form_component": false, + "is_published": true, + "requires_js": false, + "component": "ActionList::Divider", + "status": "alpha", + "a11y_reviewed": false, + "short_name": "ActionListDivider", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/", + "parameters": [ + { + "name": "scheme", + "type": "Symbol", + "default": "`:subtle`", + "description": "Display a background color if scheme is `filled`." + }, + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "{{link_to_system_arguments_docs}}" + } + ], + "slots": [ + + ], + "methods": [ + + ], + "previews": [ + + ], + "subcomponents": [ + + ] + }, { "fully_qualified_name": "Primer::Alpha::ActionList::Item", "description": "An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.", @@ -835,6 +874,34 @@ ] }, + { + "fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper", + "description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.", + "is_form_component": false, + "is_published": true, + "requires_js": false, + "component": "ActionList::FormWrapper", + "status": "alpha", + "a11y_reviewed": false, + "short_name": "ActionListFormWrapper", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/", + "parameters": [ + + ], + "slots": [ + + ], + "methods": [ + + ], + "previews": [ + + ], + "subcomponents": [ + + ] + }, { "fully_qualified_name": "Primer::Alpha::ActionList::Heading", "description": "Heading used to describe each sub list within an action list.", @@ -903,73 +970,6 @@ ], "subcomponents": [ - ] - }, - { - "fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper", - "description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.", - "is_form_component": false, - "is_published": true, - "requires_js": false, - "component": "ActionList::FormWrapper", - "status": "alpha", - "a11y_reviewed": false, - "short_name": "ActionListFormWrapper", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/", - "parameters": [ - - ], - "slots": [ - - ], - "methods": [ - - ], - "previews": [ - - ], - "subcomponents": [ - - ] - }, - { - "fully_qualified_name": "Primer::Alpha::ActionList::Divider", - "description": "Separator with optional text rendered above groups or between individual items.", - "is_form_component": false, - "is_published": true, - "requires_js": false, - "component": "ActionList::Divider", - "status": "alpha", - "a11y_reviewed": false, - "short_name": "ActionListDivider", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/", - "parameters": [ - { - "name": "scheme", - "type": "Symbol", - "default": "`:subtle`", - "description": "Display a background color if scheme is `filled`." - }, - { - "name": "system_arguments", - "type": "Hash", - "default": "N/A", - "description": "{{link_to_system_arguments_docs}}" - } - ], - "slots": [ - - ], - "methods": [ - - ], - "previews": [ - - ], - "subcomponents": [ - ] } ] @@ -1169,7 +1169,7 @@ { "preview_path": "primer/alpha/action_menu/default", "name": "default", - "snapshot": "false", + "snapshot": "true", "skip_rules": { "wont_fix": [ "region" @@ -2723,7 +2723,7 @@ { "preview_path": "primer/alpha/dialog/default", "name": "default", - "snapshot": "false", + "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" @@ -2827,41 +2827,23 @@ ], "subcomponents": [ { - "fully_qualified_name": "Primer::Alpha::Dialog::Header", - "description": "A `Dialog::Header` is a compositional component, used to render the\nHeader of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", + "fully_qualified_name": "Primer::Alpha::Dialog::Footer", + "description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", "is_form_component": false, "is_published": true, "requires_js": false, - "component": "Dialog::Header", + "component": "Dialog::Footer", "status": "alpha", "a11y_reviewed": true, - "short_name": "DialogHeader", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/header.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/header/default/", + "short_name": "DialogFooter", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/footer.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/footer/default/", "parameters": [ - { - "name": "title", - "type": "String", - "default": "N/A", - "description": "Describes the content of the dialog." - }, - { - "name": "subtitle", - "type": "String", - "default": "`nil`", - "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute." - }, { "name": "show_divider", "type": "Boolean", "default": "`false`", - "description": "Show a divider between the header and body." - }, - { - "name": "visually_hide_title", - "type": "Boolean", - "default": "`false`", - "description": "Visually hide the `title` while maintaining a label for assistive technologies." + "description": "Show a divider between the footer and body." }, { "name": "system_arguments", @@ -2884,24 +2866,18 @@ ] }, { - "fully_qualified_name": "Primer::Alpha::Dialog::Footer", - "description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", + "fully_qualified_name": "Primer::Alpha::Dialog::Body", + "description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", "is_form_component": false, "is_published": true, "requires_js": false, - "component": "Dialog::Footer", + "component": "Dialog::Body", "status": "alpha", "a11y_reviewed": true, - "short_name": "DialogFooter", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/footer.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/footer/default/", + "short_name": "DialogBody", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/body.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/body/default/", "parameters": [ - { - "name": "show_divider", - "type": "Boolean", - "default": "`false`", - "description": "Show a divider between the footer and body." - }, { "name": "system_arguments", "type": "Hash", @@ -2923,18 +2899,42 @@ ] }, { - "fully_qualified_name": "Primer::Alpha::Dialog::Body", - "description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", + "fully_qualified_name": "Primer::Alpha::Dialog::Header", + "description": "A `Dialog::Header` is a compositional component, used to render the\nHeader of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.", "is_form_component": false, "is_published": true, "requires_js": false, - "component": "Dialog::Body", + "component": "Dialog::Header", "status": "alpha", "a11y_reviewed": true, - "short_name": "DialogBody", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/body.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/body/default/", + "short_name": "DialogHeader", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/header.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/header/default/", "parameters": [ + { + "name": "title", + "type": "String", + "default": "N/A", + "description": "Describes the content of the dialog." + }, + { + "name": "subtitle", + "type": "String", + "default": "`nil`", + "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute." + }, + { + "name": "show_divider", + "type": "Boolean", + "default": "`false`", + "description": "Show a divider between the header and body." + }, + { + "name": "visually_hide_title", + "type": "Boolean", + "default": "`false`", + "description": "Visually hide the `title` while maintaining a label for assistive technologies." + }, { "name": "system_arguments", "type": "Hash", @@ -3235,34 +3235,6 @@ } ], "subcomponents": [ - { - "fully_qualified_name": "Primer::Alpha::Dropdown::Menu::Item", - "description": "Items to be rendered in the `Dropdown` menu.", - "is_form_component": false, - "is_published": true, - "requires_js": false, - "component": "Dropdown::Menu::Item", - "status": "alpha", - "a11y_reviewed": false, - "short_name": "DropdownMenuItem", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown/menu/item.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/menu/item/default/", - "parameters": [ - - ], - "slots": [ - - ], - "methods": [ - - ], - "previews": [ - - ], - "subcomponents": [ - - ] - }, { "fully_qualified_name": "Primer::Alpha::Dropdown::Menu", "description": "This component is part of `Dropdown` and should not be\nused as a standalone component.", @@ -3336,11 +3308,39 @@ "subcomponents": [ ] - } - ] - }, - { - "fully_qualified_name": "Primer::Alpha::FormButton", + }, + { + "fully_qualified_name": "Primer::Alpha::Dropdown::Menu::Item", + "description": "Items to be rendered in the `Dropdown` menu.", + "is_form_component": false, + "is_published": true, + "requires_js": false, + "component": "Dropdown::Menu::Item", + "status": "alpha", + "a11y_reviewed": false, + "short_name": "DropdownMenuItem", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown/menu/item.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/menu/item/default/", + "parameters": [ + + ], + "slots": [ + + ], + "methods": [ + + ], + "previews": [ + + ], + "subcomponents": [ + + ] + } + ] + }, + { + "fully_qualified_name": "Primer::Alpha::FormButton", "description": "A button input rendered using the HTML `