primer_view_components 0.23.0 → 0.24.0

data/previews/primer/alpha/button_marketing_preview.rb

@@ -10,19 +10,31 @@ module Primer
       # @param tag [Symbol] select [button, a]
       # @param type [Symbol] select [button, submit]
       # @param disabled [Boolean]
-      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false)
-        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled)) { "Default" }
+      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false, href: nil)
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled, href: href)) { "Default" }
       end
 
       # @label Default options
       # @param scheme [Symbol] select [default, primary, outline, transparent]
       # @param variant [Symbol] select [default, large]
-      # @param tag [Symbol] select [button, a]
       # @param type [Symbol] select [button, submit]
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
 
+      # @label Link as button options
+      # @param scheme [Symbol] select [default, primary, outline, transparent]
+      # @param variant [Symbol] select [default, large]
+      # @param type [Symbol] select [button, submit]
+      # @param href [String]
+      def link_as_button(tag: :a, href: "#", type: :button, scheme: :default, variant: :default)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, href: href, type: type, scheme: scheme, variant: variant)) { "Default" }
+      end
+
       # @!group Size Variants
       # @snapshot
       #

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

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::Dialog.new(open: true, title: "Dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Open" } %>
+  <% dialog.with_header do |header| %>
+    <% header.with_filter(pr: 3, pl: 3) do %>
+      <%= render Primer::Alpha::TextField.new(
+        autofocus: true,
+        visually_hide_label: true,
+        name: "filter",
+        label: "Filter dialog",
+      ) %>
+    <% end %>
+  <% end %>
+  <% dialog.with_body do %>
+    Body
+  <% end %>
+  <% dialog.with_footer do %>
+    Footer
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -296,6 +296,10 @@ module Primer
           d.with_body { body_text }
         end
       end
+
+      def with_header_filter
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb

@@ -0,0 +1,19 @@
+<div style="position:sticky;top:0;" class="color-bg-accent">
+  <%= 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 |header| %>
+      <% header.with_filter do %>
+        <%= render Primer::Alpha::TextField.new(
+          autofocus: true,
+          visually_hide_label:
+          true,
+          name: "filter",
+          label: "Filter Overlay"
+        ) %>
+      <% end %>
+    <% 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 %>
+</div>
+<div style="height:3000px;"></div>

data/previews/primer/alpha/overlay_preview.rb

@@ -183,6 +183,21 @@ module Primer
       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
     end
   end
 end

data/previews/primer/beta/button_group_preview.rb

@@ -63,22 +63,18 @@ module Primer
         end
       end
 
-      # @label Button group with all tags
+      # @label Button group with multiple tags
       # @snapshot
-      def all_tags
+      def multiple_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
           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 |button|
+          component.with_button(id: "button-2", tag: :a, href: "#") do |button|
             button.with_tooltip(text: "Button Tooltip")
             "Button 2"
           end
-          component.with_button(id: "button-3", tag: :summary) do |button|
-            button.with_tooltip(text: "Button Tooltip")
-            "Button 3"
-          end
         end
       end
 

data/previews/primer/beta/button_preview/small_scheme_one_character.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Beta::Button.new(
+    size: :small,
+)) do %>
+  i
+<% end %>

data/previews/primer/beta/button_preview/summary_as_button.html.erb

@@ -0,0 +1,14 @@
+<details>
+  <%= render(Primer::Beta::Button.new(
+      scheme: scheme,
+      size: size,
+      block: block,
+      id: id,
+      align_content: align_content,
+      tag: tag
+  )) do %>
+    Button
+  <% end %>
+  <p>A wrapping `details` tag is required when using the button with the `:summary` tag</p>
+</details>
+

data/previews/primer/beta/button_preview.rb

@@ -20,7 +20,7 @@ module Primer
       # @param disabled toggle
       # @param inactive toggle
       # @param align_content select [center, start]
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @param label_wrap toggle
       def playground(
         scheme: :default,
@@ -31,8 +31,13 @@ module Primer
         tag: :button,
         disabled: false,
         inactive: false,
-        label_wrap: false
+        label_wrap: false,
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::Button.new(
                  scheme: scheme,
                  size: size,
@@ -42,8 +47,9 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  inactive: inactive,
-                 label_wrap: label_wrap
-               )) do |_c|
+                 label_wrap: label_wrap,
+                 href: href
+                )) do |_c|
           "Button"
         end
       end
@@ -51,7 +57,6 @@ module Primer
       # @label Default
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def default(
         block: false,
         id: "button-preview",
@@ -73,7 +78,6 @@ module Primer
       # @label Primary
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def primary(
         id: "button-preview",
         block: false,
@@ -95,7 +99,6 @@ module Primer
       # @label Danger
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def danger(
         id: "button-preview",
         block: false,
@@ -117,7 +120,6 @@ module Primer
       # @label Invisible
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def invisible(
         id: "button-preview",
         block: false,
@@ -145,7 +147,6 @@ module Primer
       # @label Link
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       # @snapshot
       def link(
         id: "button-preview",
@@ -178,7 +179,6 @@ module Primer
 
       # @label Full width
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       # @snapshot
       def full_width(
         id: "button-preview",
@@ -222,6 +222,7 @@ module Primer
       # @param size select [small, medium]
       # @param block toggle
       # @param align_content select [center, start]
+      # @param href
       # @snapshot
       def link_as_button(
         scheme: :default,
@@ -245,12 +246,35 @@ module Primer
         end
       end
 
+      # @label Summary as button
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      def summary_as_button(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :summary
+      )
+        render_with_template(locals: {
+                              scheme: scheme,
+                              size: size,
+                              block: block,
+                              id: id,
+                              align_content: align_content,
+                              tag: tag
+                             })
+      end
+
       # @label Trailing visual
       # @param scheme select [default, primary, danger, invisible, link]
       # @param size select [small, medium]
       # @param block toggle
       # @param align_content select [center, start]
-      # @param tag select [a, summary, button]
       # @snapshot
       def trailing_visual(
         scheme: :default,
@@ -258,7 +282,7 @@ module Primer
         block: false,
         id: "button-preview",
         align_content: :center,
-        tag: :a
+        tag: :button
       )
         render_with_template(locals: {
                                scheme: scheme,
@@ -390,6 +414,12 @@ module Primer
       def link_scheme_label_wrap
         render_with_template(locals: {})
       end
+
+      # @label Small scheme with one character
+      # @snapshot
+      def small_scheme_one_character
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/static/arguments.json

@@ -2462,18 +2462,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/info_arch.json

@@ -2514,7 +2514,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::ButtonMarketing",
     "description": "Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
-    "accessibility_docs": null,
+    "accessibility_docs": "Setting the tag argument to `:a` requires you to pass in an `href` attribute.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -2595,6 +2595,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/button_marketing/link_as_button",
+        "name": "link_as_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/button_marketing/sizes_default",
         "name": "sizes_default",
@@ -3453,6 +3466,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/with_header_filter",
+        "name": "with_header_filter",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -3514,7 +3540,30 @@
           }
         ],
         "slots": [
-
+          {
+            "name": "filter",
+            "description": "Optional filter slot for adding a filter input to the header.",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "{{link_to_system_arguments_docs}}"
+              }
+            ]
+          },
+          {
+            "name": "subtitle",
+            "description": "Optional subtitle slot for adding a subtitle to the header.",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "{{link_to_system_arguments_docs}}"
+              }
+            ]
+          }
         ],
         "methods": [
 
@@ -6094,6 +6143,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
+        "name": "overlay_with_header_subtitle",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/overlay/in_a_sticky_container",
+        "name": "in_a_sticky_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -6166,6 +6241,18 @@
                 "description": "{{link_to_system_arguments_docs}}"
               }
             ]
+          },
+          {
+            "name": "subtitle",
+            "description": "Optional subtitle slot for adding a subtitle to the header.",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "{{link_to_system_arguments_docs}}"
+              }
+            ]
           }
         ],
         "methods": [
@@ -7541,18 +7628,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -10908,7 +10983,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Button",
     "description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
-    "accessibility_docs": null,
+    "accessibility_docs": "Additional markup is required if setting the `tag` argument to either `:a` or `:summary`.\n\n* `:a` requires you to pass in an `href` attribute\n* `:summary` requires you to wrap the component in a `<details>` element",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -11183,6 +11258,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/summary_as_button",
+        "name": "summary_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_visual",
         "name": "trailing_visual",
@@ -11286,6 +11374,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/button/small_scheme_one_character",
+        "name": "small_scheme_one_character",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -11445,8 +11546,8 @@
         }
       },
       {
-        "preview_path": "primer/beta/button_group/all_tags",
-        "name": "all_tags",
+        "preview_path": "primer/beta/button_group/multiple_tags",
+        "name": "multiple_tags",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [

data/static/previews.json

@@ -2163,6 +2163,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/summary_as_button",
+        "name": "summary_as_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_visual",
         "name": "trailing_visual",
@@ -2266,6 +2279,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/button/small_scheme_one_character",
+        "name": "small_scheme_one_character",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -2341,8 +2367,8 @@
         }
       },
       {
-        "preview_path": "primer/beta/button_group/all_tags",
-        "name": "all_tags",
+        "preview_path": "primer/beta/button_group/multiple_tags",
+        "name": "multiple_tags",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -2400,6 +2426,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/button_marketing/link_as_button",
+        "name": "link_as_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/button_marketing/sizes_default",
         "name": "sizes_default",
@@ -3256,6 +3295,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/with_header_filter",
+        "name": "with_header_filter",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -4926,6 +4978,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
+        "name": "overlay_with_header_subtitle",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/overlay/in_a_sticky_container",
+        "name": "in_a_sticky_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },