openproject-primer_view_components 0.23.0 → 0.24.0

data/app/forms/auto_complete_form.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "../../previews/primer/url_helpers"
+
+# :nodoc:
+class AutoCompleteForm < ApplicationForm
+  form do |auto_complete_form|
+    auto_complete_form.auto_complete(
+      name: :fruit,
+      label: "Fruit",
+      caption: "Please enter your favorite fruit",
+      src: Primer::UrlHelpers.autocomplete_index_path,
+      validation_message: "Something went wrong"
+    )
+
+    auto_complete_form.submit(label: "Submit", name: :submit)
+  end
+end

data/app/forms/select_form.rb

@@ -8,5 +8,15 @@ class SelectForm < ApplicationForm
       city_list.option(label: "Bellevue", value: "bellevue")
       city_list.option(label: "Seattle", value: "seattle")
     end
+
+    select_form.select_list(name: "been", label: "Places you've been", caption: "Select all that apply", multiple: true, include_hidden: false) do |been_list|
+      been_list.option(label: "Lima, Peru", value: "lima")
+      been_list.option(label: "Tokyo, Japan", value: "tokyo")
+      been_list.option(label: "Reykjavík, Iceland", value: "reykjavik")
+      been_list.option(label: "Chiang Mai, Thailand", value: "chiang_mai")
+      been_list.option(label: "Queenstown, New Zealand", value: "queenstown")
+    end
+
+    select_form.submit(name: :submit, label: "Submit")
   end
 end

data/lib/primer/forms/auto_complete.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Beta::AutoComplete.new(**auto_complete_arguments)) do |autocomplete| %>
+  <% @input.block.call(autocomplete) if @input.block %>
+  <% autocomplete.with_input(**input_arguments) %>
+<% end %>
+<%= render(ValidationMessage.new(input: @input)) %>
+<%= render(Caption.new(input: @input)) %>

data/lib/primer/forms/auto_complete.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class AutoComplete < BaseComponent
+      ARGUMENT_TYPES = %i(keyreq key).freeze
+
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.merge_input_arguments!(text_field_attributes.deep_symbolize_keys)
+      end
+
+      def self.auto_complete_argument_names
+        @auto_complete_argument_names ||=
+          Primer::Beta::AutoComplete.instance_method(:initialize)
+            .parameters
+            .filter_map { |(type, param_name)| next param_name if ARGUMENT_TYPES.include?(type) }
+      end
+
+      private
+
+      def all_input_arguments
+        @all_input_arguments ||= @input.input_arguments.deep_dup.tap do |args|
+          # rails uses :class but PVC wants :classes
+          args[:classes] = class_names(
+            args[:classes],
+            args.delete(:class)
+          )
+        end
+      end
+
+      def auto_complete_arguments
+        all_args = all_input_arguments
+        all_args
+          .slice(*self.class.auto_complete_argument_names)
+          .merge(
+            input_name: all_args[:name],
+            input_id: all_args[:id],
+            label_text: @input.label,
+            list_id: "#{all_args[:id]}-list"
+          )
+      end
+
+      def input_arguments
+        all_input_arguments.except(*self.class.auto_complete_argument_names, :id, :name)
+      end
+
+      def text_field_attributes
+        builder.text_field_attributes(@input.name).except("size", "value")
+      end
+    end
+  end
+end

data/lib/primer/forms/builder.rb

