openproject-primer_view_components 0.17.1 → 0.19.0

data/app/components/primer/open_project/input_group.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # `InputGroup` is composed of a text field input with a trailing action
+    class InputGroup < Primer::Component
+      status :open_project
+
+      DEFAULT_INPUT_WIDTH = :auto
+      INPUT_WIDTH_MAPPINGS = {
+        DEFAULT_INPUT_WIDTH => "InputGroup-input-width--auto",
+        :small => "InputGroup-input-width--small",
+        :medium => "InputGroup-input-width--medium",
+        :large => "InputGroup-input-width--large",
+        :xlarge => "InputGroup-input-width--xlarge",
+        :xxlarge => "InputGroup-input-width--xxlarge"
+      }.freeze
+      INPUT_WIDTH_OPTIONS = INPUT_WIDTH_MAPPINGS.keys
+
+      # A component that will render to the right of the label.
+      #
+      # To render a clipboardCopyButton, call the `with_trailing_action_clipboard_copy_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
+      #
+      # To render an iconButton, call the `with_trailing_action_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_action, types: {
+        clipboard_copy_button: lambda { |**system_arguments, &block|
+          system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "rounded-left-0 border-left-0"
+          )
+          Primer::Beta::ClipboardCopyButton.new(**system_arguments, &block)
+        },
+        icon: lambda { |icon: nil, **system_arguments, &block|
+          system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "rounded-left-0 border-left-0"
+          )
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments, &block)
+        }
+      }
+
+      # Input that is the central part of the input group
+      #
+      # Since the central use case of this component is a copyClipboard Button next to the input, it is readonly by default
+      #
+      # @param readonly [Boolean] Shall the text field be editable.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :text_input, lambda { |readonly: true, **system_arguments|
+        deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
+        system_arguments[:input_width] = @system_arguments[:input_width]
+
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "rounded-right-0"
+        )
+
+        if readonly
+          system_arguments[:readonly] = readonly
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { readonly: "true" } }
+          )
+        end
+
+        Primer::Alpha::TextField.new(**system_arguments)
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:display] = :flex
+        @system_arguments[:align_items] = :flex_end
+
+        @system_arguments[:input_width] = fetch_or_fallback(
+          Primer::OpenProject::InputGroup::INPUT_WIDTH_OPTIONS,
+          @system_arguments[:input_width] || Primer::OpenProject::InputGroup::DEFAULT_INPUT_WIDTH,
+          Primer::OpenProject::InputGroup::DEFAULT_INPUT_WIDTH
+        )
+
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "InputGroup",
+          INPUT_WIDTH_MAPPINGS[@system_arguments[:input_width]]
+        )
+      end
+
+      def render?
+        text_input? && trailing_action?
+      end
+    end
+  end
+end

data/app/components/primer/primer.d.ts

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.pcss

@@ -43,3 +43,4 @@
 @import "./open_project/page_header.pcss";
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
+@import "./open_project/input_group.pcss";

data/app/components/primer/primer.ts

@@ -6,6 +6,7 @@ import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
+import './beta/nav_list_group_element'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/lib/primer/experimental_render_helpers.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalRenderHelpers
+    def self.included(base)
+      base.include(InstanceMethods)
+    end
+
+    # :nodoc:
+    module InstanceMethods
+      def evaluate_block(*args, **kwargs, &block)
+        # Prevent double renders by using the capture method on the component
+        # that originally received the block.
+        #
+        # Handle blocks that originate from C code such as `&:method` by checking
+        # source_location. Such blocks don't allow access to their receiver.
+        return unless block
+
+        return yield(*args, **kwargs) if block&.source_location.nil?
+
+        block_context = block.binding.receiver
+
+        if block_context.class < ActionView::Base
+          block_context.capture(*args, &block)
+        else
+          capture(*args, &block)
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/experimental_slot_helpers.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalSlotHelpers
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    # :nodoc:
+    module ClassMethods
+      def add_polymorphic_slot_type(slot_name:, type:, callable:)
+        slot_def = registered_slots[slot_name]
+        raise "Unknown slot '#{slot_name}'" unless slot_def
+
+        poly_def = define_slot(
+          type,
+          collection: slot_def[:collection],
+          callable: callable
+        )
+
+        registered_slots[slot_name][:renderable_hash][type] = poly_def
+
+        define_method(:"with_#{type}") do |**system_arguments, &block|
+          set_slot(slot_name, poly_def, **system_arguments, &block)
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 17
-      PATCH = 1
+      MINOR = 19
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -218,8 +218,8 @@ module Primer
           path, <<~ERB
             #{YAML.dump(frontmatter)}
             ---
