diff --git a/.changeset/odd-dots-laugh.md b/.changeset/odd-dots-laugh.md new file mode 100644 index 0000000000..7df6714df4 --- /dev/null +++ b/.changeset/odd-dots-laugh.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': minor +--- + +Support leading and trailing icons for Links diff --git a/.changeset/quiet-papayas-sparkle.md b/.changeset/quiet-papayas-sparkle.md new file mode 100644 index 0000000000..4b08cb25c2 --- /dev/null +++ b/.changeset/quiet-papayas-sparkle.md @@ -0,0 +1,5 @@ +--- +"@openproject/primer-view-components": patch +--- + +Fix issue causing AutoComplete elements to overflow their container diff --git a/.changeset/seven-experts-return.md b/.changeset/seven-experts-return.md new file mode 100644 index 0000000000..8a7eaa13a8 --- /dev/null +++ b/.changeset/seven-experts-return.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Ensure `full_width:` option is respected by the auto_complete input diff --git a/.changeset/two-badgers-suffer.md b/.changeset/two-badgers-suffer.md new file mode 100644 index 0000000000..2649b07c3c --- /dev/null +++ b/.changeset/two-badgers-suffer.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Prevent hidden inputs from taking up space on the page diff --git a/.changeset/weak-birds-unite.md b/.changeset/weak-birds-unite.md new file mode 100644 index 0000000000..6c69f5613c --- /dev/null +++ b/.changeset/weak-birds-unite.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Remove redundant code for better performance. diff --git a/.changeset/wild-shirts-heal.md b/.changeset/wild-shirts-heal.md new file mode 100644 index 0000000000..225f7910b0 --- /dev/null +++ b/.changeset/wild-shirts-heal.md @@ -0,0 +1,5 @@ +--- +"@openproject/primer-view-components": minor +--- + +Removing the validate classname check that forces system arguments instead of utility classes diff --git a/.github/workflows/demo-production-deploy.yml b/.github/workflows/demo-production-deploy.yml index 8f2094910b..67cef309a5 100644 --- a/.github/workflows/demo-production-deploy.yml +++ b/.github/workflows/demo-production-deploy.yml @@ -72,7 +72,7 @@ jobs: with: ruby-version: '3.3' bundler-cache: true - - uses: actions/cache@v4.0.2 + - uses: actions/cache@v4.1.0 with: path: demo/gemfiles/vendor/bundle key: gems-build-kuby-main-ruby-3.3.x-${{ hashFiles('demo/gemfiles/kuby.gemfile.lock') }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 6657107647..71205f70c5 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -12,7 +12,7 @@ jobs: - uses: actions/checkout@v4 - name: Get specific changed files id: changed-files - uses: tj-actions/changed-files@v45.0.2 + uses: tj-actions/changed-files@v45.0.4 with: files: | docs/**/*.md @@ -38,7 +38,7 @@ jobs: - uses: actions/checkout@v4 - name: Get specific changed files id: changed-files - uses: tj-actions/changed-files@v45.0.2 + uses: tj-actions/changed-files@v45.0.4 with: files: | app/**/*.rb @@ -58,7 +58,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v45.0.2 + uses: tj-actions/changed-files@v45.0.4 with: files: | app/components/**/*.erb @@ -75,7 +75,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v45.0.2 + uses: tj-actions/changed-files@v45.0.4 with: files: | app/components/**/*.ts @@ -95,7 +95,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v45.0.2 + uses: tj-actions/changed-files@v45.0.4 with: files: | app/components/**/*.pcss diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png index 3c6d150001..4ce766d649 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/default.png index 7c59ca6894..7e9b84e9cc 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png index d849d47a8a..4ce766d649 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark.png new file mode 100644 index 0000000000..29a8a76a69 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_colorblind.png new file mode 100644 index 0000000000..29a8a76a69 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_dimmed.png new file mode 100644 index 0000000000..71055fb891 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_high_contrast.png new file mode 100644 index 0000000000..6ad5ee4123 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/default.png new file mode 100644 index 0000000000..aeb87dd3b5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/focused.png new file mode 100644 index 0000000000..7e6aaa399f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light.png new file mode 100644 index 0000000000..e6fca89479 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_colorblind.png new file mode 100644 index 0000000000..e6fca89479 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_high_contrast.png new file mode 100644 index 0000000000..449983a1f6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/action_menu_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/default.png new file mode 100644 index 0000000000..28b5b2f095 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/focused.png new file mode 100644 index 0000000000..fa4307f673 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/after_content_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark.png new file mode 100644 index 0000000000..59d8aa1bf7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_colorblind.png new file mode 100644 index 0000000000..59d8aa1bf7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_dimmed.png new file mode 100644 index 0000000000..cf90bd6f06 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_high_contrast.png new file mode 100644 index 0000000000..9107ca2149 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/default.png new file mode 100644 index 0000000000..faa12468f7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/focused.png new file mode 100644 index 0000000000..a78fb65b11 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light.png new file mode 100644 index 0000000000..3d100547c8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_colorblind.png new file mode 100644 index 0000000000..3d100547c8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_high_contrast.png new file mode 100644 index 0000000000..9bf76ff215 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/default.png new file mode 100644 index 0000000000..d5be652462 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/focused.png new file mode 100644 index 0000000000..aef1fe268c Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/auto_complete_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/default.png new file mode 100644 index 0000000000..d04d9f052e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/focused.png new file mode 100644 index 0000000000..337f468673 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/caption_template_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark.png new file mode 100644 index 0000000000..9f99f112ea Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_colorblind.png new file mode 100644 index 0000000000..9f99f112ea Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_dimmed.png new file mode 100644 index 0000000000..fa9f3ba919 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_high_contrast.png new file mode 100644 index 0000000000..00587b1279 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/default.png new file mode 100644 index 0000000000..a1f97f5d6f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/focused.png new file mode 100644 index 0000000000..f6942f46f4 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light.png new file mode 100644 index 0000000000..6c516553b3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_colorblind.png new file mode 100644 index 0000000000..6c516553b3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_high_contrast.png new file mode 100644 index 0000000000..38a197c4f2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark.png new file mode 100644 index 0000000000..f912a9c6c8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_colorblind.png new file mode 100644 index 0000000000..f912a9c6c8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_dimmed.png new file mode 100644 index 0000000000..35d509f033 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_high_contrast.png new file mode 100644 index 0000000000..d12a580af6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/default.png new file mode 100644 index 0000000000..6b6de2eecd Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/focused.png new file mode 100644 index 0000000000..3d7de6d0fc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light.png new file mode 100644 index 0000000000..88da3c5ff8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_colorblind.png new file mode 100644 index 0000000000..88da3c5ff8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_high_contrast.png new file mode 100644 index 0000000000..360f188e10 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark.png new file mode 100644 index 0000000000..60f6eb4083 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_colorblind.png new file mode 100644 index 0000000000..60f6eb4083 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_dimmed.png new file mode 100644 index 0000000000..e7d48ef394 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_high_contrast.png new file mode 100644 index 0000000000..11d14920cd Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/default.png new file mode 100644 index 0000000000..472828f6c9 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/focused.png new file mode 100644 index 0000000000..819606efac Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light.png new file mode 100644 index 0000000000..111c64ec05 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_colorblind.png new file mode 100644 index 0000000000..111c64ec05 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_high_contrast.png new file mode 100644 index 0000000000..37daaeb4bf Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/composed_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark.png new file mode 100644 index 0000000000..6816681f60 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_colorblind.png new file mode 100644 index 0000000000..6816681f60 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_dimmed.png new file mode 100644 index 0000000000..0d52add04c Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_high_contrast.png new file mode 100644 index 0000000000..30d6d1b675 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/default.png new file mode 100644 index 0000000000..e1b23bda72 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/focused.png new file mode 100644 index 0000000000..91df031660 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light.png new file mode 100644 index 0000000000..ad87afb975 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_colorblind.png new file mode 100644 index 0000000000..ad87afb975 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_high_contrast.png new file mode 100644 index 0000000000..de36da7e75 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/example_toggle_switch_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark.png new file mode 100644 index 0000000000..83c3d0886b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_colorblind.png new file mode 100644 index 0000000000..83c3d0886b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_dimmed.png new file mode 100644 index 0000000000..f0ff64edce Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_high_contrast.png new file mode 100644 index 0000000000..04fc6ae4cb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/default.png new file mode 100644 index 0000000000..6e2d2bf8eb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/focused.png new file mode 100644 index 0000000000..796037303e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light.png new file mode 100644 index 0000000000..b2621780f3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_colorblind.png new file mode 100644 index 0000000000..b2621780f3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_high_contrast.png new file mode 100644 index 0000000000..033eaf3704 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/horizontal_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark.png new file mode 100644 index 0000000000..07a489f421 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_colorblind.png new file mode 100644 index 0000000000..505ac729a7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_dimmed.png new file mode 100644 index 0000000000..a74a2e8545 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_high_contrast.png new file mode 100644 index 0000000000..3838cd389c Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/default.png new file mode 100644 index 0000000000..0f437268f5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/focused.png new file mode 100644 index 0000000000..449b02ce85 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light.png new file mode 100644 index 0000000000..b262266b14 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_colorblind.png new file mode 100644 index 0000000000..2563c5d13d Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_high_contrast.png new file mode 100644 index 0000000000..f1c0b40a4d Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/immediate_validation_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark.png new file mode 100644 index 0000000000..1f723b6177 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_colorblind.png new file mode 100644 index 0000000000..08d9e05ee9 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_dimmed.png new file mode 100644 index 0000000000..1da253b8f1 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_high_contrast.png new file mode 100644 index 0000000000..16a3d625d2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/default.png new file mode 100644 index 0000000000..3a54eefa65 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/focused.png new file mode 100644 index 0000000000..eca44f2c67 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light.png new file mode 100644 index 0000000000..dbb102bee1 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_colorblind.png new file mode 100644 index 0000000000..1d78d57c07 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_high_contrast.png new file mode 100644 index 0000000000..b57abf381f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/invalid_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/default.png new file mode 100644 index 0000000000..d4519edd05 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/focused.png new file mode 100644 index 0000000000..a567ea7564 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark.png new file mode 100644 index 0000000000..5060558fea Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_colorblind.png new file mode 100644 index 0000000000..5060558fea Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_dimmed.png new file mode 100644 index 0000000000..755d85f2e9 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_high_contrast.png new file mode 100644 index 0000000000..2c30c90294 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/default.png new file mode 100644 index 0000000000..48cfa2685b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/focused.png new file mode 100644 index 0000000000..0891846d73 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light.png new file mode 100644 index 0000000000..e7cdd8ccbc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_colorblind.png new file mode 100644 index 0000000000..e7cdd8ccbc Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_high_contrast.png new file mode 100644 index 0000000000..f25742b106 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/multi_text_field_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark.png new file mode 100644 index 0000000000..7118419be7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_colorblind.png new file mode 100644 index 0000000000..7118419be7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_dimmed.png new file mode 100644 index 0000000000..a7cc8c2b82 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_high_contrast.png new file mode 100644 index 0000000000..dc87628046 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/default.png new file mode 100644 index 0000000000..3f08c28cb3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/focused.png new file mode 100644 index 0000000000..3d3e8c968a Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light.png new file mode 100644 index 0000000000..0c0546f566 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_colorblind.png new file mode 100644 index 0000000000..0c0546f566 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_high_contrast.png new file mode 100644 index 0000000000..29ae95428a Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark.png new file mode 100644 index 0000000000..d93cd25e3f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_colorblind.png new file mode 100644 index 0000000000..d93cd25e3f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_dimmed.png new file mode 100644 index 0000000000..1342de94d2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_high_contrast.png new file mode 100644 index 0000000000..a0552fcb82 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/default.png new file mode 100644 index 0000000000..a19d75ea9d Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/focused.png new file mode 100644 index 0000000000..f20cac514e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light.png new file mode 100644 index 0000000000..4fd43ac64e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_colorblind.png new file mode 100644 index 0000000000..4fd43ac64e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_high_contrast.png new file mode 100644 index 0000000000..78f57f7c74 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark.png new file mode 100644 index 0000000000..0759186871 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_colorblind.png new file mode 100644 index 0000000000..0759186871 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_dimmed.png new file mode 100644 index 0000000000..2fd1cbb6dd Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_high_contrast.png new file mode 100644 index 0000000000..2c8b5fafd6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/default.png new file mode 100644 index 0000000000..61a95e80c6 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/focused.png new file mode 100644 index 0000000000..44571d9240 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light.png new file mode 100644 index 0000000000..9a06753cf7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_colorblind.png new file mode 100644 index 0000000000..9a06753cf7 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_high_contrast.png new file mode 100644 index 0000000000..0c1d129a39 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark.png new file mode 100644 index 0000000000..d66df3c179 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_colorblind.png new file mode 100644 index 0000000000..d66df3c179 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_dimmed.png new file mode 100644 index 0000000000..db828f5ae0 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_high_contrast.png new file mode 100644 index 0000000000..c51031c9ca Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/default.png new file mode 100644 index 0000000000..8f9424e690 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/focused.png new file mode 100644 index 0000000000..38892560be Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light.png new file mode 100644 index 0000000000..3d8fda38e2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_colorblind.png new file mode 100644 index 0000000000..3d8fda38e2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_high_contrast.png new file mode 100644 index 0000000000..82d1ea2bb5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/select_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/default.png new file mode 100644 index 0000000000..3709c21988 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/focused.png new file mode 100644 index 0000000000..d2e73121a3 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/single_text_field_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark.png new file mode 100644 index 0000000000..6657701b2f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_colorblind.png new file mode 100644 index 0000000000..199da427db Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_dimmed.png new file mode 100644 index 0000000000..45cc3593b1 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_high_contrast.png new file mode 100644 index 0000000000..b65adf79a2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/default.png new file mode 100644 index 0000000000..4d8e680062 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/focused.png new file mode 100644 index 0000000000..9b29bd95a2 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light.png new file mode 100644 index 0000000000..58e546b5ec Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_colorblind.png new file mode 100644 index 0000000000..73347cc87e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_high_contrast.png new file mode 100644 index 0000000000..3068a61346 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/submit_button_form/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/default.png new file mode 100644 index 0000000000..e8b4876cd8 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/focused.png new file mode 100644 index 0000000000..2155e6034b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/forms/text_field_and_checkbox_form/focused.png differ diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb index a8473e6bc2..82b897d8fc 100644 --- a/app/components/primer/alpha/action_bar.rb +++ b/app/components/primer/alpha/action_bar.rb @@ -88,9 +88,9 @@ def render_overflow_menu? def before_render @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div @system_arguments[:classes] = class_names( - @system_arguments[:classes], - "overflow-visible": !render_overflow_menu? + @system_arguments[:classes] ) + @system_arguments[:overflow] = :visible if render_overflow_menu? content end end diff --git a/app/components/primer/alpha/action_bar_element.ts b/app/components/primer/alpha/action_bar_element.ts index d5d76f7ad0..e59e722c44 100644 --- a/app/components/primer/alpha/action_bar_element.ts +++ b/app/components/primer/alpha/action_bar_element.ts @@ -36,14 +36,6 @@ class ActionBarElement extends HTMLElement { #focusZoneAbortController: AbortController | null = null connectedCallback() { - // Calculate the width of all the items before hiding anything - for (const item of this.items) { - const width = item.getBoundingClientRect().width - const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10) - const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10) - item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`) - } - resizeObserver.observe(this) instersectionObserver.observe(this) diff --git a/app/components/primer/base_component.rb b/app/components/primer/base_component.rb index ffb713e654..2e90df8e8c 100644 --- a/app/components/primer/base_component.rb +++ b/app/components/primer/base_component.rb @@ -151,6 +151,7 @@ class BaseComponent < Primer::Component # | :- | :- | :- | # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. | # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. | + # | trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. | def initialize(tag:, classes: nil, **system_arguments) @tag = tag @@ -158,6 +159,8 @@ def initialize(tag:, classes: nil, **system_arguments) @result = Primer::Classify.call(**@system_arguments.merge(classes: classes)) + @trim = !!@system_arguments.delete(:trim) + @system_arguments[:"data-view-component"] = true # Filter out Primer keys so they don't get assigned as HTML attributes @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys) @@ -167,7 +170,7 @@ def call if SELF_CLOSING_TAGS.include?(@tag) tag(@tag, @content_tag_args.merge(@result)) else - content_tag(@tag, content, @content_tag_args.merge(@result)) + content_tag(@tag, @trim ? trimmed_content : content, @content_tag_args.merge(@result)) end end end diff --git a/app/components/primer/beta/auto_complete.rb b/app/components/primer/beta/auto_complete.rb index fe51dcaa82..5839822adf 100644 --- a/app/components/primer/beta/auto_complete.rb +++ b/app/components/primer/beta/auto_complete.rb @@ -44,6 +44,7 @@ class AutoComplete < Primer::Component system_arguments[:"allow-out-of-bounds"] = "" system_arguments[:id] = @list_id system_arguments[:popover] = "" + system_arguments[:overflow_y] = :auto system_arguments[:classes] = class_names( "ActionListWrap ActionListWrap--inset", @overlay_classes, diff --git a/app/components/primer/beta/button.rb b/app/components/primer/beta/button.rb index f595c2245a..7a362aa4fd 100644 --- a/app/components/primer/beta/button.rb +++ b/app/components/primer/beta/button.rb @@ -159,17 +159,6 @@ def before_render "Button--invisible-noVisuals" ) end - - def trimmed_content - return if content.blank? - - trimmed_content = content.strip - - return trimmed_content unless content.html_safe? - - # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break - trimmed_content.html_safe # rubocop:disable Rails/OutputSafety - end end end end diff --git a/app/components/primer/beta/link.html.erb b/app/components/primer/beta/link.html.erb new file mode 100644 index 0000000000..25093f52b2 --- /dev/null +++ b/app/components/primer/beta/link.html.erb @@ -0,0 +1,18 @@ +<%= render Primer::ConditionalWrapper.new(condition: tooltip?, trim: true, tag: :span, position: :relative) do %> + <%= render(Primer::BaseComponent.new(trim: true, **@system_arguments)) do %> + <% if leading_visual || trailing_visual %> + <%= render(Primer::BaseComponent.new(tag: :span, classes: "Link-content", trim: true)) do %> + <% if leading_visual %> + <%= leading_visual %> + <% end %> + <%= content %> + <% if trailing_visual %> + <%= trailing_visual %> + <% end %> + <% end %> + <% else %> + <%= content %> + <% end %> + <% end %> + <%= tooltip if tooltip? %> +<% end %> diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss index 647736b767..9a832d715f 100644 --- a/app/components/primer/beta/link.pcss +++ b/app/components/primer/beta/link.pcss @@ -67,3 +67,12 @@ color: inherit !important; } } + +.Link-content { + display: inline-flex; + align-items: center; + /* stylelint-disable-next-line primer/typography */ + line-height: normal; + gap: var(--base-size-4); + text-decoration: inherit; +} diff --git a/app/components/primer/beta/link.rb b/app/components/primer/beta/link.rb index 91462e6ae7..1fdfd0442a 100644 --- a/app/components/primer/beta/link.rb +++ b/app/components/primer/beta/link.rb @@ -30,6 +30,32 @@ class Link < Primer::Component Primer::Alpha::Tooltip.new(**system_arguments) } + # Leading visuals appear to the left of the link text. + # + # Use: + # + # - `leading_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>. + # + # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>. + renders_one :leading_visual, types: { + icon: lambda { |**system_arguments| + Primer::Beta::Octicon.new(**system_arguments) + } + } + + # Trailing visuals appear to the right of the link text. + # + # Use: + # + # - `trailing_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>. + # + # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>. + renders_one :trailing_visual, types: { + icon: lambda { |**system_arguments| + Primer::Beta::Octicon.new(**system_arguments) + } + } + # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered. # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %> # @param muted [Boolean] Uses light gray for Link color, and blue on hover. @@ -54,20 +80,6 @@ def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: false def before_render raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production? end - - def call - if tooltip.present? - render Primer::BaseComponent.new(tag: :span, position: :relative) do - render(Primer::BaseComponent.new(**@system_arguments)) do - content - end.to_s + tooltip.to_s - end - else - render(Primer::BaseComponent.new(**@system_arguments)) do - content - end - end - end end end end diff --git a/app/components/primer/button_component.rb b/app/components/primer/button_component.rb index 74b112773f..2160386d7c 100644 --- a/app/components/primer/button_component.rb +++ b/app/components/primer/button_component.rb @@ -111,16 +111,5 @@ def initialize( def link? @scheme == LINK_SCHEME end - - def trimmed_content - return if content.blank? - - trimmed_content = content.strip - - return trimmed_content unless content.html_safe? - - # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break - trimmed_content.html_safe # rubocop:disable Rails/OutputSafety - end end end diff --git a/app/components/primer/component.rb b/app/components/primer/component.rb index 690c6a6b1b..84b5e8c620 100644 --- a/app/components/primer/component.rb +++ b/app/components/primer/component.rb @@ -148,5 +148,12 @@ def shouldnt_raise_error? def should_raise_aria_error? !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"] end + + def trimmed_content + return content unless content.present? + + # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break + content.html_safe? ? content.strip.html_safe : content.strip # rubocop:disable Rails/OutputSafety + end end end diff --git a/app/components/primer/conditional_wrapper.rb b/app/components/primer/conditional_wrapper.rb index 57c61e93b7..27fcc46368 100644 --- a/app/components/primer/conditional_wrapper.rb +++ b/app/components/primer/conditional_wrapper.rb @@ -10,12 +10,15 @@ class ConditionalWrapper < Primer::Component def initialize(condition:, **base_component_arguments) @condition = condition @base_component_arguments = base_component_arguments + @trim = !!@base_component_arguments.delete(:trim) end def call - return content unless @condition + unless @condition + return @trim ? trimmed_content : content + end - BaseComponent.new(**@base_component_arguments).render_in(self) { content } + BaseComponent.new(trim: @trim, **@base_component_arguments).render_in(self) { content } end end end diff --git a/app/forms/horizontal_form.rb b/app/forms/horizontal_form.rb index 9c821b2abc..f7b1b33045 100644 --- a/app/forms/horizontal_form.rb +++ b/app/forms/horizontal_form.rb @@ -3,6 +3,8 @@ # :nodoc: class HorizontalForm < ApplicationForm form do |my_form| + my_form.hidden(name: :token, value: "abc123") + my_form.group(layout: :horizontal) do |name_group| name_group.text_field( name: :first_name, diff --git a/app/lib/primer/forms/auto_complete.rb b/app/lib/primer/forms/auto_complete.rb index f1e2d48506..f2f8353b97 100644 --- a/app/lib/primer/forms/auto_complete.rb +++ b/app/lib/primer/forms/auto_complete.rb @@ -40,7 +40,8 @@ def auto_complete_arguments input_name: all_args[:name], input_id: all_args[:id], label_text: @input.label, - list_id: "#{all_args[:id]}-list" + list_id: "#{all_args[:id]}-list", + full_width: @input.full_width? ) end diff --git a/app/lib/primer/forms/dsl/hidden_input.rb b/app/lib/primer/forms/dsl/hidden_input.rb index cbf00e450c..348f82a0ff 100644 --- a/app/lib/primer/forms/dsl/hidden_input.rb +++ b/app/lib/primer/forms/dsl/hidden_input.rb @@ -27,6 +27,10 @@ def type def supports_validation? false end + + def hidden? + true + end end end end diff --git a/app/lib/primer/forms/group.rb b/app/lib/primer/forms/group.rb index 2b7239b7f8..b0ebcec02d 100644 --- a/app/lib/primer/forms/group.rb +++ b/app/lib/primer/forms/group.rb @@ -18,9 +18,12 @@ def initialize(inputs:, builder:, form:, layout: DEFAULT_LAYOUT, **system_argume @layout = layout @system_arguments = system_arguments + @system_arguments[:display] = :none if inputs.all?(&:hidden?) + @system_arguments[:classes] = class_names( @system_arguments.delete(:classes), - "FormControl-horizontalGroup" => horizontal? + "FormControl-horizontalGroup" => horizontal?, + "FormControl-spacingWrapper" => !horizontal? && inputs.size > 1 ) end diff --git a/lib/primer/classify.rb b/lib/primer/classify.rb index bb8f4a1a1a..7c00476f19 100644 --- a/lib/primer/classify.rb +++ b/lib/primer/classify.rb @@ -49,9 +49,7 @@ def call(args = {}) case key when :classes # insert :classes first to avoid huge doc diffs - if (class_names = validated_class_names(val)) - result.unshift(class_names) - end + result.unshift(val) next when :style style = val @@ -105,29 +103,6 @@ def validate(key, val, brk) brk_str = Primer::Classify::Utilities::BREAKPOINTS[brk] Primer::Classify::Utilities.validate(key, val, brk_str) end - - def validated_class_names(classes) - return if classes.blank? - - if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"] - invalid_class_names = - classes.split.each_with_object([]) do |class_name, memo| - memo << class_name if Primer::Classify::Validation.invalid?(class_name) - end - - if invalid_class_names.any? - raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\ - "instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\ - "This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." - end - end - - classes - end - - def raise_on_invalid_options? - Rails.application.config.primer_view_components.raise_on_invalid_options - end end end end diff --git a/lib/primer/classify/utilities.yml b/lib/primer/classify/utilities.yml index d11d7612c3..265e163d3e 100644 --- a/lib/primer/classify/utilities.yml +++ b/lib/primer/classify/utilities.yml @@ -1877,3 +1877,66 @@ - flex-md-shrink-0 - flex-lg-shrink-0 - flex-xl-shrink-0 +:overflow: + :auto: + - overflow-auto + - overflow-sm-auto + - overflow-lg-auto + - overflow-xl-auto + :hidden: + - overflow-hidden + - overflow-sm-hidden + - overflow-lg-hidden + - overflow-xl-hidden + :scroll: + - overflow-scroll + - overflow-sm-scroll + - overflow-lg-scroll + - overflow-xl-scroll + :visible: + - overflow-visible + - overflow-sm-visible + - overflow-lg-visible + - overflow-xl-visible +:overflow_x: + :auto: + - overflow-x-auto + - overflow-sm-x-auto + - overflow-lg-x-auto + - overflow-xl-x-auto + :hidden: + - overflow-x-hidden + - overflow-sm-x-hidden + - overflow-lg-x-hidden + - overflow-xl-x-hidden + :scroll: + - overflow-x-scroll + - overflow-sm-x-scroll + - overflow-lg-x-scroll + - overflow-xl-x-scroll + :visible: + - overflow-x-visible + - overflow-sm-x-visible + - overflow-lg-x-visible + - overflow-xl-x-visible +:overflow_y: + :auto: + - overflow-y-auto + - overflow-sm-y-auto + - overflow-lg-y-auto + - overflow-xl-y-auto + :hidden: + - overflow-y-hidden + - overflow-sm-y-hidden + - overflow-lg-y-hidden + - overflow-xl-y-hidden + :scroll: + - overflow-y-scroll + - overflow-sm-y-scroll + - overflow-lg-y-scroll + - overflow-xl-y-scroll + :visible: + - overflow-y-visible + - overflow-sm-y-visible + - overflow-lg-y-visible + - overflow-xl-y-visible \ No newline at end of file diff --git a/lib/primer/forms/primer_multi_input.d.ts b/lib/primer/forms/primer_multi_input.d.ts new file mode 100644 index 0000000000..7554a1091b --- /dev/null +++ b/lib/primer/forms/primer_multi_input.d.ts @@ -0,0 +1,10 @@ +export declare class PrimerMultiInputElement extends HTMLElement { + fields: HTMLInputElement[]; + activateField(name: string): void; + private findField; +} +declare global { + interface Window { + PrimerMultiInputElement: typeof PrimerMultiInputElement; + } +} diff --git a/lib/primer/forms/primer_multi_input.js b/lib/primer/forms/primer_multi_input.js new file mode 100644 index 0000000000..0403635c55 --- /dev/null +++ b/lib/primer/forms/primer_multi_input.js @@ -0,0 +1,44 @@ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +/* eslint-disable custom-elements/expose-class-on-global */ +import { controller, targets } from '@github/catalyst'; +let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement { + activateField(name) { + const fieldWithName = this.findField(name); + if (!fieldWithName) + return; + for (const field of this.fields) { + if (field === fieldWithName) + continue; + field.setAttribute('disabled', 'disabled'); + field.setAttribute('hidden', 'hidden'); + field.parentElement?.setAttribute('hidden', 'hidden'); + } + fieldWithName.removeAttribute('disabled'); + fieldWithName.removeAttribute('hidden'); + fieldWithName.parentElement?.removeAttribute('hidden'); + } + findField(name) { + for (const field of this.fields) { + if (field.getAttribute('data-name') === name) { + return field; + } + } + return null; + } +}; +__decorate([ + targets +], PrimerMultiInputElement.prototype, "fields", void 0); +PrimerMultiInputElement = __decorate([ + controller +], PrimerMultiInputElement); +export { PrimerMultiInputElement }; +if (!window.customElements.get('primer-multi-input')) { + Object.assign(window, { PrimerMultiInputElement }); + window.customElements.define('primer-multi-input', PrimerMultiInputElement); +} diff --git a/lib/primer/forms/primer_text_field.d.ts b/lib/primer/forms/primer_text_field.d.ts new file mode 100644 index 0000000000..3e81f1e4c9 --- /dev/null +++ b/lib/primer/forms/primer_text_field.d.ts @@ -0,0 +1,28 @@ +import '@github/auto-check-element'; +import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element'; +declare global { + interface HTMLElementEventMap { + 'auto-check-success': AutoCheckSuccessEvent; + 'auto-check-error': AutoCheckErrorEvent; + } +} +export declare class PrimerTextFieldElement extends HTMLElement { + #private; + inputElement: HTMLInputElement; + validationElement: HTMLElement; + validationMessageElement: HTMLElement; + validationSuccessIcon: HTMLElement; + validationErrorIcon: HTMLElement; + leadingVisual: HTMLElement; + leadingSpinner: HTMLElement; + connectedCallback(): void; + disconnectedCallback(): void; + clearContents(): void; + clearError(): void; + setValidationMessage(message: string): void; + toggleValidationStyling(isError: boolean): void; + setSuccess(message: string): void; + setError(message: string): void; + showLeadingSpinner(): void; + hideLeadingSpinner(): void; +} diff --git a/lib/primer/forms/primer_text_field.js b/lib/primer/forms/primer_text_field.js new file mode 100644 index 0000000000..03d3e71a18 --- /dev/null +++ b/lib/primer/forms/primer_text_field.js @@ -0,0 +1,119 @@ +/* eslint-disable custom-elements/expose-class-on-global */ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); + return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); +}; +var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) { + if (kind === "m") throw new TypeError("Private method is not writable"); + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); + return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; +}; +var _PrimerTextFieldElement_abortController; +import '@github/auto-check-element'; +import { controller, target } from '@github/catalyst'; +let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement { + constructor() { + super(...arguments); + _PrimerTextFieldElement_abortController.set(this, void 0); + } + connectedCallback() { + __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort(); + const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f")); + this.addEventListener('auto-check-success', async (event) => { + const message = await event.detail.response.text(); + if (message && message.length > 0) { + this.setSuccess(message); + } + else { + this.clearError(); + } + }, { signal }); + this.addEventListener('auto-check-error', async (event) => { + const errorMessage = await event.detail.response.text(); + this.setError(errorMessage); + }, { signal }); + } + disconnectedCallback() { + __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort(); + } + clearContents() { + this.inputElement.value = ''; + this.inputElement.focus(); + this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false })); + } + clearError() { + this.inputElement.removeAttribute('invalid'); + this.validationElement.hidden = true; + this.validationMessageElement.replaceChildren(); + } + setValidationMessage(message) { + const template = document.createElement('template'); + // eslint-disable-next-line github/no-inner-html + template.innerHTML = message; + const fragment = document.importNode(template.content, true); + this.validationMessageElement.replaceChildren(fragment); + } + toggleValidationStyling(isError) { + if (isError) { + this.validationElement.classList.remove('FormControl-inlineValidation--success'); + } + else { + this.validationElement.classList.add('FormControl-inlineValidation--success'); + } + this.validationSuccessIcon.hidden = isError; + this.validationErrorIcon.hidden = !isError; + this.inputElement.setAttribute('invalid', isError ? 'true' : 'false'); + } + setSuccess(message) { + this.toggleValidationStyling(false); + this.setValidationMessage(message); + this.validationElement.hidden = false; + } + setError(message) { + this.toggleValidationStyling(true); + this.setValidationMessage(message); + this.validationElement.hidden = false; + } + showLeadingSpinner() { + this.leadingSpinner?.removeAttribute('hidden'); + this.leadingVisual?.setAttribute('hidden', ''); + } + hideLeadingSpinner() { + this.leadingSpinner?.setAttribute('hidden', ''); + this.leadingVisual?.removeAttribute('hidden'); + } +}; +_PrimerTextFieldElement_abortController = new WeakMap(); +__decorate([ + target +], PrimerTextFieldElement.prototype, "inputElement", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "validationElement", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "validationMessageElement", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "leadingVisual", void 0); +__decorate([ + target +], PrimerTextFieldElement.prototype, "leadingSpinner", void 0); +PrimerTextFieldElement = __decorate([ + controller +], PrimerTextFieldElement); +export { PrimerTextFieldElement }; diff --git a/lib/primer/forms/toggle_switch_input.d.ts b/lib/primer/forms/toggle_switch_input.d.ts new file mode 100644 index 0000000000..5dea4b0213 --- /dev/null +++ b/lib/primer/forms/toggle_switch_input.d.ts @@ -0,0 +1,5 @@ +export declare class ToggleSwitchInputElement extends HTMLElement { + validationElement: HTMLElement; + validationMessageElement: HTMLElement; + connectedCallback(): void; +} diff --git a/lib/primer/forms/toggle_switch_input.js b/lib/primer/forms/toggle_switch_input.js new file mode 100644 index 0000000000..935599ec80 --- /dev/null +++ b/lib/primer/forms/toggle_switch_input.js @@ -0,0 +1,34 @@ +/* eslint-disable custom-elements/expose-class-on-global */ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +import { controller, target } from '@github/catalyst'; +let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement { + connectedCallback() { + this.addEventListener('toggleSwitchError', (event) => { + this.validationMessageElement.textContent = event.detail; + this.validationElement.removeAttribute('hidden'); + }); + this.addEventListener('toggleSwitchSuccess', () => { + this.validationMessageElement.textContent = ''; + this.validationElement.setAttribute('hidden', 'hidden'); + }); + this.addEventListener('toggleSwitchLoading', () => { + this.validationMessageElement.textContent = ''; + this.validationElement.setAttribute('hidden', 'hidden'); + }); + } +}; +__decorate([ + target +], ToggleSwitchInputElement.prototype, "validationElement", void 0); +__decorate([ + target +], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0); +ToggleSwitchInputElement = __decorate([ + controller +], ToggleSwitchInputElement); +export { ToggleSwitchInputElement }; diff --git a/lib/primer/static.rb b/lib/primer/static.rb index 588046b178..5f7ba65880 100644 --- a/lib/primer/static.rb +++ b/lib/primer/static.rb @@ -15,6 +15,7 @@ module Static audited_at: "audited_at.json", arguments: "arguments.json", previews: "previews.json", + form_previews: "form_previews.json", info_arch: "info_arch.json" }.freeze @@ -50,6 +51,13 @@ def self.generate_previews Static::GeneratePreviews.call end + # Returns an array of hashes, one per example form, that contains some metadata and + # an array of all the form's previews. The preview data contains the Lookbook URL + # to each preview and its name. + def self.generate_form_previews + Static::GenerateFormPreviews.call + end + # Returns an array of hashes, one per Primer component, that contains all the data needed # for the new primer.style docsite. def self.generate_info_arch diff --git a/lib/primer/static/generate_form_previews.rb b/lib/primer/static/generate_form_previews.rb new file mode 100644 index 0000000000..d0bd2f140c --- /dev/null +++ b/lib/primer/static/generate_form_previews.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +# :nocov: + +require "json" + +module Primer + module Static + # :nodoc: + module GenerateFormPreviews + class << self + def call + Lookbook.previews.filter_map do |preview| + next unless preview.preview_class == Primer::FormsPreview + + { + name: preview.name, + lookup_path: preview.lookup_path, + examples: preview.scenarios.flat_map do |parent_scenario| + 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: snapshot + } + end + end + } + end + end + end + end + end +end diff --git a/lib/tasks/custom_utilities.yml b/lib/tasks/custom_utilities.yml index 78c40b5ff9..63862cb09c 100644 --- a/lib/tasks/custom_utilities.yml +++ b/lib/tasks/custom_utilities.yml @@ -370,3 +370,66 @@ - flex-md-shrink-0 - flex-lg-shrink-0 - flex-xl-shrink-0 +:overflow: + :auto: + - overflow-auto + - overflow-sm-auto + - overflow-lg-auto + - overflow-xl-auto + :hidden: + - overflow-hidden + - overflow-sm-hidden + - overflow-lg-hidden + - overflow-xl-hidden + :scroll: + - overflow-scroll + - overflow-sm-scroll + - overflow-lg-scroll + - overflow-xl-scroll + :visible: + - overflow-visible + - overflow-sm-visible + - overflow-lg-visible + - overflow-xl-visible +:overflow_x: + :auto: + - overflow-x-auto + - overflow-sm-x-auto + - overflow-lg-x-auto + - overflow-xl-x-auto + :hidden: + - overflow-x-hidden + - overflow-sm-x-hidden + - overflow-lg-x-hidden + - overflow-xl-x-hidden + :scroll: + - overflow-x-scroll + - overflow-sm-x-scroll + - overflow-lg-x-scroll + - overflow-xl-x-scroll + :visible: + - overflow-x-visible + - overflow-sm-x-visible + - overflow-lg-x-visible + - overflow-xl-x-visible +:overflow_y: + :auto: + - overflow-y-auto + - overflow-sm-y-auto + - overflow-lg-y-auto + - overflow-xl-y-auto + :hidden: + - overflow-y-hidden + - overflow-sm-y-hidden + - overflow-lg-y-hidden + - overflow-xl-y-hidden + :scroll: + - overflow-y-scroll + - overflow-sm-y-scroll + - overflow-lg-y-scroll + - overflow-xl-y-scroll + :visible: + - overflow-y-visible + - overflow-sm-y-visible + - overflow-lg-y-visible + - overflow-xl-y-visible diff --git a/lib/tasks/static.rake b/lib/tasks/static.rake index 4ee4abaa79..463fc55b2c 100644 --- a/lib/tasks/static.rake +++ b/lib/tasks/static.rake @@ -1,7 +1,15 @@ # frozen_string_literal: true namespace :static do - task dump: [:dump_statuses, :dump_constants, :dump_audited_at, :dump_previews, :dump_arguments, :dump_info_arch] + task dump: %i( + dump_statuses + dump_constants + dump_audited_at + dump_previews + dump_form_previews + dump_arguments + dump_info_arch + ) task dump_statuses: :init_pvc do Primer::Static.dump(:statuses) @@ -19,6 +27,10 @@ namespace :static do Primer::Static.dump(:previews) end + task dump_form_previews: :init_pvc do + Primer::Static.dump(:form_previews) + end + task dump_arguments: ["docs:build_yard_registry", :init_pvc] do Primer::Static.dump(:arguments) end diff --git a/package-lock.json b/package-lock.json index 658209dfef..6be41545b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@github/markdownlint-github": "^0.6.0", "@github/prettier-config": "0.0.6", "@playwright/test": "^1.35.1", - "@primer/css": "21.5.0", + "@primer/css": "21.5.1", "@primer/stylelint-config": "^13.1.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^8.3.3", @@ -193,14 +193,14 @@ } }, "node_modules/@changesets/apply-release-plan": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.5.tgz", - "integrity": "sha512-1cWCk+ZshEkSVEZrm2fSj1Gz8sYvxgUL4Q78+1ZZqeqfuevPTPk033/yUZ3df8BKMohkqqHfzj0HOOrG0KtXTw==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.6.tgz", + "integrity": "sha512-TKhVLtiwtQOgMAC0fCJfmv93faiViKSDqr8oMEqrnNs99gtSC1sZh/aEMS9a+dseU1ESZRCK+ofLgGY7o0fw/Q==", "dev": true, "dependencies": { - "@changesets/config": "^3.0.3", + "@changesets/config": "^3.0.4", "@changesets/get-version-range-type": "^0.4.0", - "@changesets/git": "^3.0.1", + "@changesets/git": "^3.0.2", "@changesets/should-skip-package": "^0.1.1", "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3", @@ -270,9 +270,9 @@ } }, "node_modules/@changesets/assemble-release-plan": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.4.tgz", - "integrity": "sha512-nqICnvmrwWj4w2x0fOhVj2QEGdlUuwVAwESrUo5HLzWMI1rE5SWfsr9ln+rDqWB6RQ2ZyaMZHUcU7/IRaUJS+Q==", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.5.tgz", + "integrity": "sha512-IgvBWLNKZd6k4t72MBTBK3nkygi0j3t3zdC1zrfusYo0KpdsvnDjrMM9vPnTCLCMlfNs55jRL4gIMybxa64FCQ==", "dev": true, "dependencies": { "@changesets/errors": "^0.2.0", @@ -304,22 +304,22 @@ } }, "node_modules/@changesets/cli": { - "version": "2.27.9", - "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.9.tgz", - "integrity": "sha512-q42a/ZbDnxPpCb5Wkm6tMVIxgeI9C/bexntzTeCFBrQEdpisQqk8kCHllYZMDjYtEc1ZzumbMJAG8H0Z4rdvjg==", + "version": "2.27.10", + "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.10.tgz", + "integrity": "sha512-PfeXjvs9OfQJV8QSFFHjwHX3QnUL9elPEQ47SgkiwzLgtKGyuikWjrdM+lO9MXzOE22FO9jEGkcs4b+B6D6X0Q==", "dev": true, "dependencies": { - "@changesets/apply-release-plan": "^7.0.5", - "@changesets/assemble-release-plan": "^6.0.4", + "@changesets/apply-release-plan": "^7.0.6", + "@changesets/assemble-release-plan": "^6.0.5", "@changesets/changelog-git": "^0.2.0", - "@changesets/config": "^3.0.3", + "@changesets/config": "^3.0.4", "@changesets/errors": "^0.2.0", "@changesets/get-dependents-graph": "^2.1.2", - "@changesets/get-release-plan": "^4.0.4", - "@changesets/git": "^3.0.1", + "@changesets/get-release-plan": "^4.0.5", + "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/pre": "^2.0.1", - "@changesets/read": "^0.6.1", + "@changesets/read": "^0.6.2", "@changesets/should-skip-package": "^0.1.1", "@changesets/types": "^6.0.0", "@changesets/write": "^0.3.2", @@ -335,7 +335,7 @@ "picocolors": "^1.1.0", "resolve-from": "^5.0.0", "semver": "^7.5.3", - "spawndamnit": "^2.0.0", + "spawndamnit": "^3.0.1", "term-size": "^2.1.0" }, "bin": { @@ -399,9 +399,9 @@ } }, "node_modules/@changesets/config": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@changesets/config/-/config-3.0.3.tgz", - "integrity": "sha512-vqgQZMyIcuIpw9nqFIpTSNyc/wgm/Lu1zKN5vECy74u95Qx/Wa9g27HdgO4NkVAaq+BGA8wUc/qvbvVNs93n6A==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@changesets/config/-/config-3.0.4.tgz", + "integrity": "sha512-+DiIwtEBpvvv1z30f8bbOsUQGuccnZl9KRKMM/LxUHuDu5oEjmN+bJQ1RIBKNJjfYMQn8RZzoPiX0UgPaLQyXw==", "dev": true, "dependencies": { "@changesets/errors": "^0.2.0", @@ -410,7 +410,7 @@ "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3", "fs-extra": "^7.0.1", - "micromatch": "^4.0.2" + "micromatch": "^4.0.8" } }, "node_modules/@changesets/config/node_modules/fs-extra": { @@ -477,15 +477,15 @@ } }, "node_modules/@changesets/get-release-plan": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-4.0.4.tgz", - "integrity": "sha512-SicG/S67JmPTrdcc9Vpu0wSQt7IiuN0dc8iR5VScnnTVPfIaLvKmEGRvIaF0kcn8u5ZqLbormZNTO77bCEvyWw==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-4.0.5.tgz", + "integrity": "sha512-E6wW7JoSMcctdVakut0UB76FrrN3KIeJSXvB+DHMFo99CnC3ZVnNYDCVNClMlqAhYGmLmAj77QfApaI3ca4Fkw==", "dev": true, "dependencies": { - "@changesets/assemble-release-plan": "^6.0.4", - "@changesets/config": "^3.0.3", + "@changesets/assemble-release-plan": "^6.0.5", + "@changesets/config": "^3.0.4", "@changesets/pre": "^2.0.1", - "@changesets/read": "^0.6.1", + "@changesets/read": "^0.6.2", "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3" } @@ -497,16 +497,16 @@ "dev": true }, "node_modules/@changesets/git": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@changesets/git/-/git-3.0.1.tgz", - "integrity": "sha512-pdgHcYBLCPcLd82aRcuO0kxCDbw/yISlOtkmwmE8Odo1L6hSiZrBOsRl84eYG7DRCab/iHnOkWqExqc4wxk2LQ==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@changesets/git/-/git-3.0.2.tgz", + "integrity": "sha512-r1/Kju9Y8OxRRdvna+nxpQIsMsRQn9dhhAZt94FLDeu0Hij2hnOozW8iqnHBgvu+KdnJppCveQwK4odwfw/aWQ==", "dev": true, "dependencies": { "@changesets/errors": "^0.2.0", "@manypkg/get-packages": "^1.1.3", "is-subdir": "^1.1.1", - "micromatch": "^4.0.2", - "spawndamnit": "^2.0.0" + "micromatch": "^4.0.8", + "spawndamnit": "^3.0.1" } }, "node_modules/@changesets/logger": { @@ -595,12 +595,12 @@ } }, "node_modules/@changesets/read": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.6.1.tgz", - "integrity": "sha512-jYMbyXQk3nwP25nRzQQGa1nKLY0KfoOV7VLgwucI0bUO8t8ZLCr6LZmgjXsiKuRDc+5A6doKPr9w2d+FEJ55zQ==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.6.2.tgz", + "integrity": "sha512-wjfQpJvryY3zD61p8jR87mJdyx2FIhEcdXhKUqkja87toMrP/3jtg/Yg29upN+N4Ckf525/uvV7a4tzBlpk6gg==", "dev": true, "dependencies": { - "@changesets/git": "^3.0.1", + "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/parse": "^0.4.0", "@changesets/types": "^6.0.0", @@ -2623,20 +2623,20 @@ } }, "node_modules/@primer/behaviors": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.7.2.tgz", - "integrity": "sha512-I5dGgtzV9n1ZX3J1KHkLVWjvEbzanstaXFTDr/+tdn4E2GAA/NUHfTLMq6i5+Pt4P/p/paLI50EgExElENzCYQ==" + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.0.tgz", + "integrity": "sha512-ZUfhWVY4ZBKc2Fh3fIa2Qwwa3SnOi914lY5wcmN+UNtsBxeXsjWNwpohJbwRwWZm+nJ3C1n9qJFWpHuBlDVU1A==" }, "node_modules/@primer/css": { - "version": "21.5.0", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.5.0.tgz", - "integrity": "sha512-zkvHxWpVcjURujbWaq4YL8R/9g9qkM6275KMXXgNs/T2o8GekUDH6Qx2cpIPVd/AHtwIwDsy4+yjWcNWsuRgkA==", + "version": "21.5.1", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.5.1.tgz", + "integrity": "sha512-/dw7P2eHbLEq77E6WVhVPud/HtyzAzlQgX6f8HQ/i0l1r5EZeh9r7/THgMUt0MgdSlJb7t+WT+V+zN8EDkU9mw==", "dev": true, "engines": { "node": ">=16.0.0" }, "peerDependencies": { - "@primer/primitives": "^9.0.3" + "@primer/primitives": "9.x || 10.x" } }, "node_modules/@primer/live-region-element": { @@ -4039,9 +4039,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "dependencies": { "path-key": "^3.1.0", @@ -7581,9 +7581,9 @@ } }, "node_modules/picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true }, "node_modules/picomatch": { @@ -7648,9 +7648,9 @@ } }, "node_modules/postcss": { - "version": "8.4.47", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "dev": true, "funding": [ { @@ -7668,7 +7668,7 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.1.0", + "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, "engines": { @@ -9348,12 +9348,6 @@ "node": ">= 0.8" } }, - "node_modules/pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", - "dev": true - }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -9793,10 +9787,16 @@ } }, "node_modules/signal-exit": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", - "dev": true + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } }, "node_modules/slash": { "version": "3.0.0", @@ -9853,75 +9853,15 @@ } }, "node_modules/spawndamnit": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/spawndamnit/-/spawndamnit-2.0.0.tgz", - "integrity": "sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==", - "dev": true, - "dependencies": { - "cross-spawn": "^5.1.0", - "signal-exit": "^3.0.2" - } - }, - "node_modules/spawndamnit/node_modules/cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==", - "dev": true, - "dependencies": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "node_modules/spawndamnit/node_modules/lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "dependencies": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "node_modules/spawndamnit/node_modules/shebang-command": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", - "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", - "dev": true, - "dependencies": { - "shebang-regex": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/spawndamnit/node_modules/shebang-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/spawndamnit/node_modules/which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spawndamnit/-/spawndamnit-3.0.1.tgz", + "integrity": "sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==", "dev": true, "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" + "cross-spawn": "^7.0.5", + "signal-exit": "^4.0.1" } }, - "node_modules/spawndamnit/node_modules/yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", - "dev": true - }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -10986,9 +10926,9 @@ } }, "node_modules/vite-plugin-ruby": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/vite-plugin-ruby/-/vite-plugin-ruby-5.1.0.tgz", - "integrity": "sha512-Dgd/dCvb/8GYxZx2NEgxygEoUpHz9vfad7itlO4fXqYwdfAEwFwwOohC630yf/+kxIGBZXI5yk+Y3WkL9VkwcA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/vite-plugin-ruby/-/vite-plugin-ruby-5.1.1.tgz", + "integrity": "sha512-I1dXJq2ywdvTD2Cz5LYNcYLujqQ3eUxPoCjruRdfm2QBtHBY15NEeb6x5HuPM3T5S+y8S3p9fwRsieQQCjk0gg==", "dev": true, "dependencies": { "debug": "^4.3.4", @@ -11242,18 +11182,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/write-file-atomic/node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/y18n": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", @@ -11589,14 +11517,14 @@ } }, "@changesets/apply-release-plan": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.5.tgz", - "integrity": "sha512-1cWCk+ZshEkSVEZrm2fSj1Gz8sYvxgUL4Q78+1ZZqeqfuevPTPk033/yUZ3df8BKMohkqqHfzj0HOOrG0KtXTw==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.6.tgz", + "integrity": "sha512-TKhVLtiwtQOgMAC0fCJfmv93faiViKSDqr8oMEqrnNs99gtSC1sZh/aEMS9a+dseU1ESZRCK+ofLgGY7o0fw/Q==", "dev": true, "requires": { - "@changesets/config": "^3.0.3", + "@changesets/config": "^3.0.4", "@changesets/get-version-range-type": "^0.4.0", - "@changesets/git": "^3.0.1", + "@changesets/git": "^3.0.2", "@changesets/should-skip-package": "^0.1.1", "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3", @@ -11650,9 +11578,9 @@ } }, "@changesets/assemble-release-plan": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.4.tgz", - "integrity": "sha512-nqICnvmrwWj4w2x0fOhVj2QEGdlUuwVAwESrUo5HLzWMI1rE5SWfsr9ln+rDqWB6RQ2ZyaMZHUcU7/IRaUJS+Q==", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.5.tgz", + "integrity": "sha512-IgvBWLNKZd6k4t72MBTBK3nkygi0j3t3zdC1zrfusYo0KpdsvnDjrMM9vPnTCLCMlfNs55jRL4gIMybxa64FCQ==", "dev": true, "requires": { "@changesets/errors": "^0.2.0", @@ -11684,22 +11612,22 @@ } }, "@changesets/cli": { - "version": "2.27.9", - "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.9.tgz", - "integrity": "sha512-q42a/ZbDnxPpCb5Wkm6tMVIxgeI9C/bexntzTeCFBrQEdpisQqk8kCHllYZMDjYtEc1ZzumbMJAG8H0Z4rdvjg==", + "version": "2.27.10", + "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.10.tgz", + "integrity": "sha512-PfeXjvs9OfQJV8QSFFHjwHX3QnUL9elPEQ47SgkiwzLgtKGyuikWjrdM+lO9MXzOE22FO9jEGkcs4b+B6D6X0Q==", "dev": true, "requires": { - "@changesets/apply-release-plan": "^7.0.5", - "@changesets/assemble-release-plan": "^6.0.4", + "@changesets/apply-release-plan": "^7.0.6", + "@changesets/assemble-release-plan": "^6.0.5", "@changesets/changelog-git": "^0.2.0", - "@changesets/config": "^3.0.3", + "@changesets/config": "^3.0.4", "@changesets/errors": "^0.2.0", "@changesets/get-dependents-graph": "^2.1.2", - "@changesets/get-release-plan": "^4.0.4", - "@changesets/git": "^3.0.1", + "@changesets/get-release-plan": "^4.0.5", + "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/pre": "^2.0.1", - "@changesets/read": "^0.6.1", + "@changesets/read": "^0.6.2", "@changesets/should-skip-package": "^0.1.1", "@changesets/types": "^6.0.0", "@changesets/write": "^0.3.2", @@ -11715,7 +11643,7 @@ "picocolors": "^1.1.0", "resolve-from": "^5.0.0", "semver": "^7.5.3", - "spawndamnit": "^2.0.0", + "spawndamnit": "^3.0.1", "term-size": "^2.1.0" }, "dependencies": { @@ -11763,9 +11691,9 @@ } }, "@changesets/config": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@changesets/config/-/config-3.0.3.tgz", - "integrity": "sha512-vqgQZMyIcuIpw9nqFIpTSNyc/wgm/Lu1zKN5vECy74u95Qx/Wa9g27HdgO4NkVAaq+BGA8wUc/qvbvVNs93n6A==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@changesets/config/-/config-3.0.4.tgz", + "integrity": "sha512-+DiIwtEBpvvv1z30f8bbOsUQGuccnZl9KRKMM/LxUHuDu5oEjmN+bJQ1RIBKNJjfYMQn8RZzoPiX0UgPaLQyXw==", "dev": true, "requires": { "@changesets/errors": "^0.2.0", @@ -11774,7 +11702,7 @@ "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3", "fs-extra": "^7.0.1", - "micromatch": "^4.0.2" + "micromatch": "^4.0.8" }, "dependencies": { "fs-extra": { @@ -11837,15 +11765,15 @@ } }, "@changesets/get-release-plan": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-4.0.4.tgz", - "integrity": "sha512-SicG/S67JmPTrdcc9Vpu0wSQt7IiuN0dc8iR5VScnnTVPfIaLvKmEGRvIaF0kcn8u5ZqLbormZNTO77bCEvyWw==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-4.0.5.tgz", + "integrity": "sha512-E6wW7JoSMcctdVakut0UB76FrrN3KIeJSXvB+DHMFo99CnC3ZVnNYDCVNClMlqAhYGmLmAj77QfApaI3ca4Fkw==", "dev": true, "requires": { - "@changesets/assemble-release-plan": "^6.0.4", - "@changesets/config": "^3.0.3", + "@changesets/assemble-release-plan": "^6.0.5", + "@changesets/config": "^3.0.4", "@changesets/pre": "^2.0.1", - "@changesets/read": "^0.6.1", + "@changesets/read": "^0.6.2", "@changesets/types": "^6.0.0", "@manypkg/get-packages": "^1.1.3" } @@ -11857,16 +11785,16 @@ "dev": true }, "@changesets/git": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@changesets/git/-/git-3.0.1.tgz", - "integrity": "sha512-pdgHcYBLCPcLd82aRcuO0kxCDbw/yISlOtkmwmE8Odo1L6hSiZrBOsRl84eYG7DRCab/iHnOkWqExqc4wxk2LQ==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@changesets/git/-/git-3.0.2.tgz", + "integrity": "sha512-r1/Kju9Y8OxRRdvna+nxpQIsMsRQn9dhhAZt94FLDeu0Hij2hnOozW8iqnHBgvu+KdnJppCveQwK4odwfw/aWQ==", "dev": true, "requires": { "@changesets/errors": "^0.2.0", "@manypkg/get-packages": "^1.1.3", "is-subdir": "^1.1.1", - "micromatch": "^4.0.2", - "spawndamnit": "^2.0.0" + "micromatch": "^4.0.8", + "spawndamnit": "^3.0.1" } }, "@changesets/logger": { @@ -11950,12 +11878,12 @@ } }, "@changesets/read": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.6.1.tgz", - "integrity": "sha512-jYMbyXQk3nwP25nRzQQGa1nKLY0KfoOV7VLgwucI0bUO8t8ZLCr6LZmgjXsiKuRDc+5A6doKPr9w2d+FEJ55zQ==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.6.2.tgz", + "integrity": "sha512-wjfQpJvryY3zD61p8jR87mJdyx2FIhEcdXhKUqkja87toMrP/3jtg/Yg29upN+N4Ckf525/uvV7a4tzBlpk6gg==", "dev": true, "requires": { - "@changesets/git": "^3.0.1", + "@changesets/git": "^3.0.2", "@changesets/logger": "^0.1.1", "@changesets/parse": "^0.4.0", "@changesets/types": "^6.0.0", @@ -13039,14 +12967,14 @@ } }, "@primer/behaviors": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.7.2.tgz", - "integrity": "sha512-I5dGgtzV9n1ZX3J1KHkLVWjvEbzanstaXFTDr/+tdn4E2GAA/NUHfTLMq6i5+Pt4P/p/paLI50EgExElENzCYQ==" + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.0.tgz", + "integrity": "sha512-ZUfhWVY4ZBKc2Fh3fIa2Qwwa3SnOi914lY5wcmN+UNtsBxeXsjWNwpohJbwRwWZm+nJ3C1n9qJFWpHuBlDVU1A==" }, "@primer/css": { - "version": "21.5.0", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.5.0.tgz", - "integrity": "sha512-zkvHxWpVcjURujbWaq4YL8R/9g9qkM6275KMXXgNs/T2o8GekUDH6Qx2cpIPVd/AHtwIwDsy4+yjWcNWsuRgkA==", + "version": "21.5.1", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.5.1.tgz", + "integrity": "sha512-/dw7P2eHbLEq77E6WVhVPud/HtyzAzlQgX6f8HQ/i0l1r5EZeh9r7/THgMUt0MgdSlJb7t+WT+V+zN8EDkU9mw==", "dev": true, "requires": {} }, @@ -13943,9 +13871,9 @@ } }, "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "requires": { "path-key": "^3.1.0", @@ -16442,9 +16370,9 @@ "dev": true }, "picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true }, "picomatch": { @@ -16482,13 +16410,13 @@ "dev": true }, "postcss": { - "version": "8.4.47", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "dev": true, "requires": { "nanoid": "^3.3.7", - "picocolors": "^1.1.0", + "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, "dependencies": { @@ -17413,12 +17341,6 @@ "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", "dev": true }, - "pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", - "dev": true - }, "punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -17721,9 +17643,9 @@ } }, "signal-exit": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true }, "slash": { @@ -17768,66 +17690,13 @@ } }, "spawndamnit": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/spawndamnit/-/spawndamnit-2.0.0.tgz", - "integrity": "sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spawndamnit/-/spawndamnit-3.0.1.tgz", + "integrity": "sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==", "dev": true, "requires": { - "cross-spawn": "^5.1.0", - "signal-exit": "^3.0.2" - }, - "dependencies": { - "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==", - "dev": true, - "requires": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "requires": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "shebang-command": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", - "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", - "dev": true, - "requires": { - "shebang-regex": "^1.0.0" - } - }, - "shebang-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", - "dev": true - }, - "which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, - "yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", - "dev": true - } + "cross-spawn": "^7.0.5", + "signal-exit": "^4.0.1" } }, "sprintf-js": { @@ -18547,9 +18416,9 @@ } }, "vite-plugin-ruby": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/vite-plugin-ruby/-/vite-plugin-ruby-5.1.0.tgz", - "integrity": "sha512-Dgd/dCvb/8GYxZx2NEgxygEoUpHz9vfad7itlO4fXqYwdfAEwFwwOohC630yf/+kxIGBZXI5yk+Y3WkL9VkwcA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/vite-plugin-ruby/-/vite-plugin-ruby-5.1.1.tgz", + "integrity": "sha512-I1dXJq2ywdvTD2Cz5LYNcYLujqQ3eUxPoCjruRdfm2QBtHBY15NEeb6x5HuPM3T5S+y8S3p9fwRsieQQCjk0gg==", "dev": true, "requires": { "debug": "^4.3.4", @@ -18708,14 +18577,6 @@ "requires": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" - }, - "dependencies": { - "signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true - } } }, "y18n": { diff --git a/package.json b/package.json index d1d958e33b..f47660460f 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "@github/markdownlint-github": "^0.6.0", "@github/prettier-config": "0.0.6", "@playwright/test": "^1.35.1", - "@primer/css": "21.5.0", + "@primer/css": "21.5.1", "@primer/stylelint-config": "^13.1.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^8.3.3", diff --git a/previews/primer/beta/link_preview.rb b/previews/primer/beta/link_preview.rb index b8e0734342..0a76c35cd4 100644 --- a/previews/primer/beta/link_preview.rb +++ b/previews/primer/beta/link_preview.rb @@ -9,8 +9,14 @@ class LinkPreview < ViewComponent::Preview # @param underline [Boolean] # @param muted [Boolean] # @param scheme [Symbol] select [default, primary, secondary] - def playground(scheme: :default, muted: false, underline: true) - render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" } + # @param leading_visual_icon [Symbol] octicon + # @param trailing_visual_icon [Symbol] octicon + def playground(scheme: :default, muted: false, underline: true, leading_visual_icon: nil, trailing_visual_icon: nil) + render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) do |link| + link.with_leading_visual_icon(icon: leading_visual_icon) if leading_visual_icon && leading_visual_icon != :none + link.with_trailing_visual_icon(icon: trailing_visual_icon) if trailing_visual_icon && trailing_visual_icon != :none + "This is a link!" + end end # @label Default Options @@ -66,6 +72,22 @@ def color_scheme_secondary_muted render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." } end # @!endgroup + + # @label With leading icon + def with_leading_icon + render(Primer::Beta::Link.new(href: "#")) do |component| + component.with_leading_visual_icon(icon: :"mark-github") + "Link with leading icon" + end + end + + # @label With trailing icon + def with_trailing_icon + render(Primer::Beta::Link.new(href: "#")) do |component| + component.with_trailing_visual_icon(icon: :"link-external") + "Link with trailing icon" + end + end end end end diff --git a/previews/primer/forms_preview.rb b/previews/primer/forms_preview.rb index b1644e9274..db825095e8 100644 --- a/previews/primer/forms_preview.rb +++ b/previews/primer/forms_preview.rb @@ -3,50 +3,71 @@ module Primer # :nodoc: class FormsPreview < ViewComponent::Preview + # @snapshot def single_text_field_form; end + # @snapshot def multi_text_field_form; end def custom_width_fields_form; end + # @snapshot def text_field_and_checkbox_form; end + # @snapshot def horizontal_form; end + # @snapshot def composed_form; end + # @snapshot def submit_button_form; end + # @snapshot def radio_button_group_form; end + # @snapshot def check_box_group_form; end + # @snapshot def array_check_box_group_form; end + # @snapshot def select_form; end + # @snapshot def action_menu_form(route_format: :html) render_with_template(locals: { route_format: route_format }) end + # @snapshot def radio_button_with_nested_form; end + # @snapshot def check_box_with_nested_form; end + # @snapshot def caption_template_form; end + # @snapshot def after_content_form; end + # @snapshot def invalid_form; end + # @snapshot def multi_input_form; end + # @snapshot def name_with_question_mark_form; end + # @snapshot def immediate_validation_form; end + # @snapshot def example_toggle_switch_form; end + # @snapshot def auto_complete_form; end end end diff --git a/static/classes.json b/static/classes.json index 3dc9e7ba73..c7fb605e6d 100644 --- a/static/classes.json +++ b/static/classes.json @@ -422,6 +422,9 @@ "Link--underline": [ "Primer::Beta::Link" ], + "Link-content": [ + "Primer::Beta::Link" + ], "Overlay": [ "Primer::Alpha::Dialog", "Primer::Alpha::Overlay" diff --git a/static/form_previews.json b/static/form_previews.json new file mode 100644 index 0000000000..20ebd3bfed --- /dev/null +++ b/static/form_previews.json @@ -0,0 +1,113 @@ +[ + { + "name": "forms", + "lookup_path": "primer/forms", + "examples": [ + { + "preview_path": "primer/forms/single_text_field_form", + "name": "single_text_field_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/multi_text_field_form", + "name": "multi_text_field_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/text_field_and_checkbox_form", + "name": "text_field_and_checkbox_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/horizontal_form", + "name": "horizontal_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/composed_form", + "name": "composed_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/submit_button_form", + "name": "submit_button_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/radio_button_group_form", + "name": "radio_button_group_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/check_box_group_form", + "name": "check_box_group_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/array_check_box_group_form", + "name": "array_check_box_group_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/select_form", + "name": "select_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/action_menu_form", + "name": "action_menu_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/radio_button_with_nested_form", + "name": "radio_button_with_nested_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/check_box_with_nested_form", + "name": "check_box_with_nested_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/caption_template_form", + "name": "caption_template_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/after_content_form", + "name": "after_content_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/invalid_form", + "name": "invalid_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/multi_input_form", + "name": "multi_input_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/name_with_question_mark_form", + "name": "name_with_question_mark_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/immediate_validation_form", + "name": "immediate_validation_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/example_toggle_switch_form", + "name": "example_toggle_switch_form", + "snapshot": "true" + }, + { + "preview_path": "primer/forms/auto_complete_form", + "name": "auto_complete_form", + "snapshot": "true" + } + ] + } +] diff --git a/test/components/beta/auto_complete_test.rb b/test/components/beta/auto_complete_test.rb index 598459a928..d07865a58d 100644 --- a/test/components/beta/auto_complete_test.rb +++ b/test/components/beta/auto_complete_test.rb @@ -138,4 +138,10 @@ def test_denies_name_on_input_slot assert_includes(err.message, "Set @input_name on the component initializer instead with `input_name`.") end end + + def test_results_container_scrollable + render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") + + assert_selector("anchored-position.overflow-y-auto") + end end diff --git a/test/components/beta/link_test.rb b/test/components/beta/link_test.rb index dbfbd7e94c..b59727fd25 100644 --- a/test/components/beta/link_test.rb +++ b/test/components/beta/link_test.rb @@ -92,4 +92,26 @@ def test_renders_with_tooltip_sibling assert_selector("a[href='http://google.com'] + tool-tip", text: "Tooltip text", visible: false) end + + def test_renders_leading_visual_icon + render_inline(Primer::Beta::Link.new(href: "http://google.com")) do |component| + component.with_leading_visual_icon(icon: "plus") + "content" + end + + assert_selector("a[href='http://google.com']") + assert_selector(".octicon-plus") + end + + def test_renders_trailing_visual_icon + render_inline(Primer::Beta::Link.new(href: "http://google.com")) do |component| + component.with_leading_visual_icon(icon: "plus") + component.with_trailing_visual_icon(icon: "alert") + "content" + end + + assert_selector("a[href='http://google.com']") + assert_selector("a svg:first-child.octicon-plus") + assert_selector("a svg:nth-child(2).octicon-alert") + end end diff --git a/test/lib/classify_test.rb b/test/lib/classify_test.rb index 3eb2186a91..4b45da2e52 100644 --- a/test/lib/classify_test.rb +++ b/test/lib/classify_test.rb @@ -411,43 +411,12 @@ def test_animation assert_generated_class("anim-hover-grow", { animation: :hover_grow }) end - def test_does_not_raise_error_when_passing_in_a_primer_css_class_name_in_development_and_flag_is_set - ENV["PRIMER_WARNINGS_DISABLED"] = "1" - with_raise_on_invalid_options(true) do - assert_generated_class("color-bg-primary text-center float-left ml-1", { classes: "color-bg-primary text-center float-left ml-1" }) - end - ensure - ENV["PRIMER_WARNINGS_DISABLED"] = nil - end - - def test_does_not_raise_error_when_passing_in_a_primer_css_class_otherwise - with_raise_on_invalid_options(false) do - assert_generated_class("color-bg-primary text-center float-left ml-1", { classes: "color-bg-primary text-center float-left ml-1" }) - end - end - def test_does_include_leading_trailing_whitespace_in_class generated_class = Primer::Classify.call(classes: "foo-class")[:class] refute(generated_class.start_with?(" ")) refute(generated_class.end_with?(" ")) end - def test_raises_if_not_using_system_arguments_when_raise_on_invalid_options_is_true - with_raise_on_invalid_options(true) do - exception = assert_raises ArgumentError do - Primer::Classify.call(classes: "d-block") - end - - assert_includes exception.message, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class" - end - end - - def test_does_not_raise_if_not_using_system_arguments_when_raise_on_invalid_options_is_false - with_raise_on_invalid_options(false) do - assert_generated_class("d-block", { classes: "d-block" }) - end - end - private def assert_generated_class(generated_class_name, input) diff --git a/test/lib/primer/forms/auto_complete_input_test.rb b/test/lib/primer/forms/auto_complete_input_test.rb index 6c91285227..a750d2247f 100644 --- a/test/lib/primer/forms/auto_complete_input_test.rb +++ b/test/lib/primer/forms/auto_complete_input_test.rb @@ -36,4 +36,28 @@ def test_only_primer_error_markup # no rails error markup refute_selector ".field_with_errors", visible: :all end + + def test_full_width_by_default + render_in_view_context do + primer_form_with(url: "/foo") do |f| + render_inline_form(f) do |auto_complete_form| + auto_complete_form.auto_complete(name: :foo, label: "Foo", src: "/foo") + end + end + end + + assert_selector ".FormControl--fullWidth" + end + + def test_full_width_can_be_disabled + render_in_view_context do + primer_form_with(url: "/foo") do |f| + render_inline_form(f) do |auto_complete_form| + auto_complete_form.auto_complete(name: :foo, label: "Foo", src: "/foo", full_width: false) + end + end + end + + refute_selector ".FormControl--fullWidth" + end end diff --git a/test/lib/primer/forms_test.rb b/test/lib/primer/forms_test.rb index 4fc2e32611..f909319b91 100644 --- a/test/lib/primer/forms_test.rb +++ b/test/lib/primer/forms_test.rb @@ -212,6 +212,12 @@ def test_renders_horizontal_group assert_selector ".FormControl-horizontalGroup .FormControl", count: 2 end + def test_hidden_items_wrapped_in_display_none + render_preview :horizontal_form + + assert_selector ".d-none input[type=hidden]", visible: :hidden + end + def test_renders_multi_input render_preview :multi_input_form diff --git a/test/playwright/helpers.ts b/test/playwright/helpers.ts index bba0031bcb..f3be4830e4 100644 --- a/test/playwright/helpers.ts +++ b/test/playwright/helpers.ts @@ -2,7 +2,7 @@ import fs from 'fs' import path from 'path' -export interface ComponentPreviews { +export interface ComponentPreview { name: string lookup_path: string examples: Array<{ @@ -13,9 +13,29 @@ export interface ComponentPreviews { }> } -export function getPreviewURLs(): ComponentPreviews[] { +export interface FormPreview { + name: string + lookup_path: string + examples: Array<{ + name: string + snapshot: string + preview_path: string + }> +} + +export function getPreviewURLs(): ComponentPreview[] { const jsonString = fs.readFileSync(path.join(__dirname, '../../static/previews.json'), {encoding: 'utf8', flag: 'r'}) // read file contents return JSON.parse(jsonString) } + +export function getFormPreviewURLs(): FormPreview[] { + const jsonString = fs.readFileSync(path.join(__dirname, '../../static/form_previews.json'), { + encoding: 'utf8', + flag: 'r', + }) + + // read file contents + return JSON.parse(jsonString) +} diff --git a/test/playwright/snapshots.test.ts b/test/playwright/snapshots.test.ts index 658e93c2ed..1079ef28da 100644 --- a/test/playwright/snapshots.test.ts +++ b/test/playwright/snapshots.test.ts @@ -1,9 +1,10 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import {test, expect} from '@playwright/test' -import {getPreviewURLs} from './helpers' -import type {ComponentPreviews} from './helpers' +import {getPreviewURLs, getFormPreviewURLs} from './helpers' +import type {ComponentPreview, FormPreview} from './helpers' -const previewsJson: ComponentPreviews[] = getPreviewURLs() +const previewsJson: ComponentPreview[] = getPreviewURLs() +const formPreviewsJson: FormPreview[] = getFormPreviewURLs() test.beforeEach(async ({page}, testInfo) => { testInfo.snapshotSuffix = '' @@ -14,6 +15,11 @@ test('Preview Json exists', () => { expect(previewsJson.length).toBeGreaterThan(0) }) +test('Form Preview Json exists', () => { + expect(formPreviewsJson).toBeDefined() + expect(formPreviewsJson.length).toBeGreaterThan(0) +}) + const themes = [ 'light', 'light_colorblind', @@ -25,7 +31,7 @@ const themes = [ ] test.describe('generate snapshots', () => { - for (const preview of previewsJson) { + for (const preview of [...previewsJson, ...formPreviewsJson] as Array) { for (const example of preview.examples) { if (example.snapshot !== 'false') { if (example.snapshot === 'interactive') {