openproject-primer_view_components 0.43.1 → 0.44.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e105dba73aa891e37065e362a68bfb937694b8f94e41ee4f097f2566007eb0ca
-  data.tar.gz: 03b7e1291daddc054605b01df516b261fd9a97c36fe111247ddd056e3b7554c1
+  metadata.gz: e2c8b72cee2a4e5d81359374555888262643967a991bcfaee6f03abd73f0c4db
+  data.tar.gz: cd1858331f693d28d9e02c4a5aef2dcc6ca24b8f9deec6f39b58900b79eb2282
 SHA512:
-  metadata.gz: c3525069a63ab515e716f213e82056b7f22d8e40ae64efe5194d25062fd7caaaa8490c7770497e2cd967db298cbcc37ce9a8f882c1e30fd59938a76d5fb97454
-  data.tar.gz: ffd61ce4dfb0e3d285e469374279931ddd516b1590eea60422a6c03063956ab9583e6cb929ff28b11fb27883b06e381e2c0908b4b66ec2df61085b8ec2a0a16d
+  metadata.gz: 178952d872a6290f49a9503cfa82851300bf88aef45f01543e8f52eb1664974854416948f60643101dd01ffbc26aa2f0a0af1aa8891d811d9b50163696552dab
+  data.tar.gz: 1ec117ba4b39632420f716559d6d3bd100b5c3bf4564b35479ef3af566ba7a31deef0e3f753fcb94f832a52f58f15727aad45e2d8f43c48f6beb5041354d7c48

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.44.0
+
+### Minor Changes
+
+- [#167](https://github.com/opf/primer_view_components/pull/167) [`1049ebf`](https://github.com/opf/primer_view_components/commit/1049ebf66abb16efc271212a45d6cc655abd301f) Thanks [@HDinger](https://github.com/HDinger)! - Add `FeedbackDialog` and `FeedbackMessage` components to display different kinds of user feedback
+
 ## 0.43.1
 
 ### Patch Changes

data/app/assets/images/loading_indicator.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g><rect x="-16" y="-16" width="32" height="32" fill="none" stroke="#a3eea8" stroke-width="4" rx="10" transform="translate(32 32)"><animate attributeName="stroke-width" attributeType="XML" dur="4s" repeatCount="indefinite" values="0;4;0;0" keyTimes="0;0.35;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/><animateTransform attributeName="transform" additive="sum" attributeType="XML" type="scale" dur="4s" repeatCount="indefinite" values="0.5;0.5;1.6;0.5" keyTimes="0;0.35;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></rect><rect x="-16" y="-16" width="32" height="32" fill="#35c53f" rx="5" transform="translate(32 32)"><animateTransform attributeName="transform" additive="sum" attributeType="XML" type="scale" dur="4s" repeatCount="indefinite" values="1;1.3;1.1;1" keyTimes="0;0.5;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></rect><animateTransform attributeName="transform" attributeType="XML" additive="sum" type="rotate" dur="4s" repeatCount="indefinite" values="45 32 32;1080 32 32;945 32 32" keyTimes="0;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></g></svg>

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

@@ -0,0 +1,15 @@
+<%= render @dialog do |dialog| %>
+  <% dialog.with_body do %>
+    <%= feedback_message %>
+    <% if additional_content.present? %>
+      <%= additional_content %>
+    <% end %>
+  <% end %>
+  <% dialog.with_footer do %>
+    <% if footer.present? %>
+      <%= footer %>
+    <% else %>
+      <%= render(Primer::Beta::Button.new("data-close-dialog-id": @system_arguments[:id])) { I18n.t("button_close") } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A pre-configured dialog which includes the FeedbackMessage
+    class FeedbackDialog < Primer::Component
+      status :open_project
+
+      # A feedback 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
+      # @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|
+        system_arguments[:border] = false
+        Primer::OpenProject::FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
+      }
+
+      # Optional additional_content like a form input or toast.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :additional_content, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackDialog-additionalContent"
+        )
+
+        system_arguments[:display] ||= :flex
+        system_arguments[:align_items] ||= :center
+        system_arguments[:justify_content] ||= :center
+        system_arguments[:mb] ||= 3
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      renders_one :footer
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackDialog"
+        )
+        @system_arguments[:id] ||= self.class.generate_id
+
+        @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
+      end
+
+      delegate :header?, :header, :with_header, :with_header_content,
+               :show_button?, :show_button, :with_show_button, :with_show_button_content,
+               to: :@dialog
+
+      private
+
+      def before_render
+        content
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= render(@blankslate) %>

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A view component for messages, inspired by the Primer Blankslate,
+    # which serves a different use-case (messages for when data is missing).
+    # We decided to wrap the Blankslate, because we don't want to have to adapt
+    # lots of different usages if Primer decides to change the Blankslate
+    # in a way that does not go well with our "misuse".
+    class FeedbackMessage < Primer::Component
+      status :open_project
+
+      # @param icon_arguments [Hash] special arguments for the icon
+      # @param loading [Boolean] Show a loading spinner instead of an icon
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon_arguments: {}, loading: false, **system_arguments)
+        @system_arguments = system_arguments
+        @icon_arguments = icon_arguments
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "FeedbackMessage"
+        )
+
+        @icon_arguments[:icon] ||= :"check-circle"
+        @icon_arguments[:color] ||= :success
+
+        @loading = loading
+
+        @blankslate = Primer::Beta::Blankslate.new(**@system_arguments)
+      end
+
+      delegate :description?, :description, :with_description, :with_description_content,
+               :heading?, :heading, :with_heading, :with_heading_content,
+               to: :@blankslate
+
+      private
+
+      def before_render
+        if @loading
+          @blankslate.with_visual_image(src: asset_path("loading_indicator.svg"), alt: I18n.t(:label_loading))
+        else
+          @blankslate.with_visual_icon(size: :medium, **@icon_arguments)
+        end
+
+        content
+      end
+
+      def render?
+        heading.present?
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

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

