primer_view_components 0.9.0 → 0.10.0

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

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/utils.rb

@@ -15,6 +15,8 @@ module Primer
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
       def const_source_location(class_name)
+        return nil unless class_name
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 

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

@@ -0,0 +1,4 @@
+<%= content_tag(:div, **@input.validation_arguments) do %>
+  <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>

data/lib/primer/forms/validation_message.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ValidationMessage < BaseComponent
+      attr_reader :input
+
+      def initialize(input:)
+        @input = input
+      end
+    end
+  end
+end

data/lib/primer/forms.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    def self.inline_form(builder, base = nil, &block)
+      base ||= defined?(ApplicationForm) ? ApplicationForm : Primer::Forms::Base
+
+      klass = Class.new(base) do
+        form(&block)
+      end
+
+      klass.new(builder)
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -73,6 +73,10 @@ module Primer
         Primer::Alpha::NavList::Item => { js: true, examples: false },
         Primer::Alpha::NavList::Group => { js: true, examples: false },
 
+        Primer::Beta::NavList => { js: true },
+        Primer::Beta::NavList::Item => { js: true, examples: false },
+        Primer::Beta::NavList::Group => { js: true, examples: false },
+
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own
         Primer::Alpha::ActionList => { js: true, examples: false },

data/previews/primer/alpha/check_box_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-check-group",
         label: "I would go into battle with:",
         caption: "Qa'pla!",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -41,6 +44,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::CheckBoxGroup.new(validation_message: "Please choose at least one", name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard4")
+          component.check_box(label: "Hikaru Sulu", value: "sulu4")
+          component.check_box(label: "Kathryn Janeway", value: "janeway4")
+          component.check_box(label: "Benjamin Sisko", value: "sisko4")
+        end
+      end
+
       # @!group Options
       # @snapshot
       #

data/previews/primer/alpha/dialog_preview/with_header.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_header(show_divider: show_divider, variant: header_variant) %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -60,6 +60,23 @@ module Primer
         end
       end
 
+      # @label With Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param header_variant [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_header(title: "Test Dialog", subtitle: nil, header_variant: :medium, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               header_variant: header_variant,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
       # @label With Footer
       #
       # @param title [String] text

data/previews/primer/alpha/overlay_preview.rb

@@ -165,7 +165,7 @@ module Primer
       end
 
       # @label In an ActionMenu
-      def in_an_action_menu()
+      def in_an_action_menu
         render_with_template(locals: {})
       end
 

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-radio-group",
         label: "Question: what kind of bear is best?",
         caption: "There are basically two schools of thought",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -40,6 +43,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::Alpha::RadioButtonGroup.new(validation_message: "Please select an option", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears")
+          component.radio_button(label: "Beets", value: "beets")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg")
+        end
+      end
+
       # @!group Options
       #
       # @label With caption

data/previews/primer/alpha/radio_button_preview.rb

@@ -51,7 +51,7 @@ module Primer
       # @label Checked
       # @snapshot
       def checked
-        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true))
       end
 
       # @label Visually hidden label

data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb

@@ -0,0 +1,21 @@
+ 
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+    <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      <% menu.with_show_button(classes: "rounded-right-0 border-right-0") { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Filter" } %>
+      <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      <% menu.with_item(label: "Resolve") %>
+    <% end %>
+  <% end %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_leading_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-right-0 border-right-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_trailing_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-right-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+    <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-left-0 border-left-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+<% end %>

data/previews/primer/alpha/text_field_preview.rb

@@ -189,6 +189,27 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @label Input group with leading button
+      #
+      # @snapshot
+      def input_group_leading_button
+        render_with_template
+      end
+
+      # @label Input group with trailing button
+      #
+      # @snapshot
+      def input_group_trailing_button
+        render_with_template
+      end
+
+      # @label Input group with ActionMenu
+      #
+      # @snapshot
+      def input_group_leading_action_menu(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
     end
   end
 end

data/previews/primer/beta/button_preview.rb

@@ -166,7 +166,7 @@ module Primer
         disabled: false
       )
         render_with_template(locals: {
-                               disabled: disabled,
+                               disabled: disabled
                              })
       end
 

data/previews/primer/{alpha → beta}/nav_list_preview/trailing_action.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Alpha::NavList.new(aria: { label: "Workflow results" })) do |list| %>
+<%= render(Primer::Beta::NavList.new(aria: { label: "Workflow results" })) do |list| %>
   <% list.with_group do |group| %>
     <% group.with_heading(title: "Workflows") %>
     <% group.with_item(label: "Build and Test", href: "/workflows/1") do |item| %>

data/previews/primer/{alpha → beta}/nav_list_preview.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
+  module Beta
     # @label NavList
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(selected_item_id: :collaborators)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -34,7 +34,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
-        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :code_review_limits)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -77,7 +77,7 @@ module Primer
       # @label Top-level items
       #
       def top_level_items
-        render(Primer::Alpha::NavList.new) do |list|
+        render(Primer::Beta::NavList.new) do |list|
           list.with_heading(title: "Account settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -105,7 +105,7 @@ module Primer
       # @label Show more item
       # @snapshot
       def show_more_item
-        render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
+        render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
           list.with_group do |group|
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")

data/static/arguments.json

@@ -772,6 +772,18 @@
         "default": "N/A",
         "description": "A string describing the field and what sorts of input it expects. Displayed below the group."
       },
+      {
+        "name": "invalid",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
+      },
+      {
+        "name": "validation_message",
+        "type": "String",
+        "default": "N/A",
+        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
+      },
       {
         "name": "label_arguments",
         "type": "Hash",
@@ -884,6 +896,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/header/default/",
     "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "N/A",
+        "description": "The HTML element's ID value."
+      },
       {
         "name": "title",
         "type": "String",
@@ -908,6 +926,12 @@
         "default": "`false`",
         "description": "Visually hide the `title` while maintaining a label for assistive technologies."
       },
+      {
+        "name": "variant",
+        "type": "Symbol",
+        "default": "`:medium`",
+        "description": "One of `:large` or `:medium`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -1420,7 +1444,7 @@
   },
   {
     "component": "NavList",
-    "status": "alpha",
+    "status": "deprecated",
     "a11y_reviewed": true,
     "short_name": "NavList",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
@@ -1442,7 +1466,7 @@
   },
   {
     "component": "NavList::Divider",
-    "status": "alpha",
+    "status": "deprecated",
     "a11y_reviewed": false,
     "short_name": "NavListDivider",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/divider.rb",
@@ -1464,7 +1488,7 @@
   },
   {
     "component": "NavList::Group",
-    "status": "alpha",
+    "status": "deprecated",
     "a11y_reviewed": true,
     "short_name": "NavListGroup",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/group.rb",
@@ -1486,7 +1510,7 @@
   },
   {
     "component": "NavList::Heading",
-    "status": "alpha",
+    "status": "deprecated",
     "a11y_reviewed": false,
     "short_name": "NavListHeading",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/heading.rb",
@@ -1520,7 +1544,7 @@
   },
   {
     "component": "NavList::Item",
-    "status": "alpha",
+    "status": "deprecated",
     "a11y_reviewed": false,
     "short_name": "NavListItem",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
@@ -1966,6 +1990,18 @@
         "default": "N/A",
         "description": "A string describing the field and what sorts of input it expects. Displayed below the group."
       },
+      {
+        "name": "invalid",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
+      },
+      {
+        "name": "validation_message",
+        "type": "String",
+        "default": "N/A",
+        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
+      },
       {
         "name": "label_arguments",
         "type": "Hash",
@@ -3647,7 +3683,7 @@
       {
         "name": "underline",
         "type": "Boolean",
-        "default": "`true`",
+        "default": "`false`",
         "description": "Whether or not to underline the link."
       },
       {
@@ -3680,6 +3716,146 @@
       }
     ]
   },
+  {
+    "component": "NavList",
+    "status": "beta",
+    "a11y_reviewed": true,
+    "short_name": "NavList",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/default/",
+    "parameters": [
+      {
+        "name": "selected_item_id",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "NavList::Divider",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "NavListDivider",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/divider.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/divider/default/",
+    "parameters": [
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:subtle`",
+        "description": "Display a background color if scheme is `filled`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "NavList::Group",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "NavListGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/group/default/",
+    "parameters": [
+      {
+        "name": "selected_item_id",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The ID of the currently selected item. Used internally."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "NavList::Heading",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "NavListHeading",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/heading.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/heading/default/",
+    "parameters": [
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "The text content of the heading."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The value of the ID HTML attribute. Auto-generated by default."
+      },
+      {
+        "name": "heading_level",
+        "type": "Integer",
+        "default": "`2`",
+        "description": "The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "NavList::Item",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "NavListItem",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/item/default/",
+    "parameters": [
+      {
+        "name": "selected_item_id",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The ID of the currently selected list item. Used internally."
+      },
+      {
+        "name": "selected_by_ids",
+        "type": "Array<Symbol>",
+        "default": "`[]`",
+        "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
+      },
+      {
+        "name": "expanded",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
+      },
+      {
+        "name": "sub_item",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not this item is nested under a parent item. Used internally."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Octicon",
     "status": "beta",

data/static/audited_at.json

@@ -82,6 +82,11 @@
   "Primer::Beta::Label": "",
   "Primer::Beta::Link": "",
   "Primer::Beta::Markdown": "",
+  "Primer::Beta::NavList": "2023-07-10",
+  "Primer::Beta::NavList::Divider": "",
+  "Primer::Beta::NavList::Group": "2023-07-10",
+  "Primer::Beta::NavList::Heading": "",
+  "Primer::Beta::NavList::Item": "",
   "Primer::Beta::Octicon": "",
   "Primer::Beta::Popover": "",
   "Primer::Beta::ProgressBar": "",

data/static/classes.json

@@ -362,6 +362,9 @@
   "Link--secondary": [
     "Primer::Beta::Link"
   ],
+  "Link--underline": [
+    "Primer::Beta::Link"
+  ],
   "Overlay": [
     "Primer::Alpha::Dialog",
     "Primer::Alpha::Overlay"