openproject-primer_view_components 0.23.0 → 0.25.0

data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-n")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :n) %>
+      Tooltip north
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-ne")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :ne) %>
+      Tooltip northeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-nw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :nw) %>
+      Tooltip northwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-s")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :s) %>
+      Tooltip south
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-se")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :se) %>
+      Tooltip southeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-sw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :sw) %>
+      Tooltip southwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-w")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :w) %>
+      Tooltip west
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview.rb

@@ -88,6 +88,86 @@ module Primer
       def tooltip_with_dialog_moving_focus_to_input
         render_with_template(locals: {})
       end
+
+      # @label Direction: North
+      # @snapshot interactive
+      def tooltip_n(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: South
+      # @snapshot interactive
+      def tooltip_s(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: East
+      # @snapshot interactive
+      def tooltip_e(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: West
+      # @snapshot interactive
+      def tooltip_w(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southeast
+      # @snapshot interactive
+      def tooltip_se(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southwest
+      # @snapshot interactive
+      def tooltip_sw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northeast
+      # @snapshot interactive
+      def tooltip_ne(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northwest
+      # @snapshot interactive
+      def tooltip_nw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
     end
   end
 end

data/previews/primer/beta/nav_list_preview.rb

@@ -129,6 +129,49 @@ module Primer
       # @label Trailing action
       # @snapshot
       def trailing_action; end
+
+      # @label Long label truncate overflow
+      #
+      # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
+      # @snapshot
+      def long_label_with_tooltip(truncate_label: :show_tooltip)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_trailing_visual_icon(icon: :plus)
+          end
+        end
+      end
+
+      def long_label_wrap(truncate_label: :none)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_truncate_no_tooltip(truncate_label: :truncate)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_show_tooltip_no_truncate_label
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/forms_preview/auto_complete_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
+  <%= render(AutoCompleteForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/select_form.html.erb

@@ -1,3 +1,3 @@
-<%= primer_form_with(url: "/foo") do |f| %>
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
   <%= render(SelectForm.new(f)) %>
 <% end %>

data/previews/primer/forms_preview.rb

@@ -46,5 +46,7 @@ module Primer
     def immediate_validation_form; end
 
     def example_toggle_switch_form; end
+
+    def auto_complete_form; end
   end
 end

data/previews/primer/open_project/border_grid_preview.rb

@@ -21,7 +21,7 @@ module Primer
       # @label Default Options
       #
       # @snapshot
-      def default()
+      def default
         render(Primer::OpenProject::BorderGrid.new) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }
@@ -30,7 +30,7 @@ module Primer
       end
 
       # @label Spacious
-      def spacious()
+      def spacious
         render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }

data/previews/primer/open_project/input_group_preview.rb

@@ -11,7 +11,7 @@ module Primer
       # @snapshot
       def default
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Copyable value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
           menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
         end
       end
@@ -24,13 +24,13 @@ module Primer
       # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         trailing_action: :clipboardCopy,
-        value: 'Copyable value',
+        value: "Copyable value",
         visually_hide_label: false,
         readonly: true,
         input_width: :medium
       )
         render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
-          menu.with_text_input(name: 'Test', label: 'My input group', visually_hide_label: visually_hide_label, value: value, readonly: readonly)
+          menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)
 
           case trailing_action
           when :icon
@@ -46,7 +46,7 @@ module Primer
       # @label With icon button
       def icon_button
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
         end
       end
@@ -54,7 +54,7 @@ module Primer
       # @label With a small input
       def small_input_width
         render(Primer::OpenProject::InputGroup.new(input_width: :small)) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
         end
       end

data/previews/primer/open_project/page_header_preview/actions.html.erb

@@ -1,22 +1,25 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
-  <% component.with_title(tag: :h1) do %>
-    A title
+  <% component.with_title do %>
+    Great news
   <% end %>
   <% component.with_description do %>
-    A description with actions
+    This example lists all possible actions of a PageHeader. Of course, you will most likely never need all of them on the same page as it is shown here.
   <% end %>
-  <% component.with_actions do %>
-    <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
-      <% component.with_show_button { "Menu" } %>
-      <% component.with_item(label: "Item", tag: :button, value: "") %>
-      <% component.with_item(
-           label: "Show dialog",
-           tag: :button,
-           content_arguments: { "data-show-dialog-id": "my-dialog" },
-           value: "",
-           scheme: :danger
-         ) %>
+  <% component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]) %>
+  <% component.with_action_text { "An additional hint" } %>
+  <% component.with_action_link(mobile_icon: "link", mobile_label: "Community", href: "https://community.openproject.com", target: "_blank") { "Go to community" } %>
+  <% component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|%>
+      <% button.with_leading_visual_icon(icon: "star") %>
+      Star
+  <% end %>
+  <% component.with_action_button(mobile_icon: nil, mobile_label: nil) { "Hide on mobile" } %>
+  <% component.with_action_icon_button(icon: "trash", mobile_icon: "trash", label: "Delete", scheme: :danger) %>
+  <% component.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": "Some actions" })  do |menu, button| %>
+    <% menu.with_item(label: "Subitem 1") do |item| %>
+      <% item.with_leading_visual_icon(icon: :paste) %>
+    <% end %>
+    <% menu.with_item(label: "Subitem 2") do |item| %>
+      <% item.with_leading_visual_icon(icon: :log) %>
     <% end %>
   <% end %>
 <% end %>
-

data/previews/primer/open_project/page_header_preview/playground.html.erb

@@ -1,32 +1,17 @@
 <%= render Primer::OpenProject::PageHeader.new do |header| %>
   <%= header.with_title(variant: variant) { title } %>
   <%= header.with_description { description } %>
-  <%= header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button %>
-  <%= header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs %>
-  <%= header.with_parent_link(href: "#") { "Parent link" } if with_parent_link %>
+  <%= header.with_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action && with_leading_action != :none %>
+  <%= header.with_breadcrumbs(breadcrumb_items) %>
   <% if with_actions %>
-    <% header.with_actions do %>
-      <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
-        <% component.with_show_button { "Menu" } %>
-        <% component.with_item(label: "Item", tag: :button, value: "") %>
-        <% component.with_item(
-             label: "Show dialog",
-             tag: :button,
-             content_arguments: { "data-show-dialog-id": "my-dialog" },
-             value: "",
-             scheme: :danger
-           ) %>
+    <% header.with_action_icon_button(icon: 'pencil', mobile_icon: 'pencil', label: 'Edit') %>
+    <% header.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": "Menu" }) do |menu, button| %>
+      <% menu.with_item(label: "Subitem 1") do |item| %>
+        <% item.with_leading_visual_icon(icon: :unlock) %>
+      <% end %>
+      <% menu.with_item(label: "Subitem 2", scheme: :danger) do |item| %>
+        <% item.with_leading_visual_icon(icon: :trash) %>
       <% end %>
-    <% end %>
-  <% end %>
-  <% if with_context_bar_actions %>
-    <% header.with_context_bar_actions do %>
-      <%= render(Primer::Beta::IconButton.new(
-        scheme: :default,
-        size: :small,
-        icon: "pencil",
-        "aria-label": "aria_label"
-      )) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/open_project/page_header_preview.rb

@@ -8,9 +8,12 @@ module Primer
       # @label Default
       # @snapshot
       def default
+        breadcrumb_items = [{ href: "/foo", text: "Grandparent" }, { href: "/bar", text: "Parent" }, "Hello"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
@@ -18,42 +21,33 @@ module Primer
       # @param variant [Symbol] select [medium, large]
       # @param title [String] text
       # @param description [String] text
-      # @param with_back_button [Boolean]
-      # @param back_button_size [Symbol] select [small, medium, large]
-      # @param with_breadcrumbs [Boolean]
+      # @param with_leading_action [Symbol] octicon
       # @param with_actions [Boolean]
-      # @param with_context_bar_actions [Boolean]
-      # @param with_parent_link [Boolean]
       def playground(
-        variant: :large,
+        variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
-        with_back_button: false,
-        back_button_size: :medium,
-        with_breadcrumbs: false,
-        with_actions: false,
-        with_context_bar_actions: false,
-        with_parent_link: false
+        with_leading_action: :"none",
+        with_actions: true
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
         render_with_template(locals: { variant: variant,
                                        title: title,
                                        description: description,
-                                       with_back_button: with_back_button,
-                                       back_button_size: back_button_size,
-                                       with_breadcrumbs: with_breadcrumbs,
-                                       with_parent_link: with_parent_link,
+                                       with_leading_action: with_leading_action,
                                        with_actions: with_actions,
-                                       with_context_bar_actions: with_context_bar_actions,
                                        breadcrumb_items: breadcrumb_items })
       end
 
-      # @label Medium title
-      def medium_title
+      # @label Large title
+      def large_title
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title(variant: :medium) { "Hello" }
+          header.with_title(variant: :large) { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
@@ -62,25 +56,26 @@ module Primer
         render_with_template(locals: {})
       end
 
-      # @label With back button (on wide)
-      # **Back button** is only shown on **wider than narrow screens** by default.
+      # @label With leading action (on wide)
+      # **Leading action** is only shown on **wide screens** by default.
       # If you want to override that behaviour please use the system_argument: **display**
       # e.g. **component.with\_breadcrumbs(display: [:block, :block])**
       #
       # @param href [String] text
-      # @param size [Symbol] select [small, medium, large]
-      # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
-      def back_button(href: "#", size: :medium, icon: "arrow-left")
+      # @param icon [Symbol] octicon
+      def leading_action(href: "#", icon: :"arrow-left")
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title { "Hello" }
-          header.with_back_button(href: href, size: size, icon: icon, 'aria-label': "Back")
+          header.with_leading_action(icon: icon, href: href, 'aria-label': "Back")
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
-      # @label With breadcrumbs (on wide)
+      # @label With breadcrumbs
       # **Breadcrumbs** are only shown on **wider than narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_breadcrumbs(display: [:block, :block])**
+      # A parent link is shown instead in narrow screens
       #
       def breadcrumbs
         breadcrumb_items = [
@@ -93,27 +88,6 @@ module Primer
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
-
-      # @label With parent link (on narrow)
-      # **Parent link** is only shown on **narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_parent\_link(display: [:block, :block])**
-      #
-      def parent_link
-        render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title { "A title" }
-          header.with_parent_link(href: "test") { "Parent link" }
-        end
-      end
-
-      # @label With context bar actions (on narrow)
-      # **Context bar actions** are only shown on **narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_context\_bar\_actions(display: [:block, :block])**
-      #
-      def context_bar_actions
-        render_with_template(locals: {})
-      end
     end
   end
 end

data/static/arguments.json

@@ -249,9 +249,9 @@
       },
       {
         "name": "truncate_label",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Truncate label with ellipsis."
+        "type": "Boolean | Symbol",
+        "default": "`:none`",
+        "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
       },
       {
         "name": "href",
@@ -2494,7 +2494,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2624,7 +2624,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2814,13 +2814,13 @@
         "name": "size",
         "type": "Symbol",
         "default": "`:medium`",
-        "description": "What size toggle switch to render. One of `:end` or `:start`."
+        "description": "What size toggle switch to render. One of `:medium` or `:small`."
       },
       {
         "name": "status_label_position",
         "type": "Symbol",
         "default": "`:start`",
-        "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
+        "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
       {
         "name": "system_arguments",
@@ -4959,7 +4959,40 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
     "parameters": [
-
+      {
+        "name": "mobile_menu_label",
+        "type": "String",
+        "default": "`I18n.t(\"label_more\")`",
+        "description": "The tooltip label of the mobile menu"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::PageHeader::PageHeaderActionMenu",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeaderPageHeaderActionMenu",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/page_header_action_menu.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/page_header_action_menu/default/",
+    "parameters": [
+      {
+        "name": "menu_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [ActionMenu](/components/alpha/actionmenu)."
+      },
+      {
+        "name": "button_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [Button](/components/beta/button) or [IconButton](/components/beta/iconbutton), depending on the value of the `icon:` argument."
+      }
     ]
   },
   {

data/static/audited_at.json

@@ -121,6 +121,7 @@
   "Primer::OpenProject::GridLayout::Area": "",
   "Primer::OpenProject::InputGroup": "",
   "Primer::OpenProject::PageHeader": "",
+  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""
 }

data/static/classes.json

@@ -423,10 +423,10 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-actions": [
+  "PageHeader--singleAction": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-backButton": [
+  "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
   "PageHeader-breadcrumbs": [
@@ -435,10 +435,10 @@
   "PageHeader-contextBar": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-contextBarActions": [
+  "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-description": [
+  "PageHeader-leadingAction": [
     "Primer::OpenProject::PageHeader"
   ],
   "PageHeader-parentLink": [