@@ -0,0 +1,9 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Action successful") %>
+  <% end %>
+  <% dialog.with_additional_content do %>
+    <% render(Primer::Beta::Text.new) { "You can render whatever component you want here." } %>
+  <%  end %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message do |message| %>
+    <% message.with_heading(tag: :h2).with_content("Action successful") %>
+  <% end %>
+  <% dialog.with_footer do %>
+    <%= render(Primer::Beta::Button.new("data-close-dialog-id": "my-dialog")) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Accept" } %>
+  <%  end %>
+<% end %>

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

@@ -0,0 +1,18 @@
+<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Click me" } %>
+  <% dialog.with_feedback_message(icon_arguments: { icon: icon, color: icon_color }, loading: loading_state) do |message| %>
+    <% 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" } %>
+      <% end %>
+  <% end %>
+  <%  if custom_footer %>
+    <% dialog.with_footer do %>
+      <%= render(Primer::Beta::Button.new("data-close-dialog-id": "my-dialog")) { "Cancel" } %>
+      <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Accept" } %>
+      <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/feedback_dialog_preview.rb

@@ -0,0 +1,70 @@
+# 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 FeedbackDialog
+    class FeedbackDialogPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot interactive
+      def default
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Success dialog")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message do |message|
+            message.with_heading(tag: :h2) { "Success" }
+            message.with_description { "Great! Everything worked well." }
+          end
+        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 loading_state [Boolean] toggle
+      # @param show_description toggle
+      # @param show_additional_content 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)
+        render_with_template(locals: { icon: icon,
+                                       icon_color: icon_color,
+                                       loading_state: loading_state,
+                                       show_description: show_description,
+                                       show_additional_content: show_additional_content,
+                                       custom_footer: custom_footer })
+      end
+
+      # @label With additional content
+      def additional_content
+        render_with_template(locals: {})
+      end
+
+      # @label With custom icon
+      def custom_icon
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Error message")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message(icon_arguments: { icon: :"x-circle", color: :danger }) do |message|
+            message.with_heading(tag: :h2) { "Ups, something went wrong" }
+            message.with_description { "Please try again or contact your administrator if the issue persists." }
+          end
+        end
+      end
+
+      # @label With custom footer
+      def custom_footer
+        render_with_template(locals: {})
+      end
+
+      # @label With loading spinner
+      def loading_spinner
+        render(Primer::OpenProject::FeedbackDialog.new(title: "Waiting...")) do |dialog|
+          dialog.with_show_button { "Click me" }
+          dialog.with_feedback_message(loading: true) do |message|
+            message.with_heading(tag: :h2) { "Please wait, your request is being processed." }
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/feedback_message_preview.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label FeedbackMessage
+    class FeedbackMessagePreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default
+        render Primer::OpenProject::FeedbackMessage.new do |component|
+          component.with_heading(tag: :h2) { "Success" }
+          component.with_description { "You successfully created your first FeedbackMessage component" }
+        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 loading_state [Boolean] toggle
+      # @param title [String]
+      # @param description [String]
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      def playground(icon: "check-circle", icon_color: :success, loading_state: false, title: "Yeah!", description: "Some description below...", narrow: false, spacious: false, border: false)
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: icon, color: icon_color}, loading: loading_state, narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content(title)
+          component.with_description { description }
+        end
+      end
+
+      # @label With custom icon
+      def with_custom_icon
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"op-enterprise-addons", classes: "upsale-colored" }) do |component|
+          component.with_heading(tag: :h2) { "You are a hero" }
+          component.with_description { "Thanks for supporting an open source project!" }
+        end
+      end
+
+      # @label With custom color
+      def with_custom_color
+        render Primer::OpenProject::FeedbackMessage.new(icon_arguments: { icon: :"x-circle", color: :danger }) do |component|
+          component.with_heading(tag: :h2) { "Ups, something went wrong" }
+          component.with_description { "Please try again or contact your administrator." }
+        end
+      end
+
+      # @label With loading spinner
+      def loading_spinner
+        render(Primer::OpenProject::FeedbackMessage.new(loading: true)) do |component|
+          component.with_heading(tag: :h2) { "Please wait, your request is being processed." }
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -5039,6 +5039,50 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::FeedbackDialog",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::FeedbackMessage",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackMessage",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_message.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_message/default/",
+    "parameters": [
+      {
+        "name": "icon_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "special arguments for the icon"
+      },
+      {
+        "name": "loading",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Show a loading spinner instead of an icon"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::FlexLayout",
     "status": "open_project",

data/static/audited_at.json

@@ -118,6 +118,8 @@
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
   "Primer::OpenProject::DragHandle": "",
+  "Primer::OpenProject::FeedbackDialog": "",
+  "Primer::OpenProject::FeedbackMessage": "",
   "Primer::OpenProject::FlexLayout": "",
   "Primer::OpenProject::GridLayout": "",
   "Primer::OpenProject::GridLayout::Area": "",

data/static/constants.json

@@ -1422,6 +1422,10 @@
       "medium"
     ]
   },
