primer_view_components 0.36.4 → 0.37.0

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -165,6 +165,12 @@ module Primer
     class LookbookPagesBackend < Backend
       attr_reader :registry, :manifest
 
+      IGNORED_COMPONENTS = [
+        Primer::Alpha::FormControl
+      ]
+
+      IGNORED_COMPONENTS.freeze
+
       def initialize(registry, manifest)
         @registry = registry
         @manifest = manifest
@@ -172,6 +178,8 @@ module Primer
 
       def generate
         each_component do |component_ref|
+          next if IGNORED_COMPONENTS.include?(component_ref.klass)
+
           page_for(component_ref).generate
         end
         generate_system_args_docs

data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb

@@ -3,7 +3,7 @@
     <% menu.with_show_button { "Strategy" } %>
     <% 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: "Ours", data: { value: "ours" }, active: true) %>
     <% menu.with_item(label: "Resolve") %>
   <% end %>
   <hr>

data/previews/primer/alpha/form_control_preview/playground.html.erb

@@ -1,9 +1,17 @@
-<%= render(Primer::Alpha::FormControl.new(**system_arguments)) do |component| %>
-  <% component.with_input do |input_arguments| %>
-    <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
-      <% seg.with_item(label: "Han Solo", selected: true) %>
-      <% seg.with_item(label: "Luke Skywalker") %>
-      <% seg.with_item(label: "Leia Organa") %>
+<div>
+  <strong>NOTE: </strong>The <pre style="display: inline">FormControl </pre>component cannot automatically connect
+  the label to the provided input. Please take care to pass the <pre style="display: inline">for:</pre> attribute
+  to <pre style="display: inline">FormControl</pre>, eg:
+  <pre style="display: inline">Primer::Alpha::FormControl.new(label_arguments: { for: "field-name-or-id" })</pre>.
+  - Your friendly neighborhood accessibility team.
+</div>
+
+<br>
+
+<%= form_with(url: "/foo") do |f| %>
+  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: "bar" })) do |component| %>
+    <% component.with_input do |input_arguments| %>
+      <%= f.text_field(:bar, **input_arguments) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/alpha/overlay_preview.rb

@@ -164,37 +164,6 @@ module Primer
                              })
       end
 
-      # @label In an ActionMenu
-      def in_an_action_menu
-        render_with_template(locals: {})
-      end
-
-      # @label Dialog with header and footer
-      #
-      def dialog_with_header_footer
-        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
-          d.with_header(title: "Large Dialog Header", divider: true)
-          d.with_show_button { "Show Overlay" }
-          d.with_footer { "Large Dialog Footer" }
-          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
-        end
-      end
-
-      def overlay_with_header_filter
-        render_with_template(locals: {})
-      end
-
-      def overlay_with_header_subtitle
-        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
-          d.with_header(title: "Large Dialog Header", divider: true) do |h|
-            h.with_subtitle {"A subtitle"}
-          end
-          d.with_show_button { "Show Overlay" }
-          d.with_footer { "Large Dialog Footer" }
-          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
-        end
-      end
-
       def in_a_sticky_container
         render_with_template(locals: {})
       end

data/previews/primer/alpha/select_preview.rb

@@ -70,7 +70,7 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list-1", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -81,7 +81,7 @@ module Primer
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list-2", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -92,7 +92,7 @@ module Primer
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list-3", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -103,7 +103,7 @@ module Primer
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list-4", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -114,7 +114,7 @@ module Primer
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list-5", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")
@@ -125,7 +125,7 @@ module Primer
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
+        render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list-6", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
           component.option(label: "Shaw Island", value: "shaw")
           component.option(label: "Orcas Island", value: "orcas")

data/previews/primer/alpha/text_field_preview.rb

@@ -115,122 +115,122 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field-1", label: "My text field"))
       end
 
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field-2", label: "My text field"))
       end
 
       # @label Show clear button
       # @snapshot
       def show_clear_button
-        render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
       end
 
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field-4", label: "My text field"))
       end
 
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field-5", label: "My text field"))
       end
 
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field-6", label: "My text field"))
       end
 
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field-7", label: "My text field"))
       end
 
       # @label With placeholder
       # @snapshot
       def with_placeholder
-        render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field-8", label: "My text field"))
       end
 
       # @label Inset
       # @snapshot
       def inset
-        render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field-9", label: "My text field"))
       end
 
       # @label Monospace
       # @snapshot
       def monospace
