openproject-primer_view_components 0.50.1 → 0.52.0

data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.ts

@@ -0,0 +1,36 @@
+import {controller, target} from '@github/catalyst'
+
+const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
+
+@controller
+class DangerConfirmationDialogFormHelperElement extends HTMLElement {
+  @target checkbox: HTMLInputElement
+
+  get submitButton() {
+    return this.querySelector<HTMLInputElement | HTMLButtonElement>(SUBMIT_BUTTON_SELECTOR)!
+  }
+
+  connectedCallback() {
+    this.#reset()
+  }
+
+  toggle(): void {
+    this.submitButton.disabled = !this.checkbox.checked
+  }
+
+  #reset(): void {
+    this.checkbox.checked = false
+    this.toggle()
+  }
+}
+
+declare global {
+  interface Window {
+    DangerConfirmationDialogFormHelperElement: typeof DangerConfirmationDialogFormHelperElement
+  }
+}
+
+if (!window.customElements.get('danger-confirmation-dialog-form-helper')) {
+  window.DangerConfirmationDialogFormHelperElement = DangerConfirmationDialogFormHelperElement
+  window.customElements.define('danger-confirmation-dialog-form-helper', DangerConfirmationDialogFormHelperElement)
+}

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

@@ -1,8 +1,8 @@
 <%= render @dialog do |dialog| %>
   <% dialog.with_body do %>
     <%= feedback_message %>
-    <% if additional_content.present? %>
-      <%= additional_content %>
+    <% if additional_details.present? %>
+      <%= additional_details %>
     <% end %>
   <% end %>
   <% dialog.with_footer do %>

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

@@ -17,15 +17,15 @@ module Primer
         Primer::OpenProject::FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
       }
 
-      # Optional additional_content 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_content, lambda { |**system_arguments|
+      renders_one :additional_details, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :div
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
-          "FeedbackDialog-additionalContent"
+          "FeedbackDialog-additionalDetails"
         )
 
         system_arguments[:display] ||= :flex

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

@@ -8,6 +8,7 @@ import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
 import './shared_events';
+import './utils';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -27,3 +28,4 @@ import './alpha/select_panel_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
+import './open_project/danger_confirmation_dialog_form_helper';

data/app/components/primer/primer.js

@@ -8,6 +8,7 @@ import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
 import './shared_events';
+import './utils';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -27,3 +28,4 @@ import './alpha/select_panel_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
+import './open_project/danger_confirmation_dialog_form_helper';

data/app/components/primer/primer.ts

@@ -8,6 +8,7 @@ import './dialog_helper'
 import './focus_group'
 import './scrollable_region'
 import './shared_events'
+import './utils'
 import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
@@ -27,3 +28,4 @@ import './alpha/select_panel_element'
 import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'
+import './open_project/danger_confirmation_dialog_form_helper'

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

@@ -0,0 +1 @@
+export declare const observeMutationsUntilConditionMet: (element: Element, condition: () => boolean, body: () => void) => void;

data/app/components/primer/utils.js

@@ -0,0 +1,16 @@
+// Waits for condition to return true. If it returns false initially, this function creates a
+// MutationObserver that calls body() whenever the contents of the component change.
+export const observeMutationsUntilConditionMet = (element, condition, body) => {
+    if (condition()) {
+        body();
+    }
+    else {
+        const mutationObserver = new MutationObserver(() => {
+            if (condition()) {
+                body();
+                mutationObserver.disconnect();
+            }
+        });
+        mutationObserver.observe(element, { childList: true, subtree: true });
+    }
+};

data/app/components/primer/utils.ts

@@ -0,0 +1,16 @@
+// Waits for condition to return true. If it returns false initially, this function creates a
+// MutationObserver that calls body() whenever the contents of the component change.
+export const observeMutationsUntilConditionMet = (element: Element, condition: () => boolean, body: () => void) => {
+  if (condition()) {
+    body()
+  } else {
+    const mutationObserver = new MutationObserver(() => {
+      if (condition()) {
+        body()
+        mutationObserver.disconnect()
+      }
+    })
+
+    mutationObserver.observe(element, {childList: true, subtree: true})
+  }
+}

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

