diff --git a/.changeset/calm-maps-wave.md b/.changeset/calm-maps-wave.md new file mode 100644 index 0000000000..b1a34624bd --- /dev/null +++ b/.changeset/calm-maps-wave.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': minor +--- + +Add defaults to SelectPanel::ItemLists; fix issue showing no results label for local fetch strategy diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 4d585dd22e..ced1b3cbda 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@v44.5.5 + uses: tj-actions/changed-files@v44.5.6 with: files: | docs/**/*.md @@ -39,7 +39,7 @@ jobs: - uses: actions/checkout@v4 - name: Get specific changed files id: changed-files - uses: tj-actions/changed-files@v44.5.5 + uses: tj-actions/changed-files@v44.5.6 with: files: | app/**/*.rb @@ -62,7 +62,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v44.5.5 + uses: tj-actions/changed-files@v44.5.6 with: files: | app/components/**/*.erb @@ -82,7 +82,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v44.5.5 + uses: tj-actions/changed-files@v44.5.6 with: files: | app/components/**/*.ts @@ -103,7 +103,7 @@ jobs: - uses: actions/checkout@v4 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v44.5.5 + uses: tj-actions/changed-files@v44.5.6 with: files: | app/components/**/*.pcss diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png index 76dd0af3a4..f8a5129eab 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png index 76dd0af3a4..f8a5129eab 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png index 5f7dc701b8..7a2783b0cd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png index 6cd4994bc2..79d1443a7b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png index e731cfcecc..3415608d6d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png index e731cfcecc..3415608d6d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png index dd5ba80710..9edf501412 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png differ diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb index 19a56df22a..a125c983e5 100644 --- a/app/components/primer/alpha/select_panel.rb +++ b/app/components/primer/alpha/select_panel.rb @@ -250,10 +250,22 @@ module Alpha # ) # ``` class SelectPanel < Primer::Component - status :alpha - # The component that should be used to render the list of items in the body of a SelectPanel. - ItemList = Primer::Alpha::ActionList + class ItemList < Primer::Alpha::ActionList + # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>. + def initialize(**system_arguments) + select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT + + super( + p: 2, + role: "listbox", + aria_selection_variant: select_variant == :single ? :selected : :checked, + **system_arguments + ) + end + end + + status :alpha DEFAULT_PRELOAD = false @@ -328,6 +340,7 @@ class SelectPanel < Primer::Component # @param open_on_load [Boolean] Open the panel when the page loads. # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %> # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( src: nil, title: "Menu", diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts index 6987d7b59f..9a1cfef1e3 100644 --- a/app/components/primer/alpha/select_panel_element.ts +++ b/app/components/primer/alpha/select_panel_element.ts @@ -216,6 +216,10 @@ export class SelectPanelElement extends HTMLElement { const elem = entry.target if (entry.isIntersecting && elem === this.dialog) { this.updateAnchorPosition() + + if (this.#fetchStrategy === FetchStrategy.LOCAL) { + this.#updateItemVisibility() + } } } }) diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 3c7b390293..19341eb5f9 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -141,7 +141,7 @@ GEM activesupport (>= 6.0.0) railties (>= 6.0.0) io-console (0.7.2) - irb (1.13.2) + irb (1.14.0) rdoc (>= 4.0.0) reline (>= 0.4.2) jsonpath (1.1.5) @@ -223,7 +223,7 @@ GEM mime-types (3.5.2) mime-types-data (~> 3.2015) mime-types-data (3.2024.0507) - minitest (5.24.0) + minitest (5.24.1) ms_rest (0.7.6) concurrent-ruby (~> 1.0) faraday (>= 0.9, < 2.0.0) @@ -261,7 +261,7 @@ GEM puma (6.4.2) nio4r (~> 2.0) racc (1.8.0) - rack (3.1.4) + rack (3.1.7) rack-cors (2.0.2) rack (>= 2.0.0) rack-session (2.0.0) @@ -325,13 +325,13 @@ GEM stringio (3.1.1) thor (1.3.1) timeliness (0.3.10) - turbo-rails (2.0.5) + turbo-rails (2.0.6) actionpack (>= 6.0.0) activejob (>= 6.0.0) railties (>= 6.0.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) - view_component (3.12.1) + view_component (3.13.0) activesupport (>= 5.2.0, < 8.0) concurrent-ruby (~> 1.0) method_source (~> 1.0) diff --git a/demo/app/views/select_panel_items/index.html.erb b/demo/app/views/select_panel_items/index.html.erb index 47a3d0c3fc..7db71086d3 100644 --- a/demo/app/views/select_panel_items/index.html.erb +++ b/demo/app/views/select_panel_items/index.html.erb @@ -1,8 +1,6 @@ <% unless results.empty? %> <%= render(Primer::Alpha::SelectPanel::ItemList.new( - select_variant: :multiple, - p: 2, - role: "listbox", + select_variant: (params[:select_variant] || :multiple).to_sym, aria: { label: "options", }, diff --git a/package-lock.json b/package-lock.json index efc091a7c9..4907c0d809 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2501,9 +2501,9 @@ "integrity": "sha512-kBS0ZAwH8kZqFl0mV89KPK4cLYl2ZoKSfYngK4dz1eLAhKzTK0yu4LrvLdMeM7JhjWK6GxBtiY+cl1s6vR2pUg==" }, "node_modules/@pkgr/core": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz", - "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==", + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", "dev": true, "engines": { "node": "^12.20.0 || ^14.18.0 || >=16.0.0" @@ -2513,12 +2513,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz", - "integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "dependencies": { - "playwright": "1.45.1" + "playwright": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -5276,13 +5276,13 @@ } }, "node_modules/eslint-plugin-prettier": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", - "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "dev": true, "dependencies": { "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.6" + "synckit": "^0.9.1" }, "engines": { "node": "^14.18.0 || >=16.0.0" @@ -7024,9 +7024,9 @@ } }, "node_modules/mocha": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.6.0.tgz", - "integrity": "sha512-hxjt4+EEB0SA0ZDygSS015t65lJw/I2yRCS3Ae+SJ5FrbzrXgfYwJr96f0OvIXdj7h4lv/vLCrH3rkiuizFSvw==", + "version": "10.7.0", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.7.0.tgz", + "integrity": "sha512-v8/rBWr2VO5YkspYINnvu81inSz2y3ODJrhO175/Exzor1RcEZZkizgE2A+w/CAXXoESS8Kys5E62dOHGHzULA==", "dev": true, "dependencies": { "ansi-colors": "^4.1.3", @@ -7628,12 +7628,12 @@ } }, "node_modules/playwright": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz", - "integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "dependencies": { - "playwright-core": "1.45.1" + "playwright-core": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -7646,9 +7646,9 @@ } }, "node_modules/playwright-core": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz", - "integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -10256,9 +10256,9 @@ } }, "node_modules/synckit": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", - "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz", + "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==", "dev": true, "dependencies": { "@pkgr/core": "^0.1.0", @@ -12642,18 +12642,18 @@ "integrity": "sha512-kBS0ZAwH8kZqFl0mV89KPK4cLYl2ZoKSfYngK4dz1eLAhKzTK0yu4LrvLdMeM7JhjWK6GxBtiY+cl1s6vR2pUg==" }, "@pkgr/core": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz", - "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==", + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", "dev": true }, "@playwright/test": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz", - "integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "requires": { - "playwright": "1.45.1" + "playwright": "1.45.3" } }, "@primer/behaviors": { @@ -14583,13 +14583,13 @@ "dev": true }, "eslint-plugin-prettier": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", - "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", "dev": true, "requires": { "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.6" + "synckit": "^0.9.1" } }, "eslint-rule-documentation": { @@ -15853,9 +15853,9 @@ } }, "mocha": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.6.0.tgz", - "integrity": "sha512-hxjt4+EEB0SA0ZDygSS015t65lJw/I2yRCS3Ae+SJ5FrbzrXgfYwJr96f0OvIXdj7h4lv/vLCrH3rkiuizFSvw==", + "version": "10.7.0", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.7.0.tgz", + "integrity": "sha512-v8/rBWr2VO5YkspYINnvu81inSz2y3ODJrhO175/Exzor1RcEZZkizgE2A+w/CAXXoESS8Kys5E62dOHGHzULA==", "dev": true, "requires": { "ansi-colors": "^4.1.3", @@ -16295,19 +16295,19 @@ } }, "playwright": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz", - "integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.45.1" + "playwright-core": "1.45.3" } }, "playwright-core": { - "version": "1.45.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz", - "integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true }, "postcss": { @@ -17898,9 +17898,9 @@ } }, "synckit": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", - "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz", + "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==", "dev": true, "requires": { "@pkgr/core": "^0.1.0", diff --git a/previews/primer/alpha/select_panel_preview/playground.html.erb b/previews/primer/alpha/select_panel_preview/playground.html.erb index 3d7b6e373f..f48ef4ff81 100644 --- a/previews/primer/alpha/select_panel_preview/playground.html.erb +++ b/previews/primer/alpha/select_panel_preview/playground.html.erb @@ -5,7 +5,11 @@ <%= render(Primer::Alpha::SelectPanel.new( data: { interaction_subject: subject_id }, - src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure), + src: select_panel_items_path( + select_variant: :single, + show_results: !simulate_no_results, + fail: simulate_failure + ), select_variant: :single, fetch_strategy: :remote, **system_arguments diff --git a/static/arguments.json b/static/arguments.json index e4aa2f2b8b..e11c2f1b75 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -2467,6 +2467,28 @@ "type": "Symbol", "default": "`:outside_bottom`", "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`." + }, + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "[System arguments](/system-arguments)" + } + ] + }, + { + "component": "SelectPanel::ItemList", + "status": "alpha", + "a11y_reviewed": true, + "short_name": "SelectPanelItemList", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/", + "parameters": [ + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)." } ] }, diff --git a/static/audited_at.json b/static/audited_at.json index 1a64846829..0ce1f35794 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -53,6 +53,7 @@ "Primer::Alpha::SegmentedControl::Item": "2023-02-01", "Primer::Alpha::Select": "", "Primer::Alpha::SelectPanel": "", + "Primer::Alpha::SelectPanel::ItemList": "2023-07-10", "Primer::Alpha::SubmitButton": "", "Primer::Alpha::TabContainer": "", "Primer::Alpha::TabNav": "", diff --git a/static/constants.json b/static/constants.json index e7828a9478..78cc143fb5 100644 --- a/static/constants.json +++ b/static/constants.json @@ -606,13 +606,15 @@ "eventually_local", "local" ], - "ItemList": "Primer::Alpha::ActionList", + "ItemList": "Primer::Alpha::SelectPanel::ItemList", "SELECT_VARIANT_OPTIONS": [ "single", "multiple", "none" ] }, + "Primer::Alpha::SelectPanel::ItemList": { + }, "Primer::Alpha::SubmitButton": { }, "Primer::Alpha::TabContainer": { diff --git a/static/info_arch.json b/static/info_arch.json index 13d4c21f2e..887225e076 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -7630,6 +7630,12 @@ "type": "Symbol", "default": "`:outside_bottom`", "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`." + }, + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ @@ -8080,7 +8086,64 @@ } ], "subcomponents": [ + { + "fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList", + "description": "The component that should be used to render the list of items in the body of a SelectPanel.", + "accessibility_docs": null, + "is_form_component": false, + "is_published": true, + "requires_js": true, + "component": "SelectPanel::ItemList", + "status": "alpha", + "a11y_reviewed": true, + "short_name": "SelectPanelItemList", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/", + "parameters": [ + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}." + } + ], + "slots": [ + { + "name": "heading", + "description": "Heading text rendered above the list of items.", + "parameters": [ + { + "name": "component_klass", + "type": "Class", + "default": "N/A", + "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}." + }, + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "The arguments accepted by `component_klass`." + } + ] + }, + { + "name": "items", + "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.", + "parameters": [ + + ] + } + ], + "methods": [ + + ], + "previews": [ + ], + "subcomponents": [ + + ] + } ] }, { diff --git a/static/statuses.json b/static/statuses.json index 0df1ad198d..a3df352607 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -53,6 +53,7 @@ "Primer::Alpha::SegmentedControl::Item": "alpha", "Primer::Alpha::Select": "alpha", "Primer::Alpha::SelectPanel": "alpha", + "Primer::Alpha::SelectPanel::ItemList": "alpha", "Primer::Alpha::SubmitButton": "alpha", "Primer::Alpha::TabContainer": "alpha", "Primer::Alpha::TabNav": "alpha", diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb index 06022c1ca0..4fa1a6bc5a 100644 --- a/test/system/alpha/select_panel_test.rb +++ b/test/system/alpha/select_panel_test.rb @@ -195,6 +195,18 @@ def test_single_select_item_checked # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden + end + + def test_single_select_remote_fetch_item_checked + visit_preview(:playground) + + click_on_invoker_button + click_on_first_item + + # clicking item closes panel, so checked item is hidden + assert_selector "[aria-selected=true]", text: "Photon torpedo", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_checked_via_keyboard_enter @@ -212,6 +224,7 @@ def test_single_select_item_checked_via_keyboard_enter keyboard.type(:enter, :tab, :down, :enter) assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_checked_via_keyboard_space @@ -229,6 +242,7 @@ def test_single_select_item_checked_via_keyboard_space keyboard.type(:enter, :tab, :down, :space) assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_unchecks_previously_checked_item @@ -239,12 +253,14 @@ def test_single_select_item_unchecks_previously_checked_item # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 3", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden click_on_invoker_button click_on_second_item # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_selected_item_cannot_be_unchecked @@ -258,6 +274,7 @@ def test_single_selected_item_cannot_be_unchecked # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_disabled_item_cannot_be_checked @@ -282,6 +299,7 @@ def test_multi_select_items_checked # clicking item closes panel, so checked item is hidden assert_selector "[aria-checked=true]", text: "Item 2" assert_selector "[aria-checked=true]", text: "Item 3" + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_checked_via_keyboard_enter @@ -301,6 +319,8 @@ def test_multi_select_items_checked_via_keyboard_enter assert_selector "[aria-checked=true]", count: 2 assert_selector "[aria-checked=true]", text: "Item 1" assert_selector "[aria-checked=true]", text: "Item 2" + + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_checked_via_keyboard_space @@ -320,6 +340,8 @@ def test_multi_select_items_checked_via_keyboard_space assert_selector "[aria-checked=true]", count: 2 assert_selector "[aria-checked=true]", text: "Item 1" assert_selector "[aria-checked=true]", text: "Item 2" + + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_can_be_unchecked @@ -482,6 +504,17 @@ def test_closed_event assert page.evaluate_script("window.panelClosed") end + ########### LOCAL FETCH TESTS ############ + + def test_local_fetch_no_results + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + + refute_selector "select-panel ul li" + assert_selector "select-panel", text: "No results" + end + ########## EVENTUALLY LOCAL TESTS ############ def test_ev_loc_items_load