primer_view_components 0.12.0 → 0.13.1

data/lib/primer/static/generate_info_arch.rb

@@ -3,6 +3,7 @@
 # :nocov:
 
 require "json"
+require "kramdown"
 
 module Primer
   module Static
@@ -35,7 +36,7 @@ module Primer
                 # rubocop:disable Style/IfUnlessModifier
                 "description" =>
                   if slot_method.base_docstring.to_s.present?
-                    view_context.render(inline: slot_method.base_docstring)
+                    render_erb_ignoring_markdown_code_fences(slot_method.base_docstring)
                   end,
                 # rubocop:enable Style/IfUnlessModifier
                 "parameters" => serialize_params(param_tags, component)
@@ -57,7 +58,7 @@ module Primer
 
               {
                 "name" => mtd.name,
-                "description" => view_context.render(inline: mtd.base_docstring),
+                "description" => render_erb_ignoring_markdown_code_fences(mtd.base_docstring),
                 "parameters" => serialize_params(param_tags, component)
               }
             end
@@ -66,7 +67,7 @@ module Primer
               if component == Primer::BaseComponent
                 docs.base_docstring
               else
-                view_context.render(inline: docs.base_docstring)
+                render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
             memo[component] = {
@@ -119,7 +120,7 @@ module Primer
             component: "BaseComponent",
             fully_qualified_name: "Primer::BaseComponent",
             description_md: docs.base_docstring,
-            args_md: view_context.render(inline: docs.constructor.base_docstring)
+            args_md: render_erb_ignoring_markdown_code_fences(docs.constructor.base_docstring)
           }
         end
 
@@ -131,7 +132,7 @@ module Primer
               "name" => tag.name,
               "type" => tag.types&.join(", ") || "",
               "default" => default_value,
-              "description" => view_context.render(inline: tag.text.squish)
+              "description" => render_erb_ignoring_markdown_code_fences(tag.text.squish)
             }
           end
         end
@@ -151,6 +152,86 @@ module Primer
           end
         end
 
+        # Renders ERB code to a string, ignoring markdown code fences. For example, consider the
+        # following ERB code inside a markdown document:
+        #
+        # ### Heading
+        # ```erb
+        # <%= render(SomeComponent.new) %>
+        # ```
+        #
+        # <%= some_func(a, b) %>
+        #
+        # The ERB renderer does not understand that the fenced code, i.e. the part inside the triple
+        # backticks, should not be rendered. It sees the ERB tags both inside and outside the fence
+        # and renders them both.
+        #
+        # This method renders ERB tags in a markdown string, ignoring any fenced code blocks, so as
+        # to prevent rendering fenced ERB code.
+        #
+        def render_erb_ignoring_markdown_code_fences(markdown_str)
+          return view_context.render(inline: markdown_str) unless markdown_str.include?("```")
+
+          # identify all fenced code blocks in markdown string
+          code_ranges = find_fenced_code_ranges_in(markdown_str)
+
+          # replace code fences with placeholders
+          de_fenced_markdown_str = markdown_str.dup.tap do |memo|
+            code_ranges.reverse_each.with_index do |code_range, idx|
+              memo[code_range] = "<!--codefence#{idx}-->"
+            end
+          end
+
+          # Render ERB tags. The only ones left will explicitly exist _outside_ markdown code fences.
+          rendered_str = view_context.render(inline: de_fenced_markdown_str)
+
+          # replace placeholders with original code fences
+          code_ranges.reverse_each.with_index do |code_range, idx|
+            rendered_str.sub!("<!--codefence#{idx}-->", markdown_str[code_range])
+          end
+
+          rendered_str
+        end
+
+        def find_fenced_code_ranges_in(str)
+          doc = Kramdown::Document.new(str)
+          line_starts = find_line_starts_in(str)
+
+          [].tap do |code_ranges|
+            each_codespan_in(doc.root) do |node|
+              options = node.options
+              delimiter = options[:codespan_delimiter]
+              next unless delimiter.start_with?("```")
+
+              start_pos = line_starts[options[:location]]
+              end_pos = start_pos + node.value.size + delimiter.size
+              end_pos = str.index("```", end_pos) + 3
+
+              code_ranges << (start_pos...end_pos)
+            end
+          end
+        end
+
+        def find_line_starts_in(str)
+          line_counter = 2
+
+          { 1 => 0 }.tap do |memo|
+            str.scan(/\r?\n/) do
+              memo[line_counter] = Regexp.last_match.end(0)
+              line_counter += 1
+            end
+          end
+        end
+
+        def each_codespan_in(node, &block)
+          return unless node.respond_to?(:children)
+
+          node.children.each do |child|
+            yield child if child.type == :codespan
+            each_codespan_in(child, &block)
+          end
+        end
+
         def registry
           @registry ||= Primer::Yard::Registry.make
         end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 12
-      PATCH = 0
+      MINOR = 13
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -0,0 +1,31 @@
+<%= render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| %>
+  <% menu.with_show_button { "Group By" } %>
+  <% menu.with_item(
+    label: "Repository",
+    href: action_menu_form_action_path(format: route_format),
+    form_arguments: {
+      method: :post,
+      inputs: [{
+        name: "query",
+        value: "query"
+      }, {
+        name: "foo", # use "foo" here because that's what the controller expects
+        value: "group-by-repository",
+      }],
+    }
+  ) %>
+  <% menu.with_item(
+    label: "Date",
+    href: action_menu_form_action_path(format: route_format),
+    form_arguments: {
+      method: :post,
+      inputs: [{
+        name: "query",
+        value: "query"
+      }, {
+        name: "foo", # use "foo" here because that's what the controller expects
+        value: "sort-by-date"
+      }]
+    }
+  ) %>
+<% end %>

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

@@ -13,7 +13,7 @@
   <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
   <% component.with_item(
     label: "Submit form",
-    href: action_menu_form_action_path,
+    href: action_menu_form_action_path(format: route_format),
     form_arguments: {
       name: "foo", value: "bar", method: :post
     },

data/previews/primer/alpha/action_menu_preview.rb

@@ -217,8 +217,8 @@ module Primer
       # @label With actions
       #
       # @param disable_items toggle
-      def with_actions(disable_items: false)
-        render_with_template(locals: { disable_items: disable_items })
+      def with_actions(disable_items: false, route_format: :html)
+        render_with_template(locals: { disable_items: disable_items, route_format: route_format })
       end
 
       # @label Single select form
@@ -227,6 +227,12 @@ module Primer
         render_with_template(locals: { route_format: route_format })
       end
 
+      # @label Single select form items
+      #
+      def single_select_form_items(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
       # @label Multiple select form
       #
       def multiple_select_form(route_format: :html)

data/previews/primer/alpha/check_box_preview.rb

@@ -7,7 +7,6 @@ module Primer
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
@@ -15,7 +14,6 @@ module Primer
       # @param disabled toggle
       def playground(
         name: "my-check-box",
-        id: nil,
         value: "picard",
         label: "Jean-Luc Picard",
         caption: "Make it so",

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

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
+  <% d.with_show_button { "Show Dialog" } %>
+  <% d.with_body do %>
+    <form>
+      <input type="text" placeholder="This element is focused on open" autofocus>
+    </form>
+  <% end %>
+<% end %>

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

@@ -4,7 +4,8 @@
     <p>Dialog One!</p>
 
     <form>
-      <input type="text" value="Some text goes in here">
+      <label for="dialog-text-input-example">Example input</label>
+      <input id="dialog-text-input-example" type="text" value="Some text goes in here">
     </form>
   <% end %>
 <% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -166,6 +166,11 @@ module Primer
                                show_divider: show_divider
                              })
       end
+
+      # @label Autofocus element with autofocus attribute
+      def autofocus_element
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/alpha/radio_button_preview.rb

@@ -7,7 +7,6 @@ module Primer
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
@@ -15,7 +14,6 @@ module Primer
       # @param disabled toggle
       def playground(
         name: "my-radio-button",
-        id: nil,
         value: "bsg",
         label: "Battlestar Galactica",
         caption: "A pretty good show",

data/previews/primer/alpha/tooltip_preview.rb

@@ -78,14 +78,14 @@ module Primer
       # @!endgroup
 
       # @label Tooltip inside Primer::Alpha::Overlay
-      def tooltip_inside_primer_overlay(direction: :s, tooltip_text: "You can press a button")
+      def tooltip_inside_primer_overlay
         render_with_template(
           locals: {}
         )
       end
 
       # @label Tooltip with button moving focus to input
-      def tooltip_with_dialog_moving_focus_to_input()
+      def tooltip_with_dialog_moving_focus_to_input
         render_with_template(locals: {})
       end
     end

data/previews/primer/beta/button_group_preview.rb

@@ -55,16 +55,16 @@ module Primer
       # @snapshot
       def all_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
-          component.with_button(id: "button-1", tag: :button) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-1", tag: :button) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 1"
           end
-          component.with_button(id: "button-2", tag: :a) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-2", tag: :a) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 2"
           end
-          component.with_button(id: "button-3", tag: :summary) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-3", tag: :summary) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 3"
           end
         end

data/static/classes.json

@@ -477,6 +477,18 @@
   "SegmentedControl--fullWidth": [
     "Primer::Alpha::SegmentedControl"
   ],
+  "SegmentedControl--iconOnly": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--large": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--medium": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--small": [
+    "Primer::Alpha::SegmentedControl"
+  ],
   "SegmentedControl-item": [
     "Primer::Alpha::SegmentedControl"
   ],

data/static/constants.json

@@ -544,9 +544,20 @@
   "Primer::Alpha::RadioButtonGroup": {
   },
   "Primer::Alpha::SegmentedControl": {
+    "DEFAULT_SIZE": "medium",
     "FULL_WIDTH_DEFAULT": false,
     "HIDE_LABELS_DEFAULT": false,
-    "Item": "Primer::Alpha::SegmentedControl::Item"
+    "Item": "Primer::Alpha::SegmentedControl::Item",
+    "SIZE_MAPPINGS": {
+      "small": "SegmentedControl--small",
+      "medium": "SegmentedControl--medium",
+      "large": "SegmentedControl--large"
+    },
+    "SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ]
   },
   "Primer::Alpha::SegmentedControl::Item": {
   },

data/static/info_arch.json

@@ -1128,8 +1128,8 @@
   },
   {
     "fully_qualified_name": "Primer::Alpha::ActionMenu",
-    "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.",
-    "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).",
+    "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"<string>\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the\n`form_arguments:` argument, including the Rails form builder object and the name of the field:\n\n```erb\n<% form_with(url: update_merge_strategy_path) do |f| %>\n  <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: \"merge_strategy\" })) do |menu| %>\n    <% menu.with_item(label: \"Fast forward\", data: { value: \"fast_forward\" }) %>\n    <% menu.with_item(label: \"Recursive\", data: { value: \"recursive\" }) %>\n    <% menu.with_item(label: \"Ours\", data: { value: \"ours\" }) %>\n    <% menu.with_item(label: \"Theirs\", data: { value: \"theirs\" }) %>\n  <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"merge_strategy\"`). If no value is provided for an item, the value of that item is the item's label.  Here's the\ncorresponding `MergeStrategyController` that might be written to handle the form above:\n\n```ruby\nclass MergeStrategyController < ApplicationController\n  def update\n    puts \"You chose #{merge_strategy_params[:merge_strategy]}\"\n  end\n\n  private\n\n  def merge_strategy_params\n    params.permit(:merge_strategy)\n  end\nend\n```\n\n### `ActionMenu` items that submit forms\n\nWhereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items\nalso permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass\nthe `form_arguments:` argument to the appropriate item:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n  <% menu.with_item(\n    label: \"Repository\",\n    href: update_repo_grouping_path,\n    form_arguments: {\n      method: :post,\n      name: \"group_by\",\n      value: \"repository\"\n    }\n  ) %>\n<% end %>\n```\n\nMake sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to\nthe URL passed in the `href:` argument, including a parameter named `\"group_by\"` with a value of `\"repository\"`. If no value\nis given, the name, eg. `\"group_by\"`, will be used as the value.\n\nIt is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via\nthe `inputs:` argument:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n  <% menu.with_show_button { \"Group By\" } %>\n  <% menu.with_item(\n    label: \"Repository\",\n    href: update_repo_grouping_path,\n    form_arguments: {\n      method: :post,\n      inputs: [{\n        name: \"group_by\",\n        value: \"repository\"\n      }, {\n        name: \"some_other_field\",\n        value: \"some value\",\n      }],\n    }\n  ) %>\n<% end %>\n```\n\n### Form arguments\n\nThe following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.\n\n|Name             |Type          |Default|Description|\n|:----------------|:-------------|:------|:----------|\n|`method`         |`Symbol`      |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|\n|`name`           |`String`      |`nil`  |The name of the field that will be sent to the server on submit.|\n|`value`          |`String`      |`nil`  |The value of the field that will be sent to the server on submit.|\n|`input_arguments`|`Hash`        |`{}`   |Additional key/value pairs to emit as HTML attributes on the `<input type=\"hidden\">` element.|\n|`inputs`         |`Array<Hash>` |`[]`   |An array of hashes representing HTML `<input type=\"hidden\">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `<input type=\"hidden\">` elements.",
+    "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything\nnested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -1530,6 +1530,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/single_select_form_items",
+        "name": "single_select_form_items",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/multiple_select_form",
         "name": "multiple_select_form",
@@ -3106,6 +3119,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/autofocus_element",
+        "name": "autofocus_element",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -580,6 +580,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/single_select_form_items",
+        "name": "single_select_form_items",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/multiple_select_form",
         "name": "multiple_select_form",
@@ -2936,6 +2949,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/autofocus_element",
+        "name": "autofocus_element",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },