primer_view_components 0.22.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/alpha/select_preview.rb

@@ -11,6 +11,7 @@ module Primer
       # @param label text
       # @param caption text
       # @param required toggle
+      # @param multiple toggle
       # @param visually_hide_label toggle
       # @param size [Symbol] select [small, medium, large]
       # @param full_width toggle
@@ -23,6 +24,7 @@ module Primer
         label: "Favorite place to visit",
         caption: "They're all good",
         required: false,
+        multiple: false,
         visually_hide_label: false,
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         full_width: true,
@@ -36,6 +38,7 @@ module Primer
           label: label,
           caption: caption,
           required: required,
+          multiple: multiple,
           visually_hide_label: visually_hide_label,
           size: size,
           full_width: full_width,

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/label_wrap.html.erb

@@ -0,0 +1,9 @@
+<div style="width: 200px;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: scheme,
+      size: size,
+      label_wrap: label_wrap
+  )) do %>
+    This button has a long label and will wrap
+  <% end %>
+</div>

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

@@ -0,0 +1,8 @@
+<div style="width: 200px;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: :link,
+      size: :medium,
+  )) do %>
+    This is a button styled to look like a link that wraps like a link
+  <% end %>
+</div>

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,8 @@ 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,
         size: :medium,
@@ -29,8 +30,14 @@ module Primer
         align_content: :center,
         tag: :button,
         disabled: false,
-        inactive: false
+        inactive: 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,
@@ -39,8 +46,10 @@ module Primer
                  align_content: align_content,
                  tag: tag,
                  disabled: disabled,
-                 inactive: inactive
-               )) do |_c|
+                 inactive: inactive,
+                 label_wrap: label_wrap,
+                 href: href
+                )) do |_c|
           "Button"
         end
       end
@@ -48,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",
@@ -70,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,
@@ -92,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,
@@ -114,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,
@@ -142,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",
@@ -175,7 +179,6 @@ module Primer
 
       # @label Full width
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       # @snapshot
       def full_width(
         id: "button-preview",
@@ -194,11 +197,32 @@ module Primer
         end
       end
 
+      # @label Label wrap
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param label_wrap toggle
+      # @snapshot
+      def label_wrap(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        label_wrap: true
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               label_wrap: label_wrap
+                             })
+      end
+
       # @label Link as button
       # @param scheme select [default, primary, danger, invisible, link]
       # @param size select [small, medium]
       # @param block toggle
       # @param align_content select [center, start]
+      # @param href
       # @snapshot
       def link_as_button(
         scheme: :default,
@@ -222,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,
@@ -235,7 +282,7 @@ module Primer
         block: false,
         id: "button-preview",
         align_content: :center,
-        tag: :a
+        tag: :button
       )
         render_with_template(locals: {
                                scheme: scheme,
@@ -361,6 +408,18 @@ module Primer
           "Button"
         end
       end
+
+      # @label Link scheme with long label
+      # @snapshot
+      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/previews/primer/beta/nav_list_preview.rb

@@ -139,7 +139,7 @@ module Primer
           component.with_item(
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
-          ) 
+          )
           component.with_item(
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
@@ -178,6 +178,20 @@ module Primer
           end
         end
       end
+
+      def group_long_label_with_tooltip
+        render(Primer::Beta::NavList.new) do |list|
+          list.with_heading(title: "Repository settings")
+
+          list.with_item(label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: :show_tooltip) do |item|
+            item.with_leading_visual_icon(icon: :"comment-discussion")
+
+            item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
+            item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
+            item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
+          end
+        end
+      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",
@@ -3400,6 +3388,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "label_wrap",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not the button label text wraps and the button height expands."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/classes.json

@@ -185,6 +185,9 @@
   "Button--invisible": [
     "Primer::Beta::Button"
   ],
+  "Button--labelWrap": [
+    "Primer::Beta::Button"
+  ],
   "Button--large": [
     "Primer::Beta::Button"
   ],