diff --git a/.changeset/cyan-readers-prove.md b/.changeset/cyan-readers-prove.md new file mode 100644 index 0000000000..035525944f --- /dev/null +++ b/.changeset/cyan-readers-prove.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': minor +--- + +Enable use_experimental_non_local_form for all SelectPanels diff --git a/.changeset/fruity-rooms-travel.md b/.changeset/fruity-rooms-travel.md new file mode 100644 index 0000000000..5f700e6010 --- /dev/null +++ b/.changeset/fruity-rooms-travel.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Updates SelectPanel anchor to allow IconButtons diff --git a/.changeset/tiny-frogs-pretend.md b/.changeset/tiny-frogs-pretend.md new file mode 100644 index 0000000000..398a842360 --- /dev/null +++ b/.changeset/tiny-frogs-pretend.md @@ -0,0 +1,5 @@ +--- +"@openproject/primer-view-components": patch +--- + +Remove left/right bg color borders from Avatar Stack diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 4ff7dfa1de..35fac6ac0f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -25,6 +25,7 @@ env: jobs: accessibility: name: Accessibility + timeout-minutes: 10 runs-on: labels: - runs-on @@ -34,12 +35,12 @@ jobs: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 with: - ruby-version: '3.4' + ruby-version: "3.4" bundler-cache: true - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" cache-dependency-path: | package-lock.json demo/package-lock.json @@ -50,24 +51,12 @@ jobs: - name: Test run: bundle exec rake test:accessibility components: - name: Components - runs-on: - labels: - - runs-on - - runner=16cpu-linux-x64 - - run-id=${{ github.run_id }} + name: Components (${{ matrix.label }}) + runs-on: ubuntu-latest strategy: fail-fast: false matrix: - include: - - rails_version: '7.2.2.1' - ruby_version: '3.2' - - rails_version: '7.2.2.1' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.4' + include: ${{ fromJson(vars.TEST_MATRIX) }} steps: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 @@ -78,7 +67,7 @@ jobs: - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" - name: Build run: | npm ci @@ -96,24 +85,12 @@ jobs: RUBY_VERSION: ${{ matrix.ruby_version }} RAILS_VERSION: ${{ matrix.rails_version }} lib: - name: Lib - runs-on: - labels: - - runs-on - - runner=16cpu-linux-x64 - - run-id=${{ github.run_id }} + name: Lib (${{ matrix.label }}) + runs-on: ubuntu-latest strategy: fail-fast: false matrix: - include: - - rails_version: '7.2.2.1' - ruby_version: '3.2' - - rails_version: '7.2.2.1' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.4' + include: ${{ fromJson(vars.TEST_MATRIX) }} steps: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 @@ -124,7 +101,7 @@ jobs: - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" - name: Build run: | npm ci @@ -142,20 +119,12 @@ jobs: RUBY_VERSION: ${{ matrix.ruby_version }} RAILS_VERSION: ${{ matrix.rails_version }} performance: - name: Performance + name: Performance (${{ matrix.label }}) runs-on: ubuntu-latest strategy: fail-fast: false matrix: - include: - - rails_version: '7.2.2.1' - ruby_version: '3.2' - - rails_version: '7.2.2.1' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.3' - - rails_version: 'main' - ruby_version: '3.4' + include: ${{ fromJson(vars.TEST_MATRIX) }} steps: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 @@ -183,12 +152,12 @@ jobs: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 with: - ruby-version: '3.2' + ruby-version: "3.2" bundler-cache: true - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" cache-dependency-path: | package-lock.json demo/package-lock.json @@ -206,12 +175,12 @@ jobs: - uses: actions/checkout@v5 - uses: ruby/setup-ruby@v1 with: - ruby-version: '3.2' + ruby-version: "3.2" bundler-cache: true - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" cache-dependency-path: | package-lock.json demo/package-lock.json @@ -235,12 +204,12 @@ jobs: fetch-depth: 0 - uses: ruby/setup-ruby@v1 with: - ruby-version: '3.2' + ruby-version: "3.2" bundler-cache: true - uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" cache-dependency-path: | package-lock.json demo/package-lock.json @@ -281,7 +250,7 @@ jobs: commit_message: Generating component snapshots file_pattern: .playwright/screenshots/**/*.png .playwright/screenshots/**/*.yml push_options: --force-with-lease - - name: 'Changes detected' + - name: "Changes detected" if: steps.auto-commit.outputs.changes_detected == 'true' uses: phulsechinmay/rewritable-pr-comment@v0.3.0 with: @@ -292,7 +261,7 @@ jobs: [Review differences](https://github.com/opf/primer_view_components/pull/${{ github.event.number }}/files?file-filters%5B%5D=.png&file-filters%5B%5D=.yml&show-viewed-files=false) GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - COMMENT_IDENTIFIER: 'visual-comparison-diff' + COMMENT_IDENTIFIER: "visual-comparison-diff" - uses: actions/upload-artifact@v4 with: name: playwright-report @@ -303,28 +272,24 @@ jobs: run: exit 1 selectors: name: CSS coverage - runs-on: - labels: - - runs-on - - runner=16cpu-linux-x64 - - run-id=${{ github.run_id }} + runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v5 - name: Setup Ruby uses: ruby/setup-ruby@v1 with: - ruby-version: '3.2' + ruby-version: "3.2" bundler-cache: true - name: Setup Node uses: actions/setup-node@v5 with: node-version: 20 - cache: 'npm' + cache: "npm" - name: NPM Build run: npm ci env: # Disable CSS minification for tests - CI: 'false' + CI: "false" - name: Test CSS run: bundle exec rake test:component_css diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot--after-interaction.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot--after-interaction.yml new file mode 100644 index 0000000000..626fcba67b --- /dev/null +++ b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot--after-interaction.yml @@ -0,0 +1,11 @@ +- button "Menu" [expanded] +- dialog "Menu": + - heading "Menu" [level=1] + - button "Close" + - text: Filter + - searchbox "Filter" + - listbox "Menu options": + - option "Item 1" + - option "Item 2" + - option "Item 3" + - text: 3 results tab for results \ No newline at end of file diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot.yml new file mode 100644 index 0000000000..64a0683915 --- /dev/null +++ b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot.yml @@ -0,0 +1 @@ +- button "Menu" \ No newline at end of file diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark.png new file mode 100644 index 0000000000..9fdb5e2e0b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_colorblind.png new file mode 100644 index 0000000000..9fdb5e2e0b Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_dimmed.png new file mode 100644 index 0000000000..f693b8228f Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_high_contrast.png new file mode 100644 index 0000000000..0554ba0f3c Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/default.png new file mode 100644 index 0000000000..70a0f7913e Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/focused.png new file mode 100644 index 0000000000..2bc75f1dcb Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light.png new file mode 100644 index 0000000000..8d8a05bde5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_colorblind.png new file mode 100644 index 0000000000..8d8a05bde5 Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_high_contrast.png new file mode 100644 index 0000000000..3797299bbd Binary files /dev/null and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/default.png index e3ec4dd70c..d9bf1b5859 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/focused.png index e3ec4dd70c..d9bf1b5859 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_2/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/default.png index a87ff99d70..18a7d557f0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/focused.png index a87ff99d70..18a7d557f0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/avatar_stack/avatar_3/focused.png differ diff --git a/Gemfile b/Gemfile index aad5f76b6b..70b4f9b3bb 100644 --- a/Gemfile +++ b/Gemfile @@ -9,9 +9,12 @@ gem "rack-cors" gem "rake", "~> 13.3" # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' - -# rubocop:disable Bundler/DuplicatedGem -if rails_version == "main" +if rails_version == "latest" + gem "actionview" + gem "activemodel" + gem "activesupport" + gem "railties" +elsif rails_version == "main" git "https://github.com/rails/rails", ref: "main" do gem "actionview" gem "activemodel" @@ -25,7 +28,6 @@ else gem "activesupport", rails_version gem "railties", rails_version end -# rubocop:enable Bundler/DuplicatedGem # Use Puma as the app server gem "puma", "~> 7.0.4" diff --git a/Gemfile.lock b/Gemfile.lock index 7c5012050d..1902bd1116 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -4,7 +4,7 @@ PATH openproject-primer_view_components (0.75.2) actionview (>= 7.2.0) activesupport (>= 7.2.0) - openproject-octicons (>= 19.29.0) + openproject-octicons (>= 19.30.1) view_component (>= 3.1, < 5.0) GEM @@ -154,7 +154,7 @@ GEM racc (~> 1.4) nokogiri (1.18.9-x86_64-linux-gnu) racc (~> 1.4) - openproject-octicons (19.29.0) + openproject-octicons (19.30.1) parallel (1.27.0) parser (3.3.9.0) ast (~> 2.4.1) diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb index 2d206885d3..a3711d7a3b 100644 --- a/app/components/primer/alpha/select_panel.rb +++ b/app/components/primer/alpha/select_panel.rb @@ -354,8 +354,7 @@ def with_avatar_item(**system_arguments) # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button. # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix. # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy. - # @param form_arguments [Hash] Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag. - # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923. + # @param form_arguments [Hash] Form arguments. Supported for all fetch strategies. # @param show_filter [Boolean] Whether or not to show the filter input. # @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) %> @@ -377,7 +376,6 @@ def initialize( dynamic_label_prefix: nil, dynamic_aria_label_prefix: nil, body_id: nil, - use_experimental_non_local_form: false, list_arguments: {}, form_arguments: {}, show_filter: true, @@ -411,13 +409,11 @@ def initialize( @loading_label = loading_label @loading_description_id = nil - if use_experimental_non_local_form - @form_builder = form_arguments[:builder] - @value = form_arguments[:value] - @input_name = form_arguments[:name] - end + @form_builder = form_arguments[:builder] + @value = form_arguments[:value] + @input_name = form_arguments[:name] - @list_form_arguments = use_experimental_non_local_form ? {} : form_arguments + @list_form_arguments = {} if loading_description.present? @loading_description_id = "#{@panel_id}-loading-description" @@ -509,8 +505,9 @@ def initialize( # Adds a show button (i.e. a button) that will open the panel when clicked. # + # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered. # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>. - renders_one :show_button, lambda { |**system_arguments| + renders_one :show_button, lambda { |icon: nil, **system_arguments| system_arguments[:id] = "#{@panel_id}-button" system_arguments[:aria] = merge_aria( @@ -518,7 +515,11 @@ def initialize( { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } } ) - Primer::Beta::Button.new(**system_arguments) + if icon.present? + Primer::Beta::IconButton.new(icon: icon, **system_arguments) + else + Primer::Beta::Button.new(**system_arguments) + end } # Customizable content for the error message that appears when items are fetched for the first time. This message diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss index 5623dad5dd..90f580681d 100644 --- a/app/components/primer/beta/avatar_stack.pcss +++ b/app/components/primer/beta/avatar_stack.pcss @@ -37,8 +37,6 @@ /* stylelint-disable-next-line primer/spacing */ margin-right: -11px; background-color: var(--bgColor-default); - /* stylelint-disable-next-line primer/colors */ - border-right: var(--borderWidth-thin) solid var(--bgColor-default); border-radius: var(--borderRadius-small); transition: margin 0.1s ease-in-out; @@ -48,7 +46,6 @@ &:last-child { z-index: 1; - border-right: 0; } /* stylelint-disable-next-line selector-max-type */ @@ -117,10 +114,6 @@ margin-right: 0; margin-left: var(--base-size-4); } - - & .avatar:not(:last-child) { - border-left: 0; - } } & .avatar.avatar-more { @@ -140,8 +133,5 @@ margin-right: 0; /* stylelint-disable-next-line primer/spacing */ margin-left: -11px; - border-right: 0; - /* stylelint-disable-next-line primer/colors */ - border-left: var(--borderWidth-thin) solid var(--bgColor-default); } } diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 0410534178..12ae9f8233 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -4,7 +4,7 @@ PATH openproject-primer_view_components (0.75.2) actionview (>= 7.2.0) activesupport (>= 7.2.0) - openproject-octicons (>= 19.29.0) + openproject-octicons (>= 19.30.1) view_component (>= 3.1, < 5.0) GEM @@ -256,7 +256,7 @@ GEM oj (3.16.10) bigdecimal (>= 3.0) ostruct (>= 0.2) - openproject-octicons (19.29.0) + openproject-octicons (19.30.1) os (1.1.4) ostruct (0.6.1) pp (0.6.3) @@ -275,7 +275,7 @@ GEM puma (6.6.1) nio4r (~> 2.0) racc (1.8.1) - rack (3.1.16) + rack (3.1.17) rack-cors (3.0.0) logger rack (>= 3.0.14) diff --git a/previews/primer/alpha/select_panel_preview.rb b/previews/primer/alpha/select_panel_preview.rb index 2c221db8bb..6ff02e4d3e 100644 --- a/previews/primer/alpha/select_panel_preview.rb +++ b/previews/primer/alpha/select_panel_preview.rb @@ -186,6 +186,14 @@ def with_avatar_items(open_on_load: false) render_with_template(locals: { open_on_load: open_on_load }) end + # @label SelectPanel with Primer::IconButton + # + # @snapshot interactive + # @param open_on_load toggle + def select_panel_with_icon_button(open_on_load: false) + render_with_template(locals: { open_on_load: open_on_load }) + end + # @!group With icons # @label With leading icons diff --git a/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb b/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb index 8267266cd4..c993c7a977 100644 --- a/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb +++ b/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb @@ -11,7 +11,6 @@ open_on_load: open_on_load, dynamic_label: true, dynamic_label_prefix: "Item", - use_experimental_non_local_form: true, form_arguments: { name: :item, builder: builder, diff --git a/previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb b/previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb new file mode 100644 index 0000000000..0711ab4931 --- /dev/null +++ b/previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb @@ -0,0 +1,19 @@ +<% subject_id = SecureRandom.hex %> + +<%= render(Primer::Alpha::SelectPanel.new( + data: { interaction_subject: subject_id }, + select_variant: :single, + fetch_strategy: :local, + dynamic_label: true, + dynamic_label_prefix: "Item", + dynamic_aria_label_prefix: "Selected item", + open_on_load: open_on_load +)) do |panel| %> + <% panel.with_show_button(icon: :star, scheme: :invisible, "aria-label": 'Menu') %> + + <% panel.with_item(label: "Item 1") %> + <% panel.with_item(label: "Item 2") %> + <% panel.with_item(label: "Item 3") %> +<% end %> + +<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %> diff --git a/primer_view_components.gemspec b/primer_view_components.gemspec index a1785fb610..11e0f9962d 100644 --- a/primer_view_components.gemspec +++ b/primer_view_components.gemspec @@ -20,6 +20,6 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "actionview", ">= 7.2.0" spec.add_runtime_dependency "activesupport", ">= 7.2.0" - spec.add_runtime_dependency "openproject-octicons", ">= 19.29.0" + spec.add_runtime_dependency "openproject-octicons", ">= 19.30.1" spec.add_runtime_dependency "view_component", [">= 3.1", "< 5.0"] end diff --git a/static/arguments.json b/static/arguments.json index a62368944d..63d9a3a9f5 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -2607,13 +2607,7 @@ "name": "form_arguments", "type": "Hash", "default": "`{}`", - "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag." - }, - { - "name": "use_experimental_non_local_form", - "type": "Boolean", - "default": "`false`", - "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923." + "description": "Form arguments. Supported for all fetch strategies." }, { "name": "show_filter", diff --git a/static/info_arch.json b/static/info_arch.json index 600cb784e3..d2d52d031f 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -7854,13 +7854,7 @@ "name": "form_arguments", "type": "Hash", "default": "`{}`", - "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag." - }, - { - "name": "use_experimental_non_local_form", - "type": "Boolean", - "default": "`false`", - "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923." + "description": "Form arguments. Supported for all fetch strategies." }, { "name": "show_filter", @@ -7940,6 +7934,12 @@ "name": "show_button", "description": "Adds a show button (i.e. a button) that will open the panel when clicked.", "parameters": [ + { + "name": "icon", + "type": "String", + "default": "N/A", + "description": "Name of {{link_to_octicons}} to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered." + }, { "name": "system_arguments", "type": "Hash", @@ -8263,6 +8263,19 @@ ] } }, + { + "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button", + "name": "select_panel_with_icon_button", + "snapshot": "interactive", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/select_panel/with_leading_icons", "name": "with_leading_icons", diff --git a/static/previews.json b/static/previews.json index 637a6d83ec..46b5e68ee1 100644 --- a/static/previews.json +++ b/static/previews.json @@ -7248,6 +7248,19 @@ ] } }, + { + "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button", + "name": "select_panel_with_icon_button", + "snapshot": "interactive", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/select_panel/with_leading_icons", "name": "with_leading_icons", diff --git a/test/components/alpha/select_panel_test.rb b/test/components/alpha/select_panel_test.rb index 1fe2e6c198..d7005c67e8 100644 --- a/test/components/alpha/select_panel_test.rb +++ b/test/components/alpha/select_panel_test.rb @@ -183,6 +183,12 @@ def test_renders_form_default_value assert_selector("input[value='3']", visible: :all) end + + def test_renders_icon_button_as_invoker + render_preview(:select_panel_with_icon_button) + + assert_selector(".Button--iconOnly") + end end end end diff --git a/test/test_helpers/cuprite_setup.rb b/test/test_helpers/cuprite_setup.rb index ff0168598c..a83a84fdb2 100644 --- a/test/test_helpers/cuprite_setup.rb +++ b/test/test_helpers/cuprite_setup.rb @@ -6,13 +6,40 @@ # Then, we need to register our driver to be able to use it later # with #driven_by method. Capybara.register_driver(:primer_cuprite) do |app| - Capybara::Cuprite::Driver.new( - app, + options = { + process_timeout: 20, + timeout: 10, + # In case the timeout is not enough, this option can be activated: + # pending_connection_errors: false, inspector: true, # Allow running Chrome in a headful mode by setting HEADLESS env # var to a falsey value - headless: !ENV["HEADLESS"].in?(%w[n 0 no false]) - ) + headless: !ENV["HEADLESS"].in?(%w[n 0 no false]), + # workaround for compatibility issues with browserless docker image and ferrum + # see https://github.com/rubycdp/ferrum/issues/540 + flatten: false + } + + browser_options = { + "disable-dev-shm-usage": nil, + "disable-gpu": nil, + "disable-popup-blocking": nil, + "no-sandbox": nil, + "disable-smooth-scrolling": true, + # Disable timers being throttled in background pages/tabs. Useful for + # parallel test runs. + "disable-background-timer-throttling": nil, + # Normally, Chrome will treat a 'foreground' tab instead as backgrounded + # if the surrounding window is occluded (aka visually covered) by another + # window. This flag disables that. Useful for parallel test runs. + "disable-backgrounding-occluded-windows": nil, + # This disables non-foreground tabs from getting a lower process priority. + # Useful for parallel test runs. + "disable-renderer-backgrounding": nil + } + + driver_options = options.merge(browser_options: browser_options) + Capybara::Cuprite::Driver.new(app, **driver_options) end # Configure Capybara to use :cuprite driver by default