primer_view_components 0.0.83 → 0.0.86

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/beta/base_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+    class BaseButton < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :button
+      TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+      # @example Block
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        type: DEFAULT_TYPE,
+        block: false,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "btn-block" => block
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end
+
+Primer::BaseButton = Primer::Beta::BaseButton

data/app/components/primer/{alpha → beta}/border_box/header.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
-    module BorderBox
+  module Beta
+    class BorderBox
       # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
       #
       # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
@@ -12,7 +12,7 @@ module Primer
 
         # Optional Title.
         #
-        # @param tag [Symbol] <%= one_of(Primer::Alpha::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+        # @param tag [Symbol] <%= one_of(Primer::Beta::BorderBox::Header::TITLE_TAG_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |tag:, **system_arguments|
           system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
@@ -24,14 +24,14 @@ module Primer
           Primer::BaseComponent.new(**system_arguments)
         }
 
-        # @example default use case
+        # @example Default
         #
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do %>
         #     Header
         #   <% end %>
         #
         # @example with title
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do |h| %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
         #     <% h.title(tag: :h3) do %>I am a title<% end %>
         #   <% end %>
         #

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

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `BorderBox` is a Box component with a border.
+    class BorderBox < Primer::Component
+      status :beta
+
+      DEFAULT_PADDING = :default
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => "",
+        :condensed => "Box--condensed",
+        :spacious => "Box--spacious"
+      }.freeze
+      PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
+
+      DEFAULT_ROW_SCHEME = :default
+      ROW_SCHEME_MAPPINGS = {
+        DEFAULT_ROW_SCHEME => "",
+        :neutral => "Box-row--gray",
+        :info => "Box-row--blue",
+        :warning => "Box-row--yellow"
+      }.freeze
+
+      # Optional Header.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @accessibility
+      # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      renders_one :header, "Primer::Beta::BorderBox::Header"
+
+      # Optional Body.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional Footer.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-footer",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Use Rows to add rows with borders and maintain the same padding.
+      #
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:classes] = class_names(
+          "Box-row",
+          ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Header with title, body, rows, and footer
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.header do |h| %>
+      #       <% h.title(tag: :h2) do %>
+      #         Header
+      #       <% end %>
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       <% if true %>
+      #         Row one
+      #       <% end %>
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Padding density
+      #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
+      #     <% component.header do %>
+      #       Header
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Row colors
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.row do %>
+      #       Default
+      #     <% end %>
+      #     <% component.row(scheme: :neutral) do %>
+      #       Neutral
+      #     <% end %>
+      #     <% component.row(scheme: :info) do %>
+      #       Info
+      #     <% end %>
+      #     <% component.row(scheme: :warning) do %>
+      #       Warning
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(padding: DEFAULT_PADDING, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Box",
+          PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
+          system_arguments[:classes]
+        )
+
+        @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+      end
+
+      def render?
+        rows.any? || header.present? || body.present? || footer.present?
+      end
+    end
+  end
+end