primer_view_components 0.0.76 → 0.0.79

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2635afac7c52d9fff327adc5ae000e6feccd1c5d315d3cce099f09c6863f8c08
-  data.tar.gz: aa0b235e2ac2d48bc37793adb799b0662357b516768774cd82db8ff7ca76bc8f
+  metadata.gz: efdaf09d509cff222b24533bd12292eaf2c7c40601a999e210a84e846384eb2b
+  data.tar.gz: '0894a654919ab70c1e6bd0e745bd11ce0da8353f8f31b53fc0b28d27fdb53d4f'
 SHA512:
-  metadata.gz: 7a9d2f32a73ac1790ae1903532581fa1349728efdd261061fa9a50fb9e5973618a69e9a149f0894861cb069780a0fed78aeab981e15d3811a32c54583e497962
-  data.tar.gz: 0d7ffafa34ea38a5b97fc3d05ec55ea4b6fc43067b986dce17c5774a9c89b120cb2bf9a1033522c855b9d7dd49e1db8be1496fdbe22ac082c2887b5fcedbb6af
+  metadata.gz: 6223be5579e8e71fc861bc77928a5f542a6ee4bb7b5afcffcec446b12c44eb6f6f58ff244186396e92b2528dc9415c62ef66d075cdd1a92ce7250a52eb7b5ff2
+  data.tar.gz: 16b1230824ddd70123231a593397e6939165d101e00d0038923c460d944086b6c132e0714dcc65a527b83cd07f78182fc8888a06ee3831e429002d2fb7b9a9b7

data/CHANGELOG.md

@@ -1,5 +1,25 @@
 # CHANGELOG
 