@@ -50,8 +50,6 @@ module Primer
       TemplateGlob = Struct.new(:glob_pattern, :method_name, :on_compile_callback)
       TemplateParams = Struct.new(:source, :identifier, :type, :format, keyword_init: true)
 
-      attr_accessor :template_root_path
-
       def renders_templates(glob_pattern, method_name = nil, &block)
         template_globs << TemplateGlob.new(glob_pattern, method_name, block)
       end
@@ -70,6 +68,15 @@ module Primer
 
       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)
+        end
+      end
+
       def template_globs
         @template_globs ||= []
       end

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

@@ -29,11 +29,6 @@ module Primer
         end
 
         def inherited(base)
-          form_path = Utils.const_source_location(base.name)
-          return unless form_path
-
-          base.template_root_path = File.join(File.dirname(form_path), base.name.demodulize.underscore)
-
           base.renders_template "after_content.html.erb" do
             base.instance_variable_set(:@has_after_content, true)
           end

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

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

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

@@ -1,5 +1,5 @@
 <div class="FormControl-radio-group-wrap">
-  <%= content_tag(:fieldset, **@input.input_arguments) do %>
+  <%= content_tag(:fieldset, role: 'radiogroup', **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>

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

@@ -14,13 +14,28 @@ module Primer
       # for the file in the configured autoload paths. Doing so relies on Rails' autoloading
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
+      #
+      # Now that the Ruby bug above has been fixed and released, this method should be used only
+      # as a fallback for older Rubies.
       def const_source_location(class_name)
         return nil unless class_name
 
+        if (location = Object.const_source_location(class_name)&.[](0))
+          return location
+        end
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 
-        ActiveSupport::Dependencies.autoload_paths.each do |autoload_path|
+        # Prefer Zeitwerk-managed paths, falling back to ActiveSupport::Dependencies if Zeitwerk
+        # is disabled or not in use (i.e. the case for older Rails versions).
+        autoload_paths = if Rails.respond_to?(:autoloaders) && Rails.autoloaders.zeitwerk_enabled?
+          Rails.autoloaders.main.dirs
+        else
+          ActiveSupport::Dependencies.autoload_paths
+        end
+
+        autoload_paths.each do |autoload_path|
           absolute_path = File.join(autoload_path, class_path)
           return absolute_path if File.exist?(absolute_path)
         end

data/lib/primer/view_components/version.rb

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

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

@@ -1,11 +1,9 @@
-<div style="height: 400px"></div>
-
-<div style="position: relative">
+<div style="height: 1000px; overflow: auto">
+  <div style="height: 400px"></div>
   <%= render Primer::Alpha::ActionMenu.new(anchor_align: :end) do |c| %>
     <% c.with_show_button { "Edit" } %>
     <% c.with_item(tag: :button, type: "button", label: "Rename") %>
     <% c.with_item(tag: :button, type: "button", scheme: :danger, label: "Remove") %>
   <% end %>
+  <div style="height: 1400px"></div>
 </div>
-
-<div style="height: 1400px"></div>

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

@@ -0,0 +1,13 @@
+<%= render(Primer::OpenProject::DangerConfirmationDialog.new(id: "my-dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_confirmation_message(icon_arguments: { icon: icon, color: icon_color }) do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Proceed with danger?") %>
+    <% message.with_description_content("This action is not reversible and may cause permanent damage.") if show_description %>
+  <% end %>
+  <% if show_additional_details %>
+    <% dialog.with_additional_details do %>
+      <%= render(Primer::Alpha::Banner.new) { "Some additional details below" } %>
+    <% end %>
+  <% end %>
+  <% dialog.with_confirmation_check_box_content(check_box_text) %>
+<% end %>

data/previews/primer/open_project/danger_confirmation_dialog_preview/with_additional_details.html.erb

@@ -0,0 +1,40 @@
+<%= render(Primer::OpenProject::DangerConfirmationDialog.new) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_confirmation_message do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Delete 5 work packages?") %>
+  <% end %>
+  <% dialog.with_additional_details do %>
+    <%= render(Primer::Beta::BorderBox.new(spacious: false)) do |grid| %>
+      <% 5.times do %>
+        <% grid.with_row do %>
+          <%= render(Primer::OpenProject::FlexLayout.new) do |flex|
+            flex.with_column(mr: 2) do
+              render(Primer::Beta::Text.new) do
+                %w(EPIC FEATURE IDEA).sample
+              end
+            end
+            flex.with_column(mr: 2) do
+              work_package_id = rand(999_999)
+              render(Primer::Beta::Link.new(
+                href: "/work_packages/#{work_package_id}"),
+                title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat.",
+                target: :_blank,
+                font_size: :small,
+                color: :muted
+              ) { "##{work_package_id}" }
+            end
+            flex.with_column do
+              render(Primer::Beta::Label.new(scheme: :accent, size: :medium, inline: true)) do
+                ["New", "Confirmed", "In specification"].sample
+              end
+            end
+          end %>
+          <%= render(Primer::Beta::Text.new) do %>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat.
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
+<% end %>

data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::OpenProject::DangerConfirmationDialog.new(
+    title: "Delete dialog",
+    form_arguments: { action: generic_form_submission_path(format: route_format) }
+  )) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_confirmation_message do |message|
+      message.with_heading(tag: :h2).with_content("Permanently delete?")
+      message.with_description_content("This action is not reversible. Please proceed with caution.")
+     end %>
+  <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
+<% end %>

data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form.html.erb

@@ -0,0 +1,13 @@
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |f| %>
+  <%= render(Primer::OpenProject::DangerConfirmationDialog.new(
+        title: "Delete dialog",
+        form_arguments: { builder: f, name: "confirm_very_dangerous_action" }
+      )) do |dialog| %>
+    <% dialog.with_show_button { "Click me" } %>
+    <% dialog.with_confirmation_message do |message|
+        message.with_heading(tag: :h2).with_content("Permanently delete?")
+        message.with_description_content("This action is not reversible. Please proceed with caution.")
+       end %>
+    <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/danger_confirmation_dialog_preview.rb

@@ -0,0 +1,71 @@
+# 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 DangerConfirmationDialog
+    class DangerConfirmationDialogPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot interactive
+      def default
+        render(Primer::OpenProject::DangerConfirmationDialog.new(title: "Delete dialog")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_confirmation_message do |message|
+            message.with_heading(tag: :h2) { "Permanently delete?" }
+            message.with_description_content("This action is not reversible. Please proceed with caution.")
+          end
+          dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
+        end
+      end
+
+      # @label Playground
+      # @param icon [Symbol] octicon
+      # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
+      # @param show_description toggle
+      # @param show_additional_details toggle
+      # @param check_box_text [String]
+      def playground(
+        icon: :"alert",
+        icon_color: :danger,
+        show_description: true,
+        show_additional_details: false,
+        check_box_text: "I understand that this deletion cannot be reversed"
+      )
+        render_with_template(locals: { icon: icon,
+                                       icon_color: icon_color,
+                                       show_description: show_description,
+                                       show_additional_details: show_additional_details,
+                                       check_box_text: check_box_text })
+      end
+
+      # @label With form using FormBuilder
+      def with_form_builder_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label With form
+      def with_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label With additional details
+      def with_additional_details
+        render_with_template(locals: {})
+      end
+
+      # @label With custom icon
+      def custom_icon
+        render(Primer::OpenProject::DangerConfirmationDialog.new(title: "Delete dialog")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_confirmation_message(icon_arguments: { icon: :"alert-fill" }) do |message|
+            message.with_heading(tag: :h2) { "Permanently delete?" }
+            message.with_description_content("This action is not reversible and will remove all containing sub-tiems. Please proceed with caution.")
+          end
+          dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
+        end
+      end
+    end
+  end
+end

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

@@ -4,9 +4,9 @@
     <% message.with_heading(tag: :h2).with_content("Awesome!") %>
     <% message.with_description { "Great! Everything worked well." } if show_description %>
   <% end %>
-  <% if show_additional_content %>
-    <% dialog.with_additional_content(display: :inline) do %>
-      <%= render(Primer::Alpha::Banner.new) { "Some additional content below" } %>
+  <% if show_additional_details %>
+    <% dialog.with_additional_details(display: :inline) do %>
+      <%= render(Primer::Alpha::Banner.new) { "Some additional details below" } %>
       <% end %>
   <% end %>
   <% if custom_footer %>

data/previews/primer/open_project/feedback_dialog_preview/{additional_content.html.erb → with_additional_details.html.erb}

@@ -3,7 +3,7 @@
   <% dialog.with_feedback_message do |message| %>
     <% message.with_heading(tag: :h2).with_content("Action successful") %>
   <% end %>
-  <% dialog.with_additional_content do %>
+  <% dialog.with_additional_details do %>
     <% render(Primer::Beta::Text.new) { "You can render whatever component you want here." } %>
   <% end %>
 <% end %>

data/previews/primer/open_project/feedback_dialog_preview.rb

@@ -24,19 +24,19 @@ module Primer
       # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
       # @param loading_state [Boolean] toggle
       # @param show_description toggle
-      # @param show_additional_content toggle
+      # @param show_additional_details toggle
       # @param custom_footer toggle
-      def playground(icon: :"check-circle", icon_color: :success, loading_state: false, show_description: true, show_additional_content: false, custom_footer: false)
+      def playground(icon: :"check-circle", icon_color: :success, loading_state: false, show_description: true, show_additional_details: false, custom_footer: false)
         render_with_template(locals: { icon: icon,
                                        icon_color: icon_color,
                                        loading_state: loading_state,
                                        show_description: show_description,
-                                       show_additional_content: show_additional_content,
+                                       show_additional_details: show_additional_details,
                                        custom_footer: custom_footer })
       end
 
-      # @label With additional content
-      def additional_content
+      # @label With additional details
+      def with_additional_details
         render_with_template(locals: {})
       end
 
@@ -52,7 +52,7 @@ module Primer
       end
 
       # @label With custom footer
-      def custom_footer
+      def with_custom_footer
         render_with_template(locals: {})
       end
 

data/static/classes.json

@@ -263,6 +263,9 @@
   "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-checkbox": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-checkbox-wrap": [
     "Primer::Alpha::TextField"
   ],
@@ -305,6 +308,9 @@
   "FormControl-monospace": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-radio": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],

data/static/info_arch.json

@@ -17497,8 +17497,8 @@
         ]
       },
       {
-        "name": "additional_content",
-        "description": "Optional additional_content like a form input or toast.",
+        "name": "additional_details",
+        "description": "Optional additional_details like a form input or toast.",
         "parameters": [
           {
             "name": "system_arguments",
@@ -17547,8 +17547,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/feedback_dialog/additional_content",
-        "name": "additional_content",
+        "preview_path": "primer/open_project/feedback_dialog/with_additional_details",
+        "name": "with_additional_details",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -17573,8 +17573,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/feedback_dialog/custom_footer",
-        "name": "custom_footer",
+        "preview_path": "primer/open_project/feedback_dialog/with_custom_footer",
+        "name": "with_custom_footer",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

data/static/previews.json

@@ -3680,8 +3680,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/feedback_dialog/additional_content",
-        "name": "additional_content",
+        "preview_path": "primer/open_project/feedback_dialog/with_additional_details",
+        "name": "with_additional_details",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -3706,8 +3706,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/feedback_dialog/custom_footer",
-        "name": "custom_footer",
+        "preview_path": "primer/open_project/feedback_dialog/with_custom_footer",
+        "name": "with_custom_footer",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [