openproject-primer_view_components 0.52.0 → 0.52.2

data/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb

@@ -5,6 +5,8 @@ module Primer
     class DangerConfirmationDialog
       # Utility component for wrapping DangerConfirmationDialog in a form
       class FormWrapper < Primer::Component
+        status :open_project
+
         def initialize(builder: nil, action: nil, **form_arguments)
           raise ArgumentError, "Pass in either a :builder or :action argument, not both." if builder && action
 

data/app/components/primer/open_project/danger_confirmation_dialog.html.erb

@@ -11,7 +11,7 @@
         <% end %>
       </scrollable-region>
       <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>
-        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { I18n.t("button_close") } %>
+        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { I18n.t("button_cancel") } %>
         <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { I18n.t("button_delete_permanently") } %>
       <% end %>
     <% end %>

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

@@ -12,8 +12,10 @@ module Primer
 
       # A confirmation message with some defaults that are necessary for rendering nicely.
       #
-      # @param heading [String] the heading for the success message
-      # @param description [String] the description for the success message
+      # To render the message heading (required), call the `with_heading` method, which accepts a `:tag` argument, along with the arguments accepted by <%= link_to_component(Primer::Beta::Heading) %>.
+      #
+      # To render the message description, call the `with_description` method, which accepts <%= link_to_system_arguments_docs %>
+      #
       # @param icon_arguments [Hash] the system_arguments for the icon
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :confirmation_message, lambda { |icon_arguments: {}, **system_arguments|
@@ -27,6 +29,8 @@ module Primer
 
       # A checkbox that the user is required to check in order to continue with the destructive action.
       #
+      # To render the checkbox label (required), pass a block that returns a String.
+      #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :confirmation_check_box, lambda { |**system_arguments|
         system_arguments[:display] ||= :flex
@@ -38,7 +42,7 @@ module Primer
         Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox.new(check_box_id: check_box_id, check_box_name: @check_box_name, **system_arguments)
       }
 
-      # Optional additional_details such as grid displaying a list of items to be deleted
+      # Optional additional details, such as grid displaying a list of items to be deleted
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :additional_details, lambda { |**system_arguments|
@@ -57,11 +61,7 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash
-      # to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself.
-      # `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is 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.
+      # @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is 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.
       # @param id [String] The id of the dialog.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(

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

@@ -6,10 +6,12 @@ module Primer
     class FeedbackDialog < Primer::Component
       status :open_project
 
-      # A feedback message with some defaults that are necessary for rendering nicely
+      # A feedback message with some defaults that are necessary for rendering nicely.
+      #
+      # To render the message heading (required), call the `with_heading` method, which accepts a `:tag` argument, along with the arguments accepted by <%= link_to_component(Primer::Beta::Heading) %>.
+      #
+      # To render the message description, call the `with_description` method, which accepts <%= link_to_system_arguments_docs %>
       #
-      # @param heading [String] the heading for the success message
-      # @param description [String] the description for the success message
       # @param icon_arguments [Hash] the system_arguments for the icon
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :feedback_message, lambda { |icon_arguments: {}, **system_arguments|
@@ -17,7 +19,7 @@ module Primer
         Primer::OpenProject::FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
       }
 
-      # Optional additional_details like a form input or toast.
+      # Optional additional details, like a form input or toast.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :additional_details, lambda { |**system_arguments|

data/app/lib/primer/forms/acts_as_component.rb

@@ -66,30 +66,45 @@ module Primer
         @compiled = true
       end
 
-      private
-
       def template_root_path
         return @template_root_path if defined?(@template_root_path)
 
         form_path = Utils.const_source_location(self.name)
-        @template_root_path = if form_path
-          File.join(File.dirname(form_path), self.name.demodulize.underscore)
+        @template_root_path =
+          if form_path
+            File.join(File.dirname(form_path), self.name.demodulize.underscore)
+          end
+      end
+
+      def base_template_path
+        return @base_template_path if defined?(@base_template_path)
+        base_path = Utils.const_source_location(self.name)
+
+        if base_path
+          @base_template_path = File.dirname(base_path)
+        else
+          warn "Could not identify the template for #{self}"
         end
       end
 
+      private
+
       def template_globs
         @template_globs ||= []
       end
 
       def compile_templates_in(template_glob)
-        pattern = if Pathname(template_glob.glob_pattern).absolute?
-                    template_glob.glob_pattern
-                  else
-                    # skip compilation for anonymous form classes, as in tests
-                    return unless template_root_path
-
-                    File.join(template_root_path, template_glob.glob_pattern)
-                  end
+        pattern = template_glob.glob_pattern
+        pattern = pattern.gsub("%{base_template_path}", base_template_path) if base_template_path
+        pattern =
+          if Pathname(pattern).absolute?
+            pattern
+          else
+            # skip compilation for anonymous form classes, as in tests
+            return unless template_root_path
+
+            File.join(template_root_path, pattern)
+          end
 
         template_paths = Dir.glob(pattern)
 
@@ -117,11 +132,11 @@ module Primer
         handler = ActionView::Template.handler_for_extension("erb")
         template = File.read(path)
         template_params = TemplateParams.new({
-                                               source: template,
-                                               identifier: __FILE__,
-                                               type: "text/html",
-                                               format: "text/html"
-                                             })
+          source: template,
+          identifier: __FILE__,
+          type: "text/html",
+          format: "text/html"
+        })
 
         # change @output_buffer ivar to output_buffer method call
         BufferRewriter.rewrite(

data/app/lib/primer/forms/base_component.rb

@@ -7,18 +7,11 @@ module Primer
       include Primer::ClassNameHelper
       extend ActsAsComponent
 
-      def self.compile!
-        base_path = Utils.const_source_location(self.name)
-
-        unless base_path
-          warn "Could not identify the template for #{base}"
-          return
-        end
-
-        dir = File.dirname(base_path)
-        renders_template File.join(dir, "#{self.name.demodulize.underscore}.html.erb"), :render_template
-
-        super
+      def self.inherited(base)
+        base.renders_template(
+          File.join("%{base_template_path}", "#{base.name.demodulize.underscore}.html.erb"),
+          :render_template
+        )
       end
 
       delegate :required?, :disabled?, :hidden?, to: :@input

data/app/lib/primer/forms/dsl/text_field_input.rb

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 module Primer
   module Forms
     module Dsl
@@ -7,7 +5,7 @@ module Primer
       class TextFieldInput < Input
         attr_reader(
           *%i[
-            name label show_clear_button leading_visual leading_spinner clear_button_id
+            name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id
             visually_hide_label inset monospace field_wrap_classes auto_check_src
           ]
         )
@@ -20,6 +18,7 @@ module Primer
 
           @show_clear_button = system_arguments.delete(:show_clear_button)
           @leading_visual = system_arguments.delete(:leading_visual)
+          @trailing_visual = system_arguments.delete(:trailing_visual)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id)
           @inset = system_arguments.delete(:inset)
@@ -48,6 +47,14 @@ module Primer
         alias inset? inset
         alias monospace? monospace
 
+        def trailing_visual?
+          !!@trailing_visual
+        end
+
+        def leading_visual?
+          !!@leading_visual
+        end
+
         def to_component
           TextField.new(input: self)
         end
@@ -60,10 +67,6 @@ module Primer
           true
         end
 
-        def leading_visual?
-          !!@leading_visual
-        end
-
         def validation_arguments
           if auto_check_src.present?
             super.merge(

data/app/lib/primer/forms/text_field.html.erb

@@ -17,5 +17,10 @@
         <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
       </button>
     <% end %>
+    <% if @input.trailing_visual %>
+      <div class="FormControl-input-trailingVisualWrap">
+        <%= render(trailing_visual_component) %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>

data/app/lib/primer/forms/text_field.rb

@@ -23,6 +23,7 @@ module Primer
           "FormControl-input-wrap",
           INPUT_WRAP_SIZE[input.size],
           { "FormControl-input-wrap--trailingAction": @input.show_clear_button? },
+          { "FormControl-input-wrap--trailingVisual": @input.trailing_visual? },
           { "FormControl-input-wrap--leadingVisual": @input.leading_visual? }
         ]
         wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
@@ -43,6 +44,42 @@ module Primer
             )
           end
       end
