openproject-primer_view_components 0.23.0 → 0.24.0

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

@@ -8,11 +8,14 @@
   <% component.with_parent_link(href: "#") do %>
     Parent link
   <% end %>
-  <% component.with_context_bar_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(
+  <% component.with_context_bar_action do %>
+    <%= render(Primer::Beta::IconButton.new(icon: 'star', 'aria-label': 'Star')) %>
+  <% end %>
+  <% component.with_context_bar_action do %>
+    <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+      <% menu.with_show_button { "Menu" } %>
+      <% menu.with_item(label: "Item", tag: :button, value: "") %>
+      <% menu.with_item(
            label: "Show dialog",
            tag: :button,
            content_arguments: { "data-show-dialog-id": "my-dialog" },
@@ -22,4 +25,3 @@
     <% end %>
   <% end %>
 <% end %>
-

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

@@ -1,11 +1,11 @@
 <%= 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_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action %>
   <%= header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs %>
   <%= header.with_parent_link(href: "#") { "Parent link" } if with_parent_link %>
   <% if with_actions %>
-    <% header.with_actions do %>
+    <% header.with_action do %>
       <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
         <% component.with_show_button { "Menu" } %>
         <% component.with_item(label: "Item", tag: :button, value: "") %>
@@ -20,12 +20,12 @@
     <% end %>
   <% end %>
   <% if with_context_bar_actions %>
-    <% header.with_context_bar_actions do %>
+    <% header.with_context_bar_action do %>
       <%= render(Primer::Beta::IconButton.new(
         scheme: :default,
         size: :small,
         icon: "pencil",
-        "aria-label": "aria_label"
+        "aria-label": "A meaningful label"
       )) %>
     <% end %>
   <% end %>

data/previews/primer/open_project/page_header_preview.rb

@@ -18,8 +18,7 @@ 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_leading_action [Symbol] octicon
       # @param with_breadcrumbs [Boolean]
       # @param with_actions [Boolean]
       # @param with_context_bar_actions [Boolean]
@@ -28,8 +27,7 @@ module Primer
         variant: :large,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
-        with_back_button: false,
-        back_button_size: :medium,
+        with_leading_action: :"arrow-left",
         with_breadcrumbs: false,
         with_actions: false,
         with_context_bar_actions: false,
@@ -40,8 +38,7 @@ module Primer
         render_with_template(locals: { variant: variant,
                                        title: title,
                                        description: description,
-                                       with_back_button: with_back_button,
-                                       back_button_size: back_button_size,
+                                       with_leading_action: with_leading_action,
                                        with_breadcrumbs: with_breadcrumbs,
                                        with_parent_link: with_parent_link,
                                        with_actions: with_actions,
@@ -49,10 +46,10 @@ module Primer
                                        breadcrumb_items: breadcrumb_items })
       end
 
-      # @label Medium title
-      def medium_title
+      # @label Large title
+      def large_title
         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." }
         end
       end
@@ -62,18 +59,17 @@ 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")
         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")
         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",

data/static/classes.json

@@ -426,19 +426,16 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-backButton": [
-    "Primer::OpenProject::PageHeader"
-  ],
   "PageHeader-breadcrumbs": [
     "Primer::OpenProject::PageHeader"
   ],
   "PageHeader-contextBar": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-contextBarActions": [
+  "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-description": [
+  "PageHeader-leadingAction": [
     "Primer::OpenProject::PageHeader"
   ],
   "PageHeader-parentLink": [

data/static/constants.json

@@ -95,6 +95,7 @@
     "DEFAULT_DESCRIPTION_SCHEME": "block",
     "DEFAULT_SCHEME": "default",
     "DEFAULT_SIZE": "medium",
+    "DEFAULT_TRUNCATION_BEHAVIOR": "none",
     "DESCRIPTION_SCHEME_MAPPINGS": {
       "inline": "ActionListItem-descriptionWrap--inline",
       "block": "ActionListItem-descriptionWrap"
@@ -120,6 +121,20 @@
       "medium",
       "large",
       "xlarge"
+    ],
+    "TRUNCATION_BEHAVIOR_MAPPINGS": {
+      "none": null,
+      "false": null,
+      "show_tooltip": "ActionListItem-label--truncate",
+      "truncate": "ActionListItem-label--truncate",
+      "true": "ActionListItem-label--truncate"
+    },
+    "TRUNCATION_BEHAVIOR_OPTIONS": [
+      "none",
+      false,
+      "show_tooltip",
+      "truncate",
+      true
     ]
   },
   "Primer::Alpha::ActionMenu": {
@@ -1415,26 +1430,20 @@
       "chevron-left",
       "triangle-left"
     ],
-    "BACK_BUTTON_SIZE_OPTIONS": [
-      "small",
-      "medium",
-      "large"
-    ],
-    "DEFAULT_BACK_BUTTON_DISPLAY": [
-      "none",
-      "flex"
-    ],
     "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
-    "DEFAULT_BACK_BUTTON_SIZE": "medium",
     "DEFAULT_BREADCRUMBS_DISPLAY": [
       "none",
       "flex"
     ],
     "DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY": [
-      "block",
+      "flex",
       "none"
     ],
-    "DEFAULT_HEADER_VARIANT": "large",
+    "DEFAULT_HEADER_VARIANT": "medium",
+    "DEFAULT_LEADING_ACTION_DISPLAY": [
+      "none",
+      "flex"
+    ],
     "DEFAULT_PARENT_LINK_DISPLAY": [
       "block",
       "none"
@@ -1443,7 +1452,7 @@
       "medium",
       "large"
     ],
-    "HEADING_TAG_FALLBACK": "h2",
+    "HEADING_TAG_FALLBACK": "h1",
     "HEADING_TAG_OPTIONS": [
       "h1",
       "h2",

data/static/info_arch.json

@@ -746,6 +746,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
+        "name": "long_label_show_tooltip_with_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -813,9 +865,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",
@@ -7127,6 +7179,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select/disabled",
         "name": "disabled",
@@ -7562,7 +7627,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",
@@ -7745,6 +7810,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_area/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_area/disabled",
         "name": "disabled",
@@ -7813,7 +7891,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",
@@ -8090,6 +8168,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/disabled",
         "name": "disabled",
@@ -8319,13 +8410,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",
@@ -13115,6 +13206,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
+        "name": "long_label_show_tooltip_no_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -16178,20 +16321,14 @@
         ]
       },
       {
-        "name": "back_button",
-        "description": "Optional back button prepend the title\nBy default shown on wider screens. Can be overridden with system_argument: display",
+        "name": "leading_action",
+        "description": "Optional leading action prepend the title\nBy default shown on wider screens. Can be overridden with system_argument: display",
         "parameters": [
-          {
-            "name": "size",
-            "type": "Symbol",
-            "default": "N/A",
-            "description": "One of `:large`, `:medium`, or `:small`."
-          },
           {
             "name": "icon",
-            "type": "String",
+            "type": "Symbol",
             "default": "N/A",
-            "description": "One of `arrow-left`, `chevron-left`, or `triangle-left`."
+            "description": "The name of an {{link_to_octicons}} icon to use."
           },
           {
             "name": "system_arguments",
@@ -16276,8 +16413,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/medium_title",
-        "name": "medium_title",
+        "preview_path": "primer/open_project/page_header/large_title",
+        "name": "large_title",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -16302,8 +16439,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/back_button",
-        "name": "back_button",
+        "preview_path": "primer/open_project/page_header/leading_action",
+        "name": "leading_action",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [