primer_view_components 0.0.83 → 0.0.84

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f590f1c0d966e26b387252db1b83998d5acfb5aacd2d5e4fd5171b52557ecce0
-  data.tar.gz: 85257456daac921ff79dbaf22340b2ce1bad6a5faefc59d275294c339bbfd38b
+  metadata.gz: 965629b8d612e3a35d3e4f430e869251f1ebe91acd3178e9a8f9284fa99e0553
+  data.tar.gz: a9b726891d9148550e7db58845de64b762d0cccedccd6804f7208b4646c4f81a
 SHA512:
-  metadata.gz: 351d15d09d3eca4e61a736d392a38bc0d611909f05b5edd26dcbd6edf4aff4619bfcf827cfd9a2489a3e6e63bef28375826b3757ede4e20f26ae7081a565bab3
-  data.tar.gz: 247c094bd647052cf34a8d9c90994ca8e60ae983d3addb9540a78a1aa38b8fc3ee5ca3c7cbd6e493fda071c133b43f4de177827edb7eaaeac971aa3c59811c0e
+  metadata.gz: 18b4dec4a3d863d642479c36267c877c9bafc0e3900c8876c2510391ba46d51e7111adb7d84cbd8338e01921714e943d8211a76f0f8adb875d8e5b8e297ebd37
+  data.tar.gz: 19ce0e83e6f35918b8b7a1bb119c7670a688781fa1d61b7334be3bc0dae7cf8fb0f5f8f0ab83123219e2daff65a03d610d030755b800744baaeda3310cc1d4b1

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+## 0.0.84
+
+### Patch Changes
+
+- [#1189](https://github.com/primer/view_components/pull/1189) [`ec3af746`](https://github.com/primer/view_components/commit/ec3af746dceb8e4a0c967fe270f149d48e81489b) Thanks [@langermank](https://github.com/langermank)! - Autocomplete design updates
+
+* [#1229](https://github.com/primer/view_components/pull/1229) [`5631d286`](https://github.com/primer/view_components/commit/5631d286c559cf4bbb96b85c0bb41dbeda5953d4) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - component generator: correcting template and thor tasks to account for component status
+
+- [#1232](https://github.com/primer/view_components/pull/1232) [`3a154bf4`](https://github.com/primer/view_components/commit/3a154bf4452f5ed8f7694eb917c13258d34ff6c0) Thanks [@jonrohan](https://github.com/jonrohan)! - Consolidating view_components previews into test/previews/ folder
+
+* [#1224](https://github.com/primer/view_components/pull/1224) [`2fc38746`](https://github.com/primer/view_components/commit/2fc387460e5f185463cbca8ffe0f098a06e2dec8) Thanks [@camertron](https://github.com/camertron)! - Add the ConditionalWrapper for conditionally wrapping content
+
+- [#1234](https://github.com/primer/view_components/pull/1234) [`ee04a4a9`](https://github.com/primer/view_components/commit/ee04a4a937c56156b3232552c7d10b0ec0336ab7) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - updating links in the contributing docs to point to correct locations
+
 ## 0.0.83
 
 ### Patch Changes

data/app/components/primer/alpha/auto_complete/auto_complete.html.erb

@@ -0,0 +1,24 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <label for="<%= @input_id %>" class="<%= @label_classes %>">
+    <% if @is_label_visible %>
+      <%= @label_text %>
+    <% else %>
+      <span class="sr-only"><%= @label_text %></span>
+    <% end %>
+  </label>
+  <span class="autocomplete-body">
+    <% if @with_icon %>
+      <div class="form-control autocomplete-embedded-icon-wrap">
+        <%= render Primer::OcticonComponent.new(:search) %>
+    <% end %>
+    <%= input %>
+    <% if @is_clearable %>
+      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
+    <% end %>
+    <% if @with_icon %>
+      </div>
+    <% end %>
+    <%= results %>
+  </span>
+  <div id="<%= @list_id %>-feedback" class="sr-only"></div>
+<% end %>

data/app/components/primer/alpha/auto_complete/item.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class AutoComplete
+      # Use `AutoCompleteItem` to list results of an auto-completed search.
+      class Item < Primer::Component
+        status :alpha
+
+        # @example Default
+        #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
+        #     <% c.results(classes: "custom-class") do %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+        #         Apple
+        #       <% end %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
+        #         Orange
+        #       <% end %>
+        #     <% end %>
+        #   <% end %>
+        #
+        # @param value [String] Value of the item.
+        # @param selected [Boolean] Whether the item is selected.
+        # @param disabled [Boolean] Whether the item is disabled.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(value:, selected: false, disabled: false, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :option
+          @system_arguments[:"data-autocomplete-value"] = value
+          @system_arguments[:"aria-selected"] = true if selected
+          @system_arguments[:"aria-disabled"] = true if disabled
+          @system_arguments[:classes] = class_names(
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/auto_complete.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
+    # input field. This list is populated by server search results.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * `label_text` is required and visible by default.
+    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   However, please note that a visible label should almost always
+    #   be used unless there is compelling reason not to. A placeholder is not a label.
+    class AutoComplete < Primer::Component
+      status :alpha
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "autocomplete-results",
+          system_arguments[:classes]
+        )
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Customizable input used to search for results.
+      # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        sanitized_args = deny_tag_argument(**system_arguments)
+        sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
+        deny_aria_key(
+          :label,
+          "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :id,
+          "`id` will always be set to @input_id.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :name,
+          "Set @input_name on the component initializer instead with `input_name`.",
+          **sanitized_args
+        )
+        sanitized_args[:id] = @input_id
+        sanitized_args[:name] = @input_name
+        sanitized_args[:tag] = :input
+        sanitized_args[:autocomplete] = "off"
+        sanitized_args[:type] = :text
+        sanitized_args[:classes] = class_names(
+          "form-control",
+          sanitized_args[:classes]
+        )
+        Primer::BaseComponent.new(**sanitized_args)
+      }
+
+      # @example Default
+      #   @description
+      #     Labels are stacked by default.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #
+      # @example With inline label
+      #   @description
+      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #
+      # @example With non-visible label
+      #   @description
+      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #
+      # @example With icon
+      #   @description
+      #     To display a search icon, set `with_icon` to `true`.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
+      #
+      # @example With icon and non-visible label
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
+      #
+      # @example With clear button
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      #
+      # @example With custom classes for the input
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
+      #     <% c.input(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
+      #     <% c.results(classes: "custom-class") do %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+      #         Apple
+      #       <% end %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
+      #         Orange
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label_text [String] The label of the input.
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
+      # @param list_id [String] Id of the list element.
+      # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
+      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
+      # @param is_clearable [Boolean] Adds optional clear button.
+      # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
+        @label_text = label_text
+        @list_id = list_id
+        @input_id = input_id
+        @input_name = input_name || input_id
+        @is_label_visible = is_label_visible
+        @with_icon = with_icon
+        @is_clearable = is_clearable
+        @label_classes = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+      end
+
+      # add `input` and `results` without needing to explicitly call them in the view
+      def before_render
+        results(classes: "") unless results
+        input(classes: "") unless input
+      end
+
+      private
+
+      # Private: determines the label classes based on component configration.
+      #
+      # If the label is not visible, return an empty string.
+      #
+      # @param args [Hash] The component configuration.
+      # @return [String] The label classes.
+      def label_classes(**args)
+        return "" if args[:is_label_visible] == false
+
+        args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
+      end
+    end
+  end
+end

data/app/components/primer/beta/auto_complete/auto_complete.html.erb

@@ -1,24 +1,28 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <label for="<%= @input_id %>" class="<%= @label_classes %>">
-    <% if @is_label_visible %>
+  <div class="<%= @form_group_classes %>">
+    <label for="<%= @input_id %>" class="FormControl-label <% if @visually_hide_label %>sr-only<% end %>">
       <%= @label_text %>
+    </label>
+    <% if leading_visual || @show_clear_button %>
+        <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-input-wrap--leadingVisual<% end %>">
+            <span class="FormControl-input-leadingVisualWrap">
+                <%= leading_visual %>
+            </span>
+            <%= input %>
+            <% if @show_clear_button %>
+              <button id="<%= @input_id %>-clear" class="FormControl-input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
+            <% end %>
+        </div>
     <% else %>
-      <span class="sr-only"><%= @label_text %></span>
+      <%= input %>
     <% end %>
-  </label>
-  <span class="autocomplete-body">
-    <% if @with_icon %>
-      <div class="form-control autocomplete-embedded-icon-wrap">
-        <%= render Primer::OcticonComponent.new(:search) %>
-    <% end %>
-    <%= input %>
-    <% if @is_clearable %>
-      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
-    <% end %>
-    <% if @with_icon %>
+  </div>
+  <div class="Overlay-backdrop--anchor">
+    <div class="Overlay Overlay--height-auto Overlay--width-auto">
+      <div class="Overlay-body Overlay-body--paddingNone">
+        <%= results %>
       </div>
-    <% end %>
-    <%= results %>
-  </span>
+    </div>
+  </div>
   <div id="<%= @list_id %>-feedback" class="sr-only"></div>
 <% end %>

data/app/components/primer/beta/auto_complete/item.html.erb

@@ -0,0 +1,21 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <span class="ActionList-content">
+    <% if leading_visual %>
+        <span class="ActionList-item-visual ActionList-item-visual--leading">
+            <%= leading_visual %>
+        </span>
+    <% end %>
+    <% if description %>
+        <span class="ActionList-item-descriptionWrap <%= description_variant_class %>">
+            <span class="ActionList-item-label"><%= content %></span>
+            <span class="ActionList-item-description"><%= description %></span>
+        </span>
+    <% else %>
+        <span class="ActionList-item-label"><%= content %></span>
+    <% end %>
+   <% if trailing_visual %>
+        <span class="ActionList-item-visual ActionList-item-visual--trailing">
+            <%= trailing_visual %>
+        </span>
+    <% end %>
+<% end %>

data/app/components/primer/beta/auto_complete/item.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# TODO: use generic ActionList item for Autocomplete
 module Primer
   module Beta
     class AutoComplete
@@ -7,6 +8,32 @@ module Primer
       class Item < Primer::Component
         status :beta
 
+        ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
+
+        # The leading visual rendered before the link.
+        #
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::OcticonComponent) %>
+        renders_one :leading_visual, types: {
+          icon: Primer::OcticonComponent,
+          avatar: lambda { |**kwargs|
+            Primer::Beta::Avatar.new(**{ **kwargs, size: 16 })
+          }
+        }
+
+        # The trailing visual rendered after the link.
+        #
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::CounterComponent) %>
+        renders_one :trailing_visual, types: {
+          icon: Primer::OcticonComponent,
+          label: Primer::LabelComponent,
+          counter: Primer::CounterComponent
+        }
+
+        # Optional description
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :description
+
         # @example Default
         #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
         #     Selected
@@ -18,8 +45,12 @@ module Primer
         # @param value [String] Value of the item.
         # @param selected [Boolean] Whether the item is selected.
         # @param disabled [Boolean] Whether the item is disabled.
+        # @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
+        # @param description [String] Display description text below label
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(value:, selected: false, disabled: false, **system_arguments)
+        def initialize(value:, selected: false, disabled: false, description_variant: :block, **system_arguments)
+          @description_variant = ALLOWED_DESCRIPTION_VARIANTS.include?(description_variant) ? description_variant : :block
+
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :li
           @system_arguments[:role] = :option
@@ -29,14 +60,19 @@ module Primer
           @system_arguments[:"aria-disabled"] = true if disabled
 
           @system_arguments[:classes] = class_names(
-            "autocomplete-item",
-            system_arguments[:classes],
-            "disabled" => disabled
+            "ActionList-item",
+            system_arguments[:classes]
           )
         end
 
-        def call
-          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        # Description variant class.
+        def description_variant_class
+          case @description_variant
+          when :block
+            "ActionList-item-blockDescription"
+          when :inline
+            "ActionList-item-descriptionWrap--inline"
+          end
         end
       end
     end

data/app/components/primer/beta/auto_complete.rb

@@ -8,12 +8,20 @@ module Primer
     #   Always set an accessible label to help the user interact with the component.
     #
     #   * `label_text` is required and visible by default.
-    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   * If you must hide the label, set `visually_hide_label` to `true`.
     #   However, please note that a visible label should almost always
     #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
       status :beta
-      #
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "FormControl-small",
+        DEFAULT_SIZE => "FormControl-medium",
+        :large => "FormControl-large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
       # Customizable results list.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -22,13 +30,25 @@ module Primer
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "autocomplete-results",
+          "ActionList",
           system_arguments[:classes]
         )
 
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Leading visual.
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          system_arguments[:classes] = class_names("FormControl-input-leadingVisual")
+          Primer::OcticonComponent.new(**system_arguments)
+        }
+      }
+
       # Customizable input used to search for results.
       # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
       #