@@ -27,6 +27,21 @@ ActionView::Helpers::Tags::Base.prepend(
 
 module Primer
   module Forms
+    module Tags
+      # :nodoc:
+      class TextField < ::ActionView::Helpers::Tags::TextField
+        def attributes
+          render
+        end
+
+        private
+
+        def tag(_name, options)
+          options
+        end
+      end
+    end
+
     # :nodoc:
     class Builder < ActionView::Helpers::FormBuilder
       alias primer_fields_for fields_for
@@ -57,6 +72,10 @@ module Primer
         super(*args, classify(options).merge(generate_error_markup: false), &block)
       end
 
+      def text_field_attributes(method, options = {})
+        Tags::TextField.new(@object_name, method, @template, options).attributes
+      end
+
       def text_area(*args, **options, &block)
         super(*args, classify(options).merge(generate_error_markup: false), &block)
       end

data/lib/primer/forms/check_box_group.html.erb

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-check-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(check_box.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

data/lib/primer/forms/check_box_group.rb

@@ -8,10 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-check-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

data/lib/primer/forms/dsl/auto_complete_input.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class AutoCompleteInput < Input
+        attr_reader :name, :label, :block
+
+        def initialize(name:, label:, **system_arguments, &block)
+          @name = name
+          @label = label
+          @block = block
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          AutoComplete.new(input: self)
+        end
+
+        def type
+          :autocomplete
+        end
+
+        # The AutoComplete Primer component does not allow auto-focusing
+        def focusable?
+          false
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/check_box_group_input.rb

@@ -25,6 +25,14 @@ module Primer
           :check_box_group
         end
 
+        def focusable?
+          true
+        end
+
+        def autofocus!
+          @check_boxes.first&.autofocus!
+        end
+
         def check_box(**system_arguments, &block)
           args = {
             name: @name,

data/lib/primer/forms/dsl/input.rb

@@ -31,7 +31,7 @@ module Primer
         #   @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
 
         # @!macro [new] form_full_width_arguments
-        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container.
+        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
@@ -67,7 +67,9 @@ module Primer
           @form = form
 
           @input_arguments = system_arguments
+          @input_arguments.delete(:id) unless @input_arguments[:id].present?
           @label_arguments = @input_arguments.delete(:label_arguments) || {}
+          @label_arguments[:for] = id if id.present?
 
           @label_arguments[:class] = class_names(
             @label_arguments[:class],
@@ -82,7 +84,7 @@ module Primer
           @caption = @input_arguments.delete(:caption)
           @validation_message = @input_arguments.delete(:validation_message)
           @invalid = @input_arguments.delete(:invalid)
-          @full_width = @input_arguments.delete(:full_width)
+          @full_width = @input_arguments.delete(:full_width) { true }
           @size = @input_arguments.delete(:size)
           @input_width = @input_arguments.delete(:input_width)
 
@@ -257,6 +259,10 @@ module Primer
           input_arguments[:autofocus] = true
         end
 
+        def id
+          @input_arguments[:id]
+        end
+
         # :nocov:
         def name
           raise_for_abstract_method!(__method__)

data/lib/primer/forms/dsl/input_methods.rb

@@ -68,6 +68,15 @@ module Primer
           add_input TextFieldInput.new(builder: builder, form: form, **options, &block)
         end
 
+        # Adds an autocomplete text field to this form.
+        #
+        # @param options [Hash] The options accepted by the autocomplete input (see forms docs).
+        # @param block [Proc] A block that will be yielded a reference to the input object so it can be customized.
+        def auto_complete(**options, &block)
+          options = decorate_options(**options)
+          add_input AutoCompleteInput.new(builder: builder, form: form, **options, &block)
+        end
+
         # Adds a text area to this form.
         #
         # @param options [Hash] The options accepted by the text area input (see forms docs).

data/lib/primer/forms/dsl/radio_button_group_input.rb

@@ -25,6 +25,14 @@ module Primer
           :radio_button_group
         end
 
+        def autofocus!
+          @radio_buttons.first&.autofocus!
+        end
+
+        def focusable?
+          true
+        end
+
         def radio_button(**system_arguments, &block)
           @radio_buttons << RadioButtonInput.new(
             builder: @builder, form: @form, name: @name, disabled: disabled?,

data/lib/primer/forms/dsl/select_input.rb

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class SelectInput < Input
-        SELECT_ARGUMENTS = %i[multiple include_blank prompt].freeze
+        SELECT_ARGUMENTS = %i[multiple include_blank include_hidden prompt].freeze
 
         # :nodoc:
         class Option
@@ -38,6 +38,10 @@ module Primer
           yield(self) if block_given?
         end
 
+        def multiple?
+          @select_arguments.fetch(:multiple, false)
+        end
+
         def option(**system_arguments)
           @options << Option.new(**system_arguments)
         end

data/lib/primer/forms/form_control.rb

@@ -16,8 +16,7 @@ module Primer
             system_arguments[:class],
             system_arguments[:classes],
             "FormControl",
-            "width-full",
-            "FormControl--fullWidth" => @input.full_width?
+            "width-full FormControl--fullWidth" => @input.full_width?
           )
         }
 

data/lib/primer/forms/primer_text_field.js

@@ -29,7 +29,7 @@ class PrimerTextFieldElement extends HTMLElement {
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', async (event) => {
+        this.addEventListener('auto-check-success', async (event) => {
             const message = await event.detail.response.text();
             if (message && message.length > 0) {
                 this.setSuccess(message);
@@ -38,7 +38,7 @@ class PrimerTextFieldElement extends HTMLElement {
                 this.clearError();
             }
         }, { signal });
-        this.inputElement.addEventListener('auto-check-error', async (event) => {
+        this.addEventListener('auto-check-error', async (event) => {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });

data/lib/primer/forms/primer_text_field.ts

@@ -17,7 +17,7 @@ class PrimerTextFieldElement extends HTMLElement {
     this.#abortController?.abort()
     const {signal} = (this.#abortController = new AbortController())
 
-    this.inputElement.addEventListener(
+    this.addEventListener(
       'auto-check-success',
       async (event: any) => {
         const message = await event.detail.response.text()
@@ -30,7 +30,7 @@ class PrimerTextFieldElement extends HTMLElement {
       {signal},
     )
 
-    this.inputElement.addEventListener(
+    this.addEventListener(
       'auto-check-error',
       async (event: any) => {
         const errorMessage = await event.detail.response.text()

data/lib/primer/forms/radio_button_group.html.erb

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-radio-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(radio_button.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

data/lib/primer/forms/radio_button_group.rb

@@ -8,10 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-radio-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

data/lib/primer/forms/select.html.erb

@@ -3,3 +3,4 @@
     <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
   <% end %>
 <% end %>
+

data/lib/primer/forms/select.rb

@@ -8,17 +8,21 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_input_classes(
-          "FormControl-select",
-          Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
-        )
+        @input.add_input_classes("FormControl-select")
+
+        if !input.multiple?
+          @input.add_input_classes(
+            Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
+          )
+        end
 
         wrap_classes = ["FormControl-select-wrap"]
         wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
 
         @field_wrap_arguments = {
           class: class_names(wrap_classes),
-          hidden: @input.hidden?
+          hidden: @input.hidden?,
+          data: { multiple: input.multiple? }
         }
       end
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 23
+      MINOR = 24
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/action_list_preview.rb

@@ -459,6 +459,48 @@ module Primer
           component.with_item(label: "Active item", href: "/", active: true)
         end
       end
+
+      # @label Long label
+      #
+      # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
+      # @snapshot
+      def long_label_with_tooltip(truncate_label: :show_tooltip)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_wrap(truncate_label: :none)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_truncate_no_tooltip(truncate_label: :truncate)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_show_tooltip_with_truncate_label(truncate_label: :none)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/alpha/select_preview.rb

@@ -26,7 +26,7 @@ module Primer
         required: false,
         visually_hide_label: false,
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil,
@@ -100,6 +100,17 @@ module Primer
         end
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/alpha/text_area_preview.rb

@@ -23,7 +23,7 @@ module Primer
         caption: "You can trust me, I'm a website",
         required: false,
         visually_hide_label: false,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil
@@ -70,6 +70,12 @@ module Primer
         render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/alpha/text_field_preview.rb

@@ -34,7 +34,7 @@ module Primer
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
         clear_button_id: "my-text-field-clear-button",
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil,
@@ -128,6 +128,12 @@ module Primer
         render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/beta/nav_list_preview.rb

@@ -129,6 +129,49 @@ module Primer
       # @label Trailing action
       # @snapshot
       def trailing_action; end
+
+      # @label Long label truncate overflow
+      #
+      # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
+      # @snapshot
+      def long_label_with_tooltip(truncate_label: :show_tooltip)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_trailing_visual_icon(icon: :plus)
+          end
+        end
+      end
+
+      def long_label_wrap(truncate_label: :none)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_truncate_no_tooltip(truncate_label: :truncate)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_show_tooltip_no_truncate_label
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/forms_preview/auto_complete_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
+  <%= render(AutoCompleteForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/select_form.html.erb

@@ -1,3 +1,3 @@
-<%= primer_form_with(url: "/foo") do |f| %>
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
   <%= render(SelectForm.new(f)) %>
 <% end %>

data/previews/primer/forms_preview.rb

@@ -46,5 +46,7 @@ module Primer
     def immediate_validation_form; end
 
     def example_toggle_switch_form; end
+
+    def auto_complete_form; end
   end
 end

data/previews/primer/open_project/page_header_preview/actions.html.erb

@@ -1,15 +1,18 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
-  <% component.with_title(tag: :h1) do %>
+  <% component.with_title do %>
     A title
   <% end %>
   <% component.with_description do %>
     A description with actions
   <% end %>
-  <% component.with_actions do %>
-    <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
-      <% component.with_show_button { "Menu" } %>
-      <% component.with_item(label: "Item", tag: :button, value: "") %>
-      <% component.with_item(
+  <% component.with_action do %>
+    <%= render(Primer::Beta::IconButton.new(icon: 'pencil', 'aria-label': 'Edit')) %>
+  <% end %>
+  <% component.with_action do %>
+    <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+      <% menu.with_show_button { "Menu" } %>
+      <% menu.with_item(label: "Item", tag: :button, value: "") %>
+      <% menu.with_item(
            label: "Show dialog",
            tag: :button,
            content_arguments: { "data-show-dialog-id": "my-dialog" },
@@ -19,4 +22,3 @@
     <% end %>
   <% end %>
 <% end %>
-