+## 0.0.79
+
+### Patch Changes
+
+- [#1188](https://github.com/primer/view_components/pull/1188) [`fb7218ac`](https://github.com/primer/view_components/commit/fb7218ac5c4de2253cb627c99bc9469635cde98b) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Revert leftover deprecated arguments from 1163.
+
+## 0.0.78
+
+### Patch Changes
+
+- [#1186](https://github.com/primer/view_components/pull/1186) [`ff2c3fe1`](https://github.com/primer/view_components/commit/ff2c3fe1913d7a1d65dbd4f608b68155ed247bef) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Revert #1163, as additional work will be needed to ship those changes to production successfully.
+
+## 0.0.77
+
+### Patch Changes
+
+- [#1185](https://github.com/primer/view_components/pull/1185) [`66a15b1a`](https://github.com/primer/view_components/commit/66a15b1a556e9814109317729b729dbee5316594) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Rename FlashComponent to Flash
+
+* [#1183](https://github.com/primer/view_components/pull/1183) [`84b9e4ef`](https://github.com/primer/view_components/commit/84b9e4ef60c9f0d1c2df830f247f2a55aac82783) Thanks [@camertron](https://github.com/camertron)! - Remove trailing newlines from the output of LinkComponent
+
 ## 0.0.76
 
 ### Patch Changes

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

@@ -1,26 +1,24 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <div class="<%= @form_group_classes %>">
-    <label for="<%= @input_id %>" class="FormControl-label <% if @visually_hide_label %>sr-only<% end %>">
+  <label for="<%= @input_id %>" class="<%= @label_classes %>">
+    <% if @is_label_visible %>
       <%= @label_text %>
-    </label>
-    <% if leading_visual || @show_clear_button %>
-        <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-fieldWrap--input-leadingVisual<% end %>">
-            <%= leading_visual %>
-            <%= 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 %>
-      <%= input %>
+      <span class="sr-only"><%= @label_text %></span>
     <% end %>
-  </div>
-  <div class="Overlay-backdrop--anchor">
-    <div class="Overlay Overlay--height-auto Overlay--width-auto">
-      <div class="Overlay-body Overlay-body--paddingNone">
-        <%= results %>
+  </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>
-  </div>
+    <% end %>
+    <%= results %>
+  </span>
   <div id="<%= @list_id %>-feedback" class="sr-only"></div>
 <% end %>

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

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-# TODO: use generic ActionList item for Autocomplete
 module Primer
   module Beta
     class AutoComplete
@@ -30,17 +29,14 @@ module Primer
           @system_arguments[:"aria-disabled"] = true if disabled
 
           @system_arguments[:classes] = class_names(
-            "ActionList-item",
-            system_arguments[:classes]
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
           )
         end
 
         def call
-          render(Primer::BaseComponent.new(**@system_arguments)) do
-            render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-content")) do
-              render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-item-label")) { content }
-            end
-          end
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
         end
       end
     end

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

@@ -8,20 +8,11 @@ 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 hide the label, set `visually_hide_label` to `true`.
+    #   * 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 :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.
       #
@@ -31,26 +22,13 @@ module Primer
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "ActionList",
+          "autocomplete-results",
           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.
       #
@@ -60,7 +38,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 `visually_hide_label` to `true` on the component initializer.",
+          "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
           **sanitized_args
         )
         deny_single_argument(
@@ -77,82 +55,45 @@ 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(
-          "FormControl",
-          "FormControl--input",
-          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          "form-control",
           sanitized_args[:classes]
         )
-        sanitized_args[:placeholder] = @placeholder
 
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Leading visual
+      # @example Default
       #   @description
-      #     Display any Octicon as a leading visual within the field
+      #     Labels are stacked by default.
       #   @code
-      #     <%= 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) %>
-      #       <% c.results 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 %>
-      #     <% end %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
       #
-      # @example Trailing action
+      # @example With inline label
       #   @description
-      #     Show a clear button
+      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
       #   @code
-      #     <%= 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 )) do |c| %>
-      #       <% c.results 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 %>
-      #     <% end %>
+      #     <%= 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")) %>
       #
-      # @example Visually hidden label
+      # @example With non-visible label
       #   @description
-      #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= 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) %>
-      #       <% c.results 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 %>
-      #     <% end %>
+      #     <%= 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)) %>
       #
-      # @example Full width field
+      # @example With icon
       #   @description
-      #     To allow field to span width of its container, set `full_width` to `true`.
+      #     To display a search icon, set `with_icon` to `true`.
       #   @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", full_width: true)) do |c| %>
-      #       <% c.leading_visual_icon(icon: :search) %>
-      #       <% c.results 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 %>
-      #     <% end %>
+      #     <%= render(Primer::Beta::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::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 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 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| %>
@@ -176,42 +117,25 @@ 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 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 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 %>
-      # @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
-      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, **system_arguments)
+      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
-        @placeholder = placeholder
-        @visually_hide_label = visually_hide_label
-        @show_clear_button = show_clear_button
+        @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
-        @disabled = disabled
-        @invalid = invalid
-        @size = size
-        @full_width = full_width
-        @field_wrap_classes = class_names(
-          "FormControl-fieldWrap",
-          "FormControl-fieldWrap--input",
-          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
-          "FormControl-fieldWrap--disabled": disabled,
-          "FormControl-fieldWrap--invalid": invalid,
-          "FormControl-fieldWrap--input-trailingAction": show_clear_button
-        )
-        @form_group_classes = class_names(
-          "FormGroup",
-          "FormGroup--fullWidth": full_width
-        )
       end
 
       # add `input` and `results` without needing to explicitly call them in the view
@@ -219,6 +143,20 @@ 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/beta/flash.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Flash` to inform users of successful or pending actions.
+    class Flash < Primer::Component
+      status :beta
+
+      # Optional action content showed on the right side of the component.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :action, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+      # @example Schemes
+      #   <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
+      #
+      # @example Full width
+      #   <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
+      #
+      # @example Icon
+      #   <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
+      #
+      # @example With actions
+      #   <%= render(Primer::Beta::Flash.new) do |component| %>
+      #     This is a flash message with actions!
+      #     <% component.action do %>
+      #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param full [Boolean] Whether the component should take up the full width of the screen.
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
+      # @param icon [Symbol] Name of Octicon icon to use.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Flash::SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+        @icon = icon
+        @dismissible = dismissible
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "flash",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
+          "flash-full": full
+        )
+        @system_arguments[:mb] ||= spacious ? 4 : nil
+      end
+    end
+  end
+end

data/app/components/primer/link_component.rb

@@ -82,5 +82,11 @@ module Primer
     def before_render
       raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
     end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) do
+        content.to_s + tooltip.to_s
+      end
+    end
   end
 end

data/app/components/primer/tab_container_component.d.ts

@@ -1 +1 @@
-import '@github/tab-container-element';
+gimport '@github/tab-container-element';

data/lib/primer/view_components/linters/argument_mappers/flash.rb

@@ -8,7 +8,7 @@ module ERBLint
       # Maps classes in a flash element to arguments for the Flash component.
       class Flash < Base
         SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
-          component: "Primer::FlashComponent",
+          component: "Primer::Beta::Flash",
           constant: "SCHEME_MAPPINGS",
           symbolize: true
         ).freeze

data/lib/primer/view_components/linters/{flash_component_migration_counter.rb → flash_migration_counter.rb}

@@ -7,14 +7,14 @@ require_relative "argument_mappers/flash"
 module ERBLint
   module Linters
     # Counts the number of times a HTML flash is used instead of the component.
-    class FlashComponentMigrationCounter < BaseLinter
+    class FlashMigrationCounter < BaseLinter
       include Autocorrectable
 
       TAGS = %w[div].freeze
       CLASSES = %w[flash].freeze
-      MESSAGE = "We are migrating flashes to use [Primer::FlashComponent](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Flash
-      COMPONENT = "Primer::FlashComponent"
+      COMPONENT = "Primer::Beta::Flash"
 
       def map_arguments(tag, tag_tree)
         # We can only autocorrect elements with simple text as content.

data/lib/primer/view_components/version.rb

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

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

@@ -33,22 +33,6 @@ module RuboCop
         # }
         #
         DEPRECATED = {
-          is_label_inline: {
-            true => nil,
-            false => nil
-          },
-          with_icon: {
-            true => nil,
-            false => 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

@@ -55,7 +55,7 @@ namespace :docs do
       Primer::DetailsComponent,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
-      Primer::FlashComponent,
+      Primer::Beta::Flash,
       Primer::FlexComponent,
       Primer::FlexItemComponent,
       Primer::HeadingComponent,

data/static/arguments.yml

@@ -210,39 +210,28 @@
     type: String
     default: N/A
     description: Id of the list element.
-  - name: visually_hide_label
+  - name: with_icon
     type: Boolean
     default: "`false`"
-    description: Controls if the label is visible. If `true`, screen reader only text
-      will be added.
-  - name: show_clear_button
+    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
     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
 - component: AutoCompleteItem
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
   parameters:
@@ -341,6 +330,33 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Flash
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb
+  parameters:
+  - name: full
+    type: Boolean
+    default: "`false`"
+    description: Whether the component should take up the full width of the screen.
+  - name: spacious
+    type: Boolean
+    default: "`false`"
+    description: Whether to add margin to the bottom of the component.
+  - name: dismissible
+    type: Boolean
+    default: "`false`"
+    description: Whether the component can be dismissed with an X button.
+  - name: icon
+    type: Symbol
+    default: "`nil`"
+    description: Name of Octicon icon to use.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:success`, or `:warning`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Text
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
   parameters:
@@ -546,33 +562,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Flash
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/flash_component.rb
-  parameters:
-  - name: full
-    type: Boolean
-    default: "`false`"
-    description: Whether the component should take up the full width of the screen.
-  - name: spacious
-    type: Boolean
-    default: "`false`"
-    description: Whether to add margin to the bottom of the component.
-  - name: dismissible
-    type: Boolean
-    default: "`false`"
-    description: Whether the component can be dismissed with an X button.
-  - name: icon
-    type: Symbol
-    default: "`nil`"
-    description: Name of Octicon icon to use.
-  - name: scheme
-    type: Symbol
-    default: "`:default`"
-    description: One of `:danger`, `:default`, `:success`, or `:warning`.
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: Flex
   source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
   parameters:

data/static/audited_at.json

@@ -18,6 +18,7 @@
   "Primer::Beta::Blankslate": "",
   "Primer::Beta::Breadcrumbs": "",
   "Primer::Beta::Breadcrumbs::Item": "",
+  "Primer::Beta::Flash": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",
@@ -35,7 +36,6 @@
   "Primer::Dropdown::Menu": "",
   "Primer::Dropdown::Menu::Item": "",
   "Primer::DropdownMenuComponent": "",
-  "Primer::FlashComponent": "",
   "Primer::FlexComponent": "",
   "Primer::FlexItemComponent": "",
   "Primer::HeadingComponent": "",

data/static/classes.yml

@@ -1,8 +1,4 @@
 ---
-- ".ActionList"
-- ".ActionList-content"
-- ".ActionList-item"
-- ".ActionList-item-label"
 - ".AvatarStack"
 - ".AvatarStack--right"
 - ".AvatarStack--three-plus"
@@ -23,18 +19,6 @@
 - ".Counter"
 - ".Counter--primary"
 - ".Counter--secondary"
-- ".FormControl"
-- ".FormControl--input"
-- ".FormControl--input-leadingVisual"
-- ".FormControl--input-trailingAction"
-- ".FormControl--medium"
-- ".FormControl-fieldWrap"
-- ".FormControl-fieldWrap--input"
-- ".FormControl-fieldWrap--input-leadingVisual"
-- ".FormControl-fieldWrap--input-trailingAction"
-- ".FormControl-label"
-- ".FormGroup"
-- ".FormGroup--fullWidth"
 - ".Label"
 - ".Label--accent"
 - ".Label--attention"
@@ -65,12 +49,6 @@
 - ".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"
@@ -104,6 +82,12 @@
 - ".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"
@@ -183,6 +167,7 @@
 - ".flex-justify-center"
 - ".flex-shrink-0"
 - ".float-right"
+- ".form-control"
 - ".gutter-condensed"
 - ".gutter-lg"
 - ".hidden-text-expander"

data/static/constants.json

@@ -199,18 +199,7 @@
     ]
   },
   "Primer::Beta::AutoComplete": {
-    "DEFAULT_SIZE": "medium",
-    "Item": "Primer::Beta::AutoComplete::Item",
-    "SIZE_MAPPINGS": {
-      "small": "FormControl--small",
-      "medium": "FormControl--medium",
-      "large": "FormControl--large"
-    },
-    "SIZE_OPTIONS": [
-      "small",
-      "medium",
-      "large"
-    ]
+    "Item": "Primer::Beta::AutoComplete::Item"
   },
   "Primer::Beta::AutoComplete::Item": {
   },
@@ -270,6 +259,15 @@
   },
   "Primer::Beta::Breadcrumbs::Item": {
   },
+  "Primer::Beta::Flash": {
+    "DEFAULT_SCHEME": "default",
+    "SCHEME_MAPPINGS": {
+      "default": "",
+      "warning": "flash-warn",
+      "danger": "flash-error",
+      "success": "flash-success"
+    }
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
@@ -427,15 +425,6 @@
       "dark": "dropdown-menu-dark"
     }
   },
-  "Primer::FlashComponent": {
-    "DEFAULT_SCHEME": "default",
-    "SCHEME_MAPPINGS": {
-      "default": "",
-      "warning": "flash-warn",
-      "danger": "flash-error",
-      "success": "flash-success"
-    }
-  },
   "Primer::FlexComponent": {
     "ALIGN_ITEMS_DEFAULT": null,
     "ALIGN_ITEMS_MAPPINGS": {

data/static/statuses.json

@@ -18,6 +18,7 @@
   "Primer::Beta::Blankslate": "beta",
   "Primer::Beta::Breadcrumbs": "beta",
   "Primer::Beta::Breadcrumbs::Item": "alpha",
+  "Primer::Beta::Flash": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
@@ -35,7 +36,6 @@
   "Primer::Dropdown::Menu": "alpha",
   "Primer::Dropdown::Menu::Item": "alpha",
   "Primer::DropdownMenuComponent": "deprecated",
-  "Primer::FlashComponent": "beta",
   "Primer::FlexComponent": "deprecated",
   "Primer::FlexItemComponent": "deprecated",
   "Primer::HeadingComponent": "beta",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.76
+  version: 0.0.79
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-06-01 00:00:00.000000000 Z
+date: 2022-06-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -410,6 +410,8 @@ files:
 - app/components/primer/beta/blankslate.rb
 - app/components/primer/beta/breadcrumbs.html.erb
 - app/components/primer/beta/breadcrumbs.rb
+- app/components/primer/beta/flash.html.erb
+- app/components/primer/beta/flash.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/beta/truncate.html.erb
 - app/components/primer/beta/truncate.rb
@@ -445,8 +447,6 @@ files:
 - app/components/primer/dropdown/menu.ts
 - app/components/primer/dropdown_menu_component.html.erb
 - app/components/primer/dropdown_menu_component.rb
-- app/components/primer/flash_component.html.erb
-- app/components/primer/flash_component.rb
 - app/components/primer/flex_component.rb
 - app/components/primer/flex_item_component.rb
 - app/components/primer/heading_component.rb
@@ -462,7 +462,6 @@ files:
 - app/components/primer/label_component.rb
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
-- app/components/primer/link_component.erb
 - app/components/primer/link_component.rb
 - app/components/primer/local_time.d.ts
 - app/components/primer/local_time.js
@@ -537,7 +536,7 @@ files:
 - lib/primer/view_components/linters/button_component_migration_counter.rb
 - lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
 - lib/primer/view_components/linters/close_button_component_migration_counter.rb
-- lib/primer/view_components/linters/flash_component_migration_counter.rb
+- lib/primer/view_components/linters/flash_migration_counter.rb
 - lib/primer/view_components/linters/helpers/rubocop_helpers.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb
 - lib/primer/view_components/linters/subhead_component_migration_counter.rb
@@ -595,7 +594,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.22
+rubygems_version: 3.2.32
 signing_key:
 specification_version: 4
 summary: ViewComponents for the Primer Design System

data/app/components/primer/flash_component.rb

@@ -1,69 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `Flash` to inform users of successful or pending actions.
-  class FlashComponent < Primer::Component
-    status :beta
-
-    # Optional action content showed on the right side of the component.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :action, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    DEFAULT_SCHEME = :default
-    SCHEME_MAPPINGS = {
-      DEFAULT_SCHEME => "",
-      :warning => "flash-warn",
-      :danger => "flash-error",
-      :success => "flash-success"
-    }.freeze
-    # @example Schemes
-    #   <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
-    #   <%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
-    #
-    # @example Full width
-    #   <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
-    #
-    # @example Dismissible
-    #   <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
-    #
-    # @example Icon
-    #   <%= render(Primer::FlashComponent.new(icon: :people)) { "This is a flash message with an icon!" } %>
-    #
-    # @example With actions
-    #   <%= render(Primer::FlashComponent.new) do |component| %>
-    #     This is a flash message with actions!
-    #     <% component.action do %>
-    #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param full [Boolean] Whether the component should take up the full width of the screen.
-    # @param spacious [Boolean] Whether to add margin to the bottom of the component.
-    # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
-    # @param icon [Symbol] Name of Octicon icon to use.
-    # @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
-      @icon = icon
-      @dismissible = dismissible
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "flash",
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
-        "flash-full": full
-      )
-      @system_arguments[:mb] ||= spacious ? 4 : nil
-    end
-  end
-end

data/app/components/primer/link_component.erb

@@ -1 +0,0 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do -%><%= content -%><%= tooltip -%><% end %>