@@ -38,7 +58,7 @@ module Primer
         sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
         deny_aria_key(
           :label,
-          "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
+          "instead of `aria-label`, include `label_text` and set `visually_hide_label` to `true` on the component initializer.",
           **sanitized_args
         )
         deny_single_argument(
@@ -55,45 +75,66 @@ module Primer
         sanitized_args[:name] = @input_name
         sanitized_args[:tag] = :input
         sanitized_args[:autocomplete] = "off"
-
+        sanitized_args[:disabled] = true if @disabled
+        sanitized_args[:invalid] = true if @invalid
         sanitized_args[:type] = :text
         sanitized_args[:classes] = class_names(
-          "form-control",
-          sanitized_args[:classes]
+          "FormControl-input",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          sanitized_args[:classes],
+          "FormControl-inset": @inset,
+          "FormControl-monospace": @monospace
         )
+        sanitized_args[:placeholder] = @placeholder
 
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Default
+      # @example Leading visual
       #   @description
-      #     Labels are stacked by default.
+      #     Display any Octicon as a leading visual within the field
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <% end %>
       #
-      # @example With inline label
+      # @example Trailing action
       #   @description
-      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
+      #     Show a clear button
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) %>
       #
-      # @example With non-visible label
+      # @example Visually hidden label
       #   @description