+  "Primer::OpenProject::FeedbackDialog": {
+  },
+  "Primer::OpenProject::FeedbackMessage": {
+  },
   "Primer::OpenProject::FlexLayout": {
   },
   "Primer::OpenProject::GridLayout": {

data/static/info_arch.json

@@ -17294,6 +17294,275 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::FeedbackDialog",
+    "description": "A pre-configured dialog which includes the FeedbackMessage",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::FeedbackDialog",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "feedback_message",
+        "description": "A feedback message with some defaults that are necessary for rendering nicely",
+        "parameters": [
+          {
+            "name": "heading",
+            "type": "String",
+            "default": "N/A",
+            "description": "the heading for the success message"
+          },
+          {
+            "name": "description",
+            "type": "String",
+            "default": "N/A",
+            "description": "the description for the success message"
+          },
+          {
+            "name": "icon_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "the system_arguments for the icon"
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "additional_content",
+        "description": "Optional additional_content like a form input or toast.",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "footer",
+        "description": null,
+        "parameters": [
+
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/feedback_dialog/default",
+        "name": "default",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/additional_content",
+        "name": "additional_content",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/custom_icon",
+        "name": "custom_icon",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/custom_footer",
+        "name": "custom_footer",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/loading_spinner",
+        "name": "loading_spinner",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::FeedbackMessage",
+    "description": "A view component for messages, inspired by the Primer Blankslate,\nwhich serves a different use-case (messages for when data is missing).\nWe decided to wrap the Blankslate, because we don't want to have to adapt\nlots of different usages if Primer decides to change the Blankslate\nin a way that does not go well with our \"misuse\".",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::FeedbackMessage",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFeedbackMessage",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_message.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_message/default/",
+    "parameters": [
+      {
+        "name": "icon_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "special arguments for the icon"
+      },
+      {
+        "name": "loading",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Show a loading spinner instead of an icon"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/feedback_message/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/with_custom_icon",
+        "name": "with_custom_icon",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/with_custom_color",
+        "name": "with_custom_color",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/loading_spinner",
+        "name": "loading_spinner",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::FlexLayout",
     "description": "A layouting component used to arrange multiple components next / below each other",

data/static/previews.json

@@ -3647,6 +3647,165 @@
       }
     ]
   },
+  {
+    "name": "feedback_dialog",
+    "component": "OpenProject::FeedbackDialog",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/feedback_dialog",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/feedback_dialog/default",
+        "name": "default",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/additional_content",
+        "name": "additional_content",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/custom_icon",
+        "name": "custom_icon",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/custom_footer",
+        "name": "custom_footer",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_dialog/loading_spinner",
+        "name": "loading_spinner",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "name": "feedback_message",
+    "component": "OpenProject::FeedbackMessage",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/feedback_message",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/feedback_message/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/with_custom_icon",
+        "name": "with_custom_icon",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/with_custom_color",
+        "name": "with_custom_color",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/feedback_message/loading_spinner",
+        "name": "loading_spinner",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "flash",
     "component": "Flash",

data/static/statuses.json

@@ -118,6 +118,8 @@
   "Primer::OpenProject::BorderGrid": "open_project",
   "Primer::OpenProject::BorderGrid::Cell": "open_project",
   "Primer::OpenProject::DragHandle": "open_project",
+  "Primer::OpenProject::FeedbackDialog": "open_project",
+  "Primer::OpenProject::FeedbackMessage": "open_project",
   "Primer::OpenProject::FlexLayout": "open_project",
   "Primer::OpenProject::GridLayout": "open_project",
   "Primer::OpenProject::GridLayout::Area": "open_project",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.43.1
+  version: 0.44.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -82,6 +82,7 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
+- app/assets/images/loading_indicator.svg
 - app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts
 - app/assets/javascripts/app/components/primer/alpha/action_list.d.ts
 - app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts
@@ -489,6 +490,10 @@ files:
 - app/components/primer/open_project/drag_handle.html.erb
 - app/components/primer/open_project/drag_handle.pcss
 - app/components/primer/open_project/drag_handle.rb
+- app/components/primer/open_project/feedback_dialog.html.erb
+- app/components/primer/open_project/feedback_dialog.rb
+- app/components/primer/open_project/feedback_message.html.erb
+- app/components/primer/open_project/feedback_message.rb
 - app/components/primer/open_project/flex_layout.html.erb
 - app/components/primer/open_project/flex_layout.rb
 - app/components/primer/open_project/grid_layout.html.erb
@@ -985,6 +990,11 @@ files:
 - previews/primer/forms_preview/text_field_and_checkbox_form.html.erb
 - previews/primer/open_project/border_grid_preview.rb
 - previews/primer/open_project/drag_handle_preview.rb
+- previews/primer/open_project/feedback_dialog_preview.rb
+- previews/primer/open_project/feedback_dialog_preview/additional_content.html.erb
+- previews/primer/open_project/feedback_dialog_preview/custom_footer.html.erb
+- previews/primer/open_project/feedback_dialog_preview/playground.html.erb
+- previews/primer/open_project/feedback_message_preview.rb
 - previews/primer/open_project/flex_layout_preview.rb
 - previews/primer/open_project/grid_layout_preview.rb
 - previews/primer/open_project/input_group_preview.rb