+
+      def trailing_visual_component
+        return @trailing_visual_component if defined?(@trailing_visual_component)
+        visual = @input.trailing_visual
+
+        # Render icon if specified
+        @trailing_visual_component =
+          if (icon_arguments = visual[:icon])
+            Primer::Beta::Octicon.new(**icon_arguments)
+          elsif (label_arguments = visual[:label])
+            # Render label if specified
+            label_arguments[:classes] = class_names(
+              label_arguments.delete(:classes),
+              "FormControl-input-trailingVisualLabel"
+            )
+
+            text = label_arguments.delete(:text)
+            Primer::Beta::Label.new(**label_arguments).with_content(text)
+          elsif (counter_arguments = visual[:counter])
+            # Render counter if specified
+            counter_arguments[:classes] = class_names(
+              counter_arguments.delete(:classes),
+              "FormControl-input-trailingVisualCounter"
+            )
+
+            Primer::Beta::Counter.new(**counter_arguments)
+          elsif (truncate_arguments = visual[:text])
+            # Render text if specified
+            truncate_arguments[:classes] = class_names(
+              truncate_arguments.delete(:classes),
+              "FormControl-input-trailingVisualText"
+            )
+            text = truncate_arguments.delete(:text)
+            Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
+          end
+      end
     end
   end
 end

data/lib/primer/classify/utilities.yml

@@ -1939,4 +1939,4 @@
   - overflow-y-visible
   - overflow-sm-y-visible
   - overflow-lg-y-visible
-  - overflow-xl-y-visible
+  - overflow-xl-y-visible

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 52
-      PATCH = 0
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/text_field_preview.rb

@@ -175,6 +175,36 @@ module Primer
         render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
       end
 
+      # @label With trailing icon
+      # @snapshot
+      def with_trailing_icon
+        render(Primer::Alpha::TextField.new(trailing_visual: { icon: { icon: :search } }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With trailing text
+      # @snapshot
+      def with_trailing_text
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With trailing long text
+      # @snapshot
+      def with_trailing_long_text
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With trailing counter
+      # @snapshot
+      def with_trailing_counter
+        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With trailing label
+      # @snapshot
+      def with_trailing_label
+        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
+      end
+
       # @label With leading visual
       # @snapshot
       def with_leading_visual

data/static/arguments.json

@@ -5105,6 +5105,73 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::DangerConfirmationDialog",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDangerConfirmationDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/default/",
+    "parameters": [
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is 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."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The id of the dialog."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDangerConfirmationDialogConfirmationCheckBox",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/confirmation_check_box.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/confirmation_check_box/default/",
+    "parameters": [
+      {
+        "name": "check_box_id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The id of the check_box input."
+      },
+      {
+        "name": "check_box_name",
+        "type": "String",
+        "default": "N/A",
+        "description": "The name of the check_box input."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::DangerConfirmationDialog::FormWrapper",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDangerConfirmationDialogFormWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/form_wrapper/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "OpenProject::DragHandle",
     "status": "open_project",

data/static/audited_at.json

@@ -118,6 +118,9 @@
   "Primer::Navigation::TabComponent": "",
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
+  "Primer::OpenProject::DangerConfirmationDialog": "",
+  "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox": "",
+  "Primer::OpenProject::DangerConfirmationDialog::FormWrapper": "",
   "Primer::OpenProject::DragHandle": "",
   "Primer::OpenProject::FeedbackDialog": "",
   "Primer::OpenProject::FeedbackMessage": "",

data/static/constants.json

@@ -1561,6 +1561,17 @@
   "Primer::OpenProject::BorderGrid::Cell": {
     "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::DangerConfirmationDialog": {
+    "ConfirmationCheckBox": "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
+    "FormWrapper": "Primer::OpenProject::DangerConfirmationDialog::FormWrapper",
+    "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::GeneratedSlotMethods"
+  },
+  "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox": {
+    "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox::GeneratedSlotMethods"
+  },
+  "Primer::OpenProject::DangerConfirmationDialog::FormWrapper": {
+    "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::FormWrapper::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::DragHandle": {
     "DEFAULT_SIZE": "small",
     "GeneratedSlotMethods": "Primer::OpenProject::DragHandle::GeneratedSlotMethods",

data/static/form_previews.json

@@ -13,6 +13,11 @@
         "name": "multi_text_field_form",
         "snapshot": "true"
       },
+      {
+        "preview_path": "primer/forms/custom_width_fields_form",
+        "name": "custom_width_fields_form",
+        "snapshot": "false"
+      },
       {
         "preview_path": "primer/forms/text_field_and_checkbox_form",
         "name": "text_field_and_checkbox_form",