-      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/auto_complete", visually_hide_label: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <% end %>
       #
-      # @example With icon
+      # @example Full width field
       #   @description
-      #     To display a search icon, set `with_icon` to `true`.
+      #     To allow field to span width of its container, set `full_width` to `true`.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", full_width: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <% end %>
       #
-      # @example With icon and non-visible label
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
+      # @example Inset variant
+      #   @description
+      #     Use the `inset` variant to change the input background color to be subtle.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", inset: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <% end %>
       #
-      # @example With clear button
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      # @example Monospace variant
+      #   @description
+      #     Use the `monospace` variant to change the input font family.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", monospace: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #     <% end %>
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
@@ -102,14 +143,7 @@ module Primer
       #
       # @example With custom classes for the results
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.results(classes: "custom-class") do %>
-      #       <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
-      #         Apple
-      #       <% end %>
-      #       <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |c| %>
-      #         Orange
-      #       <% end %>
-      #     <% end %>
+      #     <% c.results(classes: "custom-class") %>
       #   <% end %>
       #
       # @param label_text [String] The label of the input.
@@ -117,25 +151,43 @@ module Primer
       # @param input_id [String] Id of the input element.
       # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
       # @param list_id [String] Id of the list element.
-      # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
-      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
-      # @param is_clearable [Boolean] Adds optional clear button.
-      # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
+      # @param visually_hide_label [Boolean] Controls if the label is visible. If `true`, screen reader only text will be added.
+      # @param show_clear_button [Boolean] Adds optional clear button.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
+      # @param size [Hash] Input size can be small, medium (default), or large
+      # @param full_width [Boolean] Input can be full-width or fit to content
+      # @param disabled [Boolean] Disabled input
+      # @param invalid [Boolean] Invalid input
+      # @param placeholder [String] The placeholder text displayed within the input
+      # @param inset [Boolean] subtle input background color
+      # @param monospace [Boolean] monospace input font family
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
         @label_text = label_text
         @list_id = list_id
         @input_id = input_id
         @input_name = input_name || input_id
-        @is_label_visible = is_label_visible
-        @with_icon = with_icon
-        @is_clearable = is_clearable
-
-        @label_classes = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
+        @placeholder = placeholder
+        @visually_hide_label = visually_hide_label
+        @show_clear_button = show_clear_button
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "auto-complete"
         @system_arguments[:src] = src
         @system_arguments[:for] = list_id
+        @disabled = disabled
+        @invalid = invalid
+        @size = size
+        @inset = inset
+        @monospace = monospace
+        @full_width = full_width
+        @field_wrap_classes = class_names(
+          "FormControl-input-wrap",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          "FormControl-input-wrap--trailingAction": show_clear_button
+        )
+        @form_group_classes = class_names(
+          "FormControl",
+          "FormControl--fullWidth": full_width
+        )
       end
 
       # add `input` and `results` without needing to explicitly call them in the view
@@ -143,20 +195,6 @@ module Primer
         results(classes: "") unless results
         input(classes: "") unless input
       end
-
-      private
-
-      # Private: determines the label classes based on component configration.
-      #
-      # If the label is not visible, return an empty string.
-      #
-      # @param args [Hash] The component configuration.
-      # @return [String] The label classes.
-      def label_classes(**args)
-        return "" if args[:is_label_visible] == false
-
-        args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
-      end
     end
   end
 end

data/app/components/primer/conditional_wrapper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
+  # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
+  # the content is rendered.
+  #
+  # @example True conditional
+  #   <%# condition is true, so content will be wrapped in a <span> tag
+  #   <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
+  #     <%# also rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @example False conditional
+  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
+  #   <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
+  #     <%# this content will be rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
+  # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
+  class ConditionalWrapper < Primer::Component
+    def initialize(condition:, **base_component_arguments)
+      @condition = condition
+      @base_component_arguments = base_component_arguments
+    end
+
+    def call
+      return content unless @condition
+
+      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+    end
+  end
+end

data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -7,6 +7,8 @@ module ERBLint
       module DeprecatedComponentsHelpers
         # If there is no alternative to suggest, set the value to nil
         COMPONENT_TO_USE_INSTEAD = {
+          "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
+          "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::DropdownMenuComponent" => nil,
           "Primer::Tooltip" => "Primer::Alpha::Tooltip",

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 83
+      PATCH = 84
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/deprecated_arguments.rb

@@ -33,6 +33,16 @@ module RuboCop
         # }
         #
         DEPRECATED = {
+          is_label_inline: nil,
+          with_icon: nil,
+          is_label_visible: {
+            false => "visually_hide_label: true",
+            true => "visually_hide_label: false"
+          },
+          is_clearable: {
+            false => "show_clear_button: false",
+            true => "show_clear_button: true"
+          },
           bg: {
             white: "bg: :primary",
             gray_light: "bg: :secondary",

data/lib/tasks/docs.rake

@@ -359,7 +359,7 @@ namespace :docs do
   task :preview do
     registry = generate_yard_registry
 
-    FileUtils.rm_rf("demo/test/components/previews/primer/docs/")
+    FileUtils.rm_rf("test/previews/primer/docs/")
 
     components = Primer::Component.descendants
 
@@ -373,7 +373,7 @@ namespace :docs do
 
       yard_example_tags = initialize_method.tags(:example)
 
-      path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview.rb")
+      path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview.rb")
       path.dirname.mkdir unless path.dirname.exist?
 
       File.open(path, "w") do |f|
@@ -386,7 +386,7 @@ namespace :docs do
           method_name = name.split("|").first.downcase.parameterize.underscore
           f.puts("      def #{method_name}; end")
           f.puts unless index == yard_example_tags.size - 1
-          path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
+          path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
           path.dirname.mkdir unless path.dirname.exist?
           File.open(path, "w") do |view_file|
             view_file.puts(code.to_s)

data/static/arguments.yml

@@ -210,28 +210,47 @@
     type: String
     default: N/A
     description: Id of the list element.
-  - name: with_icon
+  - name: visually_hide_label
     type: Boolean
     default: "`false`"
-    description: Controls if a search icon is visible, defaults to `false`.
-  - name: is_label_visible
-    type: Boolean
-    default: "`true`"
-    description: Controls if the label is visible. If `false`, screen reader only
-      text will be added.
-  - name: is_clearable
+    description: Controls if the label is visible. If `true`, screen reader only text
+      will be added.
+  - name: show_clear_button
     type: Boolean
     default: "`false`"
     description: Adds optional clear button.
-  - name: is_label_inline
-    type: Boolean
-    default: "`false`"
-    description: Controls if the label is inline. On smaller screens, label will always
-      become stacked.
   - name: system_arguments
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+  - name: size
+    type: Hash
+    default: "`:medium`"
+    description: Input size can be small, medium (default), or large
+  - name: full_width
+    type: Boolean
+    default: "`false`"
+    description: Input can be full-width or fit to content
+  - name: disabled
+    type: Boolean
+    default: "`false`"
+    description: Disabled input
+  - name: invalid
+    type: Boolean
+    default: "`false`"
+    description: Invalid input
+  - name: placeholder
+    type: String
+    default: "`nil`"
+    description: The placeholder text displayed within the input
+  - name: inset
+    type: Boolean
+    default: "`false`"
+    description: subtle input background color
+  - name: monospace
+    type: Boolean
+    default: "`false`"
+    description: monospace input font family
 - component: AutoCompleteItem
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
   parameters:
@@ -247,6 +266,14 @@
     type: Boolean
     default: "`false`"
     description: Whether the item is disabled.
+  - name: description_variant
+    type: Hash
+    default: "`:block`"
+    description: Changes the description style. Allowed values are :inline, :block
+  - name: description
+    type: String
+    default: N/A
+    description: Display description text below label
   - name: system_arguments
     type: Hash
     default: N/A

data/static/audited_at.json

@@ -1,4 +1,6 @@
 {
+  "Primer::Alpha::AutoComplete": "",
+  "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::BorderBox::Header": "",
   "Primer::Alpha::ButtonMarketing": "",
   "Primer::Alpha::Layout": "",
@@ -29,6 +31,7 @@
   "Primer::ButtonGroup": "",
   "Primer::ClipboardCopy": "",
   "Primer::CloseButton": "",
+  "Primer::ConditionalWrapper": "",
   "Primer::Content": "",
   "Primer::CounterComponent": "",
   "Primer::DetailsComponent": "",

data/static/classes.yml

@@ -1,4 +1,8 @@
 ---
+- ".ActionList"
+- ".ActionList-content"
+- ".ActionList-item"
+- ".ActionList-item-label"
 - ".AvatarStack"
 - ".AvatarStack--right"
 - ".AvatarStack--three-plus"
@@ -19,6 +23,19 @@
 - ".Counter"
 - ".Counter--primary"
 - ".Counter--secondary"
+- ".FormControl"
+- ".FormControl--fullWidth"
+- ".FormControl-input"
+- ".FormControl-input-leadingVisual"
+- ".FormControl-input-leadingVisualWrap"
+- ".FormControl-input-trailingAction"
+- ".FormControl-input-wrap"
+- ".FormControl-input-wrap--leadingVisual"
+- ".FormControl-input-wrap--trailingAction"
+- ".FormControl-inset"
+- ".FormControl-label"
+- ".FormControl-medium"
+- ".FormControl-monospace"
 - ".Label"
 - ".Label--accent"
 - ".Label--attention"
@@ -49,6 +66,12 @@
 - ".Link--muted"
 - ".Link--primary"
 - ".Link--secondary"
+- ".Overlay"
+- ".Overlay--height-auto"
+- ".Overlay--width-auto"
+- ".Overlay-backdrop--anchor"
+- ".Overlay-body"
+- ".Overlay-body--paddingNone"
 - ".Popover"
 - ".Popover-message"
 - ".Popover-message--large"
@@ -82,12 +105,6 @@
 - ".UnderlineNav-item"
 - ".UnderlineNav-octicon"
 - ".anim-rotate"
-- ".autocomplete-body"
-- ".autocomplete-embedded-icon-wrap"
-- ".autocomplete-item"
-- ".autocomplete-label-inline"
-- ".autocomplete-label-stacked"
-- ".autocomplete-results"
 - ".avatar"
 - ".avatar-more"
 - ".avatar-small"
@@ -167,7 +184,6 @@
 - ".flex-justify-center"
 - ".flex-shrink-0"
 - ".float-right"
-- ".form-control"
 - ".gutter-condensed"
 - ".gutter-lg"
 - ".hidden-text-expander"

data/static/constants.json

@@ -1,4 +1,9 @@
 {
+  "Primer::Alpha::AutoComplete": {
+    "Item": "Primer::Alpha::AutoComplete::Item"
+  },
+  "Primer::Alpha::AutoComplete::Item": {
+  },
   "Primer::Alpha::BorderBox::Header": {
     "TITLE_TAG_FALLBACK": "h2",
     "TITLE_TAG_OPTIONS": [
@@ -199,9 +204,24 @@
     ]
   },
   "Primer::Beta::AutoComplete": {
-    "Item": "Primer::Beta::AutoComplete::Item"
+    "DEFAULT_SIZE": "medium",
+    "Item": "Primer::Beta::AutoComplete::Item",
+    "SIZE_MAPPINGS": {
+      "small": "FormControl-small",
+      "medium": "FormControl-medium",
+      "large": "FormControl-large"
+    },
+    "SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ]
   },
   "Primer::Beta::AutoComplete::Item": {
+    "ALLOWED_DESCRIPTION_VARIANTS": [
+      "inline",
+      "block"
+    ]
   },
   "Primer::Beta::Avatar": {
     "DEFAULT_SHAPE": "circle",
@@ -336,6 +356,8 @@
       "submit"
     ]
   },
+  "Primer::ConditionalWrapper": {
+  },
   "Primer::Content": {
   },
   "Primer::CounterComponent": {

data/static/statuses.json

@@ -1,4 +1,6 @@
 {
+  "Primer::Alpha::AutoComplete": "alpha",
+  "Primer::Alpha::AutoComplete::Item": "alpha",
   "Primer::Alpha::BorderBox::Header": "alpha",
   "Primer::Alpha::ButtonMarketing": "alpha",
   "Primer::Alpha::Layout": "alpha",
@@ -29,6 +31,7 @@
   "Primer::ButtonGroup": "beta",
   "Primer::ClipboardCopy": "beta",
   "Primer::CloseButton": "beta",
+  "Primer::ConditionalWrapper": "alpha",
   "Primer::Content": "stable",
   "Primer::CounterComponent": "beta",
   "Primer::DetailsComponent": "beta",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.83
+  version: 0.0.84
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-07-27 00:00:00.000000000 Z
+date: 2022-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -406,6 +406,9 @@ files:
 - README.md
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
+- app/components/primer/alpha/auto_complete.rb
+- app/components/primer/alpha/auto_complete/auto_complete.html.erb
+- app/components/primer/alpha/auto_complete/item.rb
 - app/components/primer/alpha/border_box/header.html.erb
 - app/components/primer/alpha/border_box/header.rb
 - app/components/primer/alpha/button_marketing.rb
@@ -430,6 +433,7 @@ files:
 - app/components/primer/beta/auto_complete/auto_complete.html.erb
 - app/components/primer/beta/auto_complete/auto_complete.js
 - app/components/primer/beta/auto_complete/auto_complete.ts
+- app/components/primer/beta/auto_complete/item.html.erb
 - app/components/primer/beta/auto_complete/item.rb
 - app/components/primer/beta/avatar.rb
 - app/components/primer/beta/avatar_stack.html.erb
@@ -459,6 +463,7 @@ files:
 - app/components/primer/clipboard_copy_component.ts
 - app/components/primer/close_button.rb
 - app/components/primer/component.rb
+- app/components/primer/conditional_wrapper.rb
 - app/components/primer/content.rb
 - app/components/primer/counter_component.rb
 - app/components/primer/details_component.html.erb