-        render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field-10", label: "My text field"))
       end
 
       # @label With trailing icon
       # @snapshot
       def with_trailing_icon
-        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field-11", label: "My text field"))
       end
 
       # @label With trailing text
       # @snapshot
       def with_trailing_text
-        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field-12", label: "My text field"))
       end
 
       # @label With trailing long text
       # @snapshot
       def with_trailing_long_text
-        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field-13", label: "My text field"))
       end
 
       # @label With trailing counter
       # @snapshot
       def with_trailing_counter
-        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field-14", label: "My text field"))
       end
 
       # @label With trailing label
-      # @snapshot
+      # @snapshot 
       def with_trailing_label
-        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
       end
 
       # @label With leading visual
       # @snapshot
       def with_leading_visual
-        render(Primer::Alpha::TextField.new(leading_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(leading_visual: { icon: :search, "aria-label": "Search" }, name: "my-text-field-16", label: "My text field"))
       end
 
       # @label With validation message
       # @snapshot
       def with_validation_message
-        render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field-17", label: "My text field"))
       end
       #
       # @!endgroup
 
-      # @!group Auto check
+      # @!group Auto check 
       #
       # @label Auto check request ok
       def with_auto_check_ok
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field-18", label: "My text field"))
       end
 
       # @label Auto check request accepted
       def with_auto_check_accepted
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field-19", label: "My text field"))
       end
 
       # @label Auto check request error
       def with_auto_check_error
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field-20", label: "My text field"))
       end
       #
       # @!endgroup

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -62,6 +62,10 @@ module Primer
       def with_turbo
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
       end
+
+      def with_autofocus
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, autofocus: true))
+      end
     end
   end
 end

data/previews/primer/alpha/tooltip_preview.rb

@@ -65,7 +65,7 @@ module Primer
 
       # @label Tooltip with Primer::Beta::Link
       def tooltip_with_link(direction: :s, tooltip_text: "You can press a button")
-        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
+        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip", underline: true)) do |component|
           component.with_tooltip(text: tooltip_text, direction: direction)
           "Button"
         end

data/previews/primer/beta/details_preview.rb

@@ -58,6 +58,18 @@ module Primer
           component.with_body { "Body" }
         end
       end
+
+      # @label Open
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      # @param disabled [Boolean] toggle
+      def open(reset: false, overlay: :default, disabled: false)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay, disabled: disabled, open: true) do |component|
+          component.with_summary { "Click me" }
+          component.with_body { "Body" }
+        end
+      end
     end
   end
 end

data/previews/primer/beta/markdown_preview.rb

@@ -95,17 +95,17 @@ module Primer
       <p>And an unordered task list:</p>
 
       <ul>
-        <li><input type=\"checkbox\" checked> Create a sample markdown document</li>
-        <li><input type=\"checkbox\"> Add task lists to it</li>
-        <li><input type=\"checkbox\"> Take a vacation</li>
+        <li><input id="checkbox-1" type=\"checkbox\" checked><label for="checkbox-1">Create a sample markdown document</label></li>
+        <li><input id="checkbox-2" type=\"checkbox\"><label for="checkbox-2">Add task lists to it</label></li>
+        <li><input id="checkbox-3" type=\"checkbox\"><label for="checkbox-3">Take a vacation</label></li>
       </ul>
 
       <p>And a \"mixed\" task list:</p>
 
       <ul>
-        <li><input type=\"checkbox\"> Steal underpants</li>
+        <li><input id="checkbox-4" type=\"checkbox\"><label for="checkbox-4">Steal underpants</label></li>
         <li>?</li>
-        <li><input type=\"checkbox\"> Profit!</li>
+        <li><input id="checkbox-5" type=\"checkbox\"> <label for="checkbox-5">Profit!</label></li></li>
       </ul>
 
       And a nested list:
@@ -181,7 +181,7 @@ module Primer
 
       <p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
 
-      <table>
+      <table tabindex="0">
         <thead>
           <tr>
             <th>Artist</th>
@@ -237,13 +237,13 @@ module Primer
 
       <pre><code>var foo = \"bar\";</code></pre>
 
-      <pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
+      <pre tabindex="0"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. They should also have a tabindex=0 to ensure keyboard accessibility. This line should be long enough to demonstrate this.</code></pre>
 
