openproject-primer_view_components 0.12.1 → 0.13.1

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

@@ -8,14 +8,15 @@
 
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Trigger" } %>
-  <% component.with_item(label: "Alert", tag: :button, id: "alert-item") %>
-  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }) %>
-  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }) %>
+  <% component.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
+  <% 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
-    }
+    },
+    disabled: disable_items
   ) %>
 <% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -216,7 +216,10 @@ module Primer
 
       # @label With actions
       #
-      def with_actions; end
+      # @param disable_items toggle
+      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
       #
@@ -224,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/segmented_control_preview.rb

@@ -100,6 +100,41 @@ module Primer
       end
       # @!endgroup
 
+      # @!group Trailing Label
+      # @label Size small
+      # @snapshot
+      def trailing_label_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def trailing_label_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def trailing_label_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+      # @!endgroup
+
       # @!group Icons only
       # @label Size small
       # @snapshot

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

@@ -0,0 +1,23 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm focus")) do |d| %>
+  <%= render(Primer::Alpha::Dialog::Body.new()) do %>
+    Are you sure you want to focus the input?
+  <% end %>
+  <%= render(Primer::Alpha::Dialog::Footer.new()) do %>
+    <%= render(Primer::Beta::Button.new(id: "yes-button", data: { "close-dialog-id": "my-dialog" })) { "Yes" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary, data: { "close-dialog-id": "my-dialog" })) { "Yes but in green" } %>
+  <% end %>
+  <% d.with_show_button do |b| %>
+    Focus input
+    <% b.with_tooltip(text: "This is a tooltip in an Overlay") %>
+  <% end %>
+<% end %>
+<label>
+  An input
+  <input type="text" id="input">
+</label>
+<script>
+  document.querySelector('#my-dialog').addEventListener('cancel', function () {
+    console.log('!!')
+    setTimeout(() => document.querySelector('#input').focus(), 0);
+  });
+</script>

data/previews/primer/alpha/tooltip_preview.rb

@@ -78,11 +78,16 @@ 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
+        render_with_template(locals: {})
+      end
     end
   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/previews/primer/beta/button_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param block toggle
       # @param disabled toggle
+      # @param inactive toggle
       # @param align_content select [center, start]
       # @param tag select [a, summary, button]
       def playground(
@@ -27,7 +28,8 @@ module Primer
         id: "button-preview",
         align_content: :center,
         tag: :button,
-        disabled: false
+        disabled: false,
+        inactive: false
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -36,7 +38,8 @@ module Primer
                  id: id,
                  align_content: align_content,
                  tag: tag,
-                 disabled: disabled
+                 disabled: disabled,
+                 inactive: inactive
                )) do |_c|
           "Button"
         end
@@ -341,6 +344,21 @@ module Primer
                                align_content: align_content
                              })
       end
+
+      # @label Inactive
+      # @param inactive toggle
+      # @snapshot
+      def inactive(
+        id: "button-preview",
+        inactive: true
+      )
+        render(Primer::Beta::Button.new(
+                 id: id,
+                 inactive: inactive
+               )) do |_c|
+          "Button"
+        end
+      end
     end
   end
 end

data/previews/primer/beta/icon_button_preview.rb

@@ -9,6 +9,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
+      # @param inactive toggle
       # @param tag select [a, summary, button]
       # @param icon [Symbol] octicon
       # @param show_tooltip toggle
@@ -18,6 +19,7 @@ module Primer
         id: "button-preview",
         tag: :button,
         disabled: false,
+        inactive: false,
         icon: :plus,
         aria_label: "Button",
         show_tooltip: true
@@ -28,6 +30,7 @@ module Primer
                  id: id,
                  tag: tag,
                  disabled: disabled,
+                 inactive: inactive,
                  icon: icon,
                  "aria-label": aria_label,
                  show_tooltip: show_tooltip

data/static/arguments.json

@@ -46,7 +46,18 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
     "parameters": [
-
+      {
+        "name": "item_content",
+        "type": "String",
+        "default": "N/A",
+        "description": "The content to render inside the item."
+      },
+      {
+        "name": "item_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
     ]
   },
   {
@@ -3117,6 +3128,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/classes.json

@@ -507,6 +507,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

@@ -139,7 +139,18 @@
         "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
         "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
         "parameters": [
-
+          {
+            "name": "item_content",
+            "type": "String",
+            "default": "N/A",
+            "description": "The content to render inside the item."
+          },
+          {
+            "name": "item_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
         ],
         "slots": [
 
@@ -1117,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,
@@ -1519,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",
@@ -3095,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": [
@@ -6398,6 +6435,45 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
+        "name": "trailing_label_width_small",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
+        "name": "trailing_label_width_medium",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
+        "name": "trailing_label_width_large",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/segmented_control/icon_only_small",
         "name": "icon_only_small",
@@ -6557,10 +6633,32 @@
           }
         ],
         "slots": [
-
+          {
+            "name": "trailing_visual_label",
+            "description": "Optional trailing Label",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
+              }
+            ]
+          }
         ],
         "methods": [
-
+          {
+            "name": "with_trailing_visual_label",
+            "description": "Optional trailing label.",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
+              }
+            ]
+          }
         ],
         "previews": [
 
@@ -8341,6 +8439,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
+        "name": "tooltip_with_dialog_moving_focus_to_input",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -9534,6 +9645,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -10599,6 +10716,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/button/inactive",
+        "name": "inactive",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [