primer_view_components 0.19.0 → 0.20.0

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.
@@ -56,7 +56,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],
@@ -71,7 +73,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)
 
           # If scope_name_to_model is false, the name of the input for eg. `my_field`
@@ -240,6 +242,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,14 +8,18 @@ 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
 
         @field_wrap_arguments = {
           class: "FormControl-select-wrap",
-          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 = 19
+      MINOR = 20
       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

@@ -25,7 +25,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
@@ -97,6 +97,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

@@ -33,7 +33,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,
@@ -125,6 +125,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

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

data/static/arguments.json

@@ -249,9 +249,9 @@
       },
       {
         "name": "truncate_label",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Truncate label with ellipsis."
+        "type": "Boolean | Symbol",
+        "default": "`:none`",
+        "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
       },
       {
         "name": "href",
@@ -2494,7 +2494,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2624,7 +2624,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2814,13 +2814,13 @@
         "name": "size",
         "type": "Symbol",
         "default": "`:medium`",
-        "description": "What size toggle switch to render. One of `:end` or `:start`."
+        "description": "What size toggle switch to render. One of `:medium` or `:small`."
       },
       {
         "name": "status_label_position",
         "type": "Symbol",
         "default": "`:start`",
-        "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
+        "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
       {
         "name": "system_arguments",

data/static/constants.json

@@ -95,6 +95,7 @@
     "DEFAULT_DESCRIPTION_SCHEME": "block",
     "DEFAULT_SCHEME": "default",
     "DEFAULT_SIZE": "medium",
+    "DEFAULT_TRUNCATION_BEHAVIOR": "none",
     "DESCRIPTION_SCHEME_MAPPINGS": {
       "inline": "ActionListItem-descriptionWrap--inline",
       "block": "ActionListItem-descriptionWrap"
@@ -120,6 +121,20 @@
       "medium",
       "large",
       "xlarge"
+    ],
+    "TRUNCATION_BEHAVIOR_MAPPINGS": {
+      "none": null,
+      "false": null,
+      "show_tooltip": "ActionListItem-label--truncate",
+      "truncate": "ActionListItem-label--truncate",
+      "true": "ActionListItem-label--truncate"
+    },
+    "TRUNCATION_BEHAVIOR_OPTIONS": [
+      "none",
+      false,
+      "show_tooltip",
+      "truncate",
+      true
     ]
   },
   "Primer::Alpha::ActionMenu": {