-      <pre><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
+      <pre tabindex="0"><code>var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";</code></pre>
 
       <p>Inline code inside table cells should still be distinguishable.</p>
 
-      <table>
+      <table tabindex="0">
         <thead>
           <tr>
             <th>Language</th>

data/previews/primer/beta/relative_time_preview.rb

@@ -41,7 +41,8 @@ module Primer
         format_style: nil,
         datetime: Time.utc(2020, 1, 1, 0, 0, 0),
         lang: nil,
-        title: nil
+        title: nil,
+        no_title: true
       )
         render(Primer::Beta::RelativeTime.new(
                  tense: tense,
@@ -60,7 +61,8 @@ module Primer
                  format_style: format_style,
                  datetime: datetime,
                  lang: lang,
-                 title: title
+                 title: title,
+                 no_title: no_title
                ))
       end
 
@@ -98,7 +100,8 @@ module Primer
         format_style: nil,
         datetime: Time.now.utc,
         lang: nil,
-        title: nil
+        title: nil,
+        no_title: true
       )
         render(Primer::Beta::RelativeTime.new(
                  tense: tense,
@@ -117,7 +120,8 @@ module Primer
                  format_style: format_style,
                  datetime: datetime,
                  lang: lang,
-                 title: title
+                 title: title,
+                 no_title: no_title
                ))
       end
 
@@ -153,7 +157,8 @@ module Primer
         format_style: nil,
         datetime: Time.now.iso8601,
         lang: nil,
-        title: nil
+        title: nil,
+        no_title: true
       )
         render(Primer::Beta::RelativeTime.new(
                  tense: tense,
@@ -172,7 +177,8 @@ module Primer
                  format_style: format_style,
                  datetime: datetime,
                  lang: lang,
-                 title: title
+                 title: title,
+                 no_title: no_title
                ))
       end
 
@@ -210,7 +216,8 @@ module Primer
         format_style: nil,
         datetime: Time.now.iso8601,
         lang: nil,
-        title: nil
+        title: nil,
+        no_title: true
       )
         render(Primer::Beta::RelativeTime.new(
                  tense: tense,
@@ -229,7 +236,8 @@ module Primer
                  format_style: format_style,
                  datetime: datetime,
                  lang: lang,
-                 title: title
+                 title: title,
+                 no_title: no_title
                ))
       end
 
@@ -261,7 +269,8 @@ module Primer
         format_style: nil,
         datetime: Time.utc(2038, 1, 19, 0o3, 14, 8),
         lang: nil,
-        title: nil
+        title: nil,
+        no_title: true
       )
         render(Primer::Beta::RelativeTime.new(
                  tense: tense,
@@ -278,7 +287,8 @@ module Primer
                  format_style: format_style,
                  datetime: datetime,
                  lang: lang,
-                 title: title
+                 title: title,
+                 no_title: no_title
                ))
       end
 

data/static/arguments.json

@@ -1253,6 +1253,12 @@
         "default": "`false`",
         "description": "When set to `true`, the form control will take up all the horizontal space allowed by its container."
       },
+      {
+        "name": "label_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "HTML attributes to attach to the `<label>` element that labels the input."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -3074,6 +3080,12 @@
         "default": "`false`",
         "description": "Whether or not to request a turbo stream and render the response as such."
       },
+      {
+        "name": "autofocus",
+        "type": "Boolean",
+        "default": "`nil`",
+        "description": "Whether switch should be autofocused when rendered."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -3646,6 +3658,12 @@
         "default": "`:button`",
         "description": "One of `:button`, `:reset`, or `:submit`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "disabled",
         "type": "Boolean",

data/static/constants.json

@@ -333,6 +333,8 @@
     ]
   },
   "Primer::Alpha::Dropdown": {
+    "ARIA_LABEL_CLOSED_DEFAULT": "Open",
+    "ARIA_LABEL_OPEN_DEFAULT": "Close",
     "GeneratedSlotMethods": "Primer::Alpha::Dropdown::GeneratedSlotMethods",
     "Menu": "Primer::Alpha::Dropdown::Menu"
   },
@@ -1037,6 +1039,8 @@
     ]
   },
   "Primer::Beta::Details": {
+    "ARIA_LABEL_CLOSED_DEFAULT": "Expand",
+    "ARIA_LABEL_OPEN_DEFAULT": "Collapse",
     "BODY_TAG_DEFAULT": "div",
     "BODY_TAG_OPTIONS": [
       "ul",