-            <%= @page.data[:description_md] %>
-            <%= @page.data[:args_md] %>
+            <%= @page.data[:description_md].html_safe %>
+            <%= @page.data[:args_md].html_safe %>
           ERB
         )
       end

data/previews/primer/alpha/action_menu_preview.rb

@@ -52,6 +52,67 @@ module Primer
         end
       end
 
+      # @label With groups
+      #
+      # @snapshot interactive
+      def with_groups
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Favorite character"
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Battlestar Galactica")
+            group.with_item(label: "William Adama")
+            group.with_item(label: 'Kara "Starbuck" Thrace')
+            group.with_item(label: 'Sharon "Boomer" Valerii')
+            group.with_item(label: "Gaius Baltar")
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Star Trek")
+            group.with_item(label: "Capt. Jean-luc Picard")
+            group.with_item(label: "Capt. Kathryn M. Janeway")
+            group.with_item(label: "Capt. Benjamin L. Sisko")
+            group.with_item(label: "Capt. James T. Kirk")
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Star Wars")
+            group.with_item(label: "Leia Organa")
+            group.with_item(label: "Luke Skywalker")
+            group.with_item(label: "Han Solo")
+            group.with_item(label: "Chewbacca")
+          end
+        end
+      end
+
+      # @label With items and groups
+      #
+      # @snapshot interactive
+      def with_items_and_groups
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Meal preference"
+          end
+
+          menu.with_item(label: "Meat option")
+          menu.with_divider
+
+          menu.with_group do |group|
+            group.with_heading(title: "Vegetarian options")
+            group.with_item(label: "Grilled portbello mushroom")
+            group.with_item(label: "Polenta")
+            group.with_item(label: "Seitan")
+          end
+
+          menu.with_divider
+          menu.with_item(label: "Fish option")
+        end
+      end
+
       # @label Wide
       #
       # @snapshot interactive
@@ -87,10 +148,12 @@ module Primer
       def single_select
         render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "Fast forward")
-          menu.with_item(label: "Recursive")
-          menu.with_item(label: "Ours")
-          menu.with_item(label: "Resolve")
+          menu.with_item(label: "Fast forward", item_id: :fast_forward)
+          menu.with_item(label: "Recursive", item_id: :recursive)
+          menu.with_item(label: "Ours", item_id: :ours)
+          menu.with_item(label: "Resolve", item_id: :resolve)
+          menu.with_item(label: "Disabled", disabled: true, item_id: :disabled)
+          menu.with_item(label: "Hidden", hidden: true, disabled: true, item_id: :hidden)
         end
       end
 
@@ -105,7 +168,8 @@ module Primer
             username: "langermank",
             full_name: "Katie Langerman",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :katie
           )
 
           menu.with_avatar_item(
@@ -113,7 +177,8 @@ module Primer
             username: "jonrohan",
             full_name: "Jon Rohan",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :jon
           )
 
           menu.with_avatar_item(
@@ -121,7 +186,8 @@ module Primer
             username: "broccolinisoup",
             full_name: "Armağan Ersöz",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :armagan
           )
         end
       end

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

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body do %>
+    <%= render(Primer::Beta::AutoComplete.new(src: url, label_text: "Search", list_id: "list", input_id: "input")) do |a| %>
+      <% a.with_leading_visual_icon(icon: :search) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -152,6 +152,23 @@ module Primer
                              })
       end
 
+      # @label Dialog with AutoComplete text input
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      # @snapshot interactive
+      def with_auto_complete(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider,
+                               url: UrlHelpers.autocomplete_index_path
+                             })
+      end
+
       # @label Page with scrollbar and dialog
       #
       # @param title [String] text

data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb

@@ -0,0 +1,6 @@
+<div style="display: flex">
+  <%= render Primer::Beta::Blankslate.new do |component| %>
+    <% component.with_heading(tag: :h2) { "Heading" } %>
+    <% component.with_description { "Description" } %>
+  <% end %>
+</div>

data/previews/primer/beta/blankslate_preview.rb

@@ -134,6 +134,9 @@ module Primer
           component.with_secondary_action(href: "#").with_content("Learn more about vulnerabilities")
         end
       end
+
+      def inside_flex_container
+      end
     end
   end
 end

data/previews/primer/beta/border_box_preview.rb

@@ -8,8 +8,9 @@ module Primer
       #
       # @param padding [Symbol] select [default, condensed, spacious]
       # @param scheme [Symbol] select [default, neutral, info, warning]
-      def playground(padding: :default, scheme: :default)
-        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+      # @param list_id [String] text
+      def playground(padding: :default, scheme: :default, list_id: nil)
+        render(Primer::Beta::BorderBox.new(padding: padding, list_id: list_id)) do |component|
           component.with_header { "Header" }
           component.with_body { "Body" }
           component.with_row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }

data/previews/primer/beta/nav_list_preview.rb

@@ -106,7 +106,7 @@ module Primer
       # @snapshot
       def show_more_item
         render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
-          list.with_group do |group|
+          list.with_group(id: "foods") do |group|
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")
             group.with_item(label: "Slurm", href: "/foods/slurm")
@@ -114,6 +114,15 @@ module Primer
               item.with_trailing_visual_icon(icon: :plus)
             end
           end
+
+          list.with_group(id: "snacks") do |group|
+            group.with_heading(title: "My favorite snacks")
+            group.with_item(label: "Popplers", href: "/foods/popplers")
+            group.with_item(label: "Slurm", href: "/foods/slurm")
+            group.with_show_more_item(label: "Show more snacks", src: UrlHelpers.nav_list_items_path, pages: 4) do |item|
+              item.with_trailing_visual_icon(icon: :plus)
+            end
+          end
         end
       end
 

data/previews/primer/open_project/input_group_preview.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label InputGroup
+    class InputGroupPreview < ViewComponent::Preview
+      # @label Default
+      # @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_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
+        end
+      end
+
+      # @label Playground
+      # @param trailing_action [Symbol] select [clipboardCopy, icon]
+      # @param value [String]
+      # @param visually_hide_label toggle
+      # @param readonly toggle
+      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
+      def playground(
+        trailing_action: :clipboardCopy,
+        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)
+
+          case trailing_action
+          when :icon
+            menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
+          when :clipboardCopy
+            menu.with_trailing_action_clipboard_copy_button(id: "button-2", value: value, aria: { label: "Copy some text" })
+          else
+            menu.with_trailing_action_clipboard_copy_button(id: "button-3", value: value, aria: { label: "Copy some text" })
+          end
+        end
+      end
+
+      # @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_trailing_action_icon(icon: :check, aria: { label: "Successful" })
+        end
+      end
+
+      # @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_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -217,6 +217,12 @@
         "default": "`nil`",
         "description": "Item label. If no label is provided, content is used."
       },
+      {
+        "name": "item_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
+      },
       {
         "name": "label_classes",
         "type": "String",
@@ -386,12 +392,97 @@
     ]
   },
   {
-    "component": "ActionMenu::List",
+    "component": "ActionMenu::Group",
     "status": "alpha",
     "a11y_reviewed": true,
+    "short_name": "ActionMenuGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
+    "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "HTML ID value."
+      },
+      {
+        "name": "role",
+        "type": "Boolean",
+        "default": "`nil`",
+        "description": "ARIA role describing the function of the list. listbox and menu are a common values."
+      },
+      {
+        "name": "item_classes",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Additional CSS classes to attach to items."
+      },
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:full`",
+        "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
+      },
+      {
+        "name": "show_dividers",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Display a divider above each item in the list when it does not follow a header or divider."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::Heading",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionMenuHeading",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
+    "parameters": [
+
+    ]
+  },
+  {
+    "component": "ActionMenu::List",
+    "status": "alpha",
+    "a11y_reviewed": false,
     "short_name": "ActionMenuList",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::ListWrapper",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "ActionMenuListWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
     "parameters": [
       {
         "name": "menu_id",
@@ -4810,6 +4901,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::InputGroup",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectInputGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/input_group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/input_group/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::PageHeader",
     "status": "open_project",

data/static/audited_at.json

@@ -8,7 +8,10 @@
   "Primer::Alpha::ActionList::Heading": "",
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::ActionMenu": "",
-  "Primer::Alpha::ActionMenu::List": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Group": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Heading": "",
+  "Primer::Alpha::ActionMenu::List": "",
+  "Primer::Alpha::ActionMenu::ListWrapper": "2023-07-10",
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::Banner": "",
@@ -115,6 +118,7 @@
   "Primer::OpenProject::FlexLayout": "",
   "Primer::OpenProject::GridLayout": "",
   "Primer::OpenProject::GridLayout::Area": "",
+  "Primer::OpenProject::InputGroup": "",
   "Primer::OpenProject::PageHeader": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""

data/static/classes.json

@@ -191,6 +191,9 @@
   "Button--iconOnly": [
     "Primer::Beta::Button"
   ],
+  "Button--inactive": [
+    "Primer::Beta::Button"
+  ],
   "Button--invisible": [
     "Primer::Beta::Button"
   ],
@@ -302,6 +305,9 @@
   "FormControl-toggleSwitchInput": [
     "Primer::Alpha::TextField"
   ],
+  "InputGroup": [
+    "Primer::OpenProject::InputGroup"
+  ],
   "Label": [
     "Primer::Beta::Label"
   ],