From bf3325a15be7719052a810f09985d6df78a07e4b Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 10 Sep 2024 12:25:18 +0200 Subject: [PATCH] Add preview examples for the FeedbackDialog --- ...eedback-dialog-and-feedback-message.md.erb | 55 +++++++++++++------ .../patterns/feedback_dialog_preview.rb | 21 +++++++ .../custom_icon.html.erb | 8 +++ .../feedback_dialog_preview/default.html.erb | 8 +++ .../feedback_dialog_preview/loading.html.erb | 8 +++ 5 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 lookbook/previews/patterns/feedback_dialog_preview.rb create mode 100644 lookbook/previews/patterns/feedback_dialog_preview/custom_icon.html.erb create mode 100644 lookbook/previews/patterns/feedback_dialog_preview/default.html.erb create mode 100644 lookbook/previews/patterns/feedback_dialog_preview/loading.html.erb diff --git a/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb b/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb index c3dc737368f9..677a09d7f2fb 100644 --- a/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb +++ b/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb @@ -1,34 +1,34 @@ -The Feedback Dialog is used to provide the user feedback on a multi-step process (or a complex process). Unlike the `Banner`/`Flash`, the Feedback dialog is intrusive and demands user attention. In some cases, it is the final step of a multi-step process, although it can also be triggered independently. +The FeedbackDialog is used to provide the user feedback on a multi-step process (or a complex process). Unlike the `Banner`/`Flash`, the FeedbackDialog is intrusive and demands user attention. In some cases, it is the final step of a multi-step process, although it can also be triggered independently. -The Feedback Message is a sub-component (a variation of `Blankslate`) that is contained in the Feedback Dialog, but can also be used separately. +The FeedbackMessage is a sub-component (a variation of `Blankslate`) that is contained in the FeedbackDialog, but can also be used separately. ### Overview -[Live Example] +<%= embed Patterns::FeedbackDialogPreview, :default, panels: %i[source] %> ### Anatomy -The Feedback Dialog is made up of three parts. The are variations of existing Primer components and the third is a blanket area for any additional content: +The FeedbackDialog is made up of three parts. The are variations of existing Primer components and the third is a blanket area for any additional content: -- **Feedback Dialog** is the dialog modal, itself a variation of the `Dialog` -- **Feedback Message** is what is contained in the dialog, itself a variation of 'Blankslate'. -- **Additional content** can be placed below the Feedback Message when you need to include other important elements like a checkbox, more text or a banner. +- **FeedbackDialog** is the dialog modal, itself a variation of the `Dialog` +- **FeedbackMessage** is what is contained in the dialog, itself a variation of 'Blankslate'. +- **Additional content** can be placed below the FeedbackMessage when you need to include other important elements like a checkbox, more text or a banner. Both of these inherit all the properties of their original Primer components and as such can be adapted to a number of different use cases, as illustrated below.  -Please note that although these are OpenProject-specific variants, there is no additional spacing added to these components. The spacing is derived from the dialog's `overlaybody`, and from Blankslate, which Feedback Message is based on. +Please note that although these are OpenProject-specific variants, there is no additional spacing added to these components. The spacing is derived from the dialog's `overlayBody`, and from Blankslate, which FeedbackMessage is based on. -In it's default form, the Feedback Message contains a Blankslate with a green success icon and a heading. The description is optional, the close icon in the top right edge is visible and there is one button to close the dialog in the footer. +In it's default form, the FeedbackMessage contains a Blankslate with a green success icon and a heading. The description is optional, the close icon in the top right edge is visible and there is one button to close the dialog in the footer. ### Options -Whilst all options available to the `Dialog` component are available to the Feedback Message, we recommend limiting our use to the following variations: +Whilst all options available to the `Dialog` component are available to the FeedbackMessage, we recommend limiting our use to the following variations: - **With custom icon**: you can change the icon and the colour of the icon. This simple variation can be used for example to inform the user that a feature is Enterprise-only or to indicate an error. - **With additional content**: This is usually just additional text but can be almost any Primer component. The most common components that can be used here are text, a checkbox, a banner and a select panel. - **Footer buttons**: Usually, this is just a close action but it is possible to include custom footer with different actions. - **With loading spinner**: It's possible to display the animated SVG loading spinner instead of an icon.  -- **With additional actions in the Blankslate**: the options afforded by Blankslate such as a primary or secondary action in the form of a button or a link are also available to Feedback Message. +- **With additional actions in the Blankslate**: the options afforded by Blankslate such as a primary or secondary action in the form of a button or a link are also available to FeedbackMessage. If you would need or would like to use a different variant, please contact the UX and Front-end Primer teams. @@ -36,18 +36,18 @@ If you would need or would like to use a different variant, please contact the U #### Do: -- Use the Feedback Message to give feedback to the user as a part of a complex set of actions, whether that feedback is positive or negative. +- Use the FeedbackMessage to give feedback to the user as a part of a complex set of actions, whether that feedback is positive or negative. - Use the simplest variant that will do the job, usually the default. Only choose variations or add additional elements if absolutely required. #### Don't: -- Add a border to the Feedback Message, even if Blankslate allows this. +- Add a border to the FeedbackMessage, even if Blankslate allows this. - Use it for immediate feedback on a common or simple action; use the `Banner` instead for this. -- Add additional margins or spacing to the Feedback Dialog.  +- Add additional margins or spacing to the FeedbackDialog.  ### Used in -The Feedback Dialog (or just the Feedback Message independently) is already used in a number of places: +The FeedbackDialog (or just the FeedbackMessage independently) is already used in a number of places: - **File storages,** - to inform the user that the set-up was successful @@ -58,8 +58,29 @@ The Feedback Dialog (or just the Feedback Message independently) is already used ### Technical notes -[Notes from Henriette] +The FeedbackDialog offer a set of additional slots, which the normal Dialog does not have + +* [`with_feedback_message`](../../inspect/primer/open_project/feedback_dialog/default) + * it can then receive the normal slots that a `Blankslate` can receive + * the only exception are the arguments for the icon which need to be passed as a hash + +```rb +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 +``` + +* [`with_additional_actions`](../../inspect/primer/open_project/feedback_dialog/additional_content) + * it is a generic slot that accepts any component inside + ### Examples -[Live examples of a couple of variations] \ No newline at end of file +Please visit the the [previews](../../inspect/primer/open_project/feedback_dialog/playground) for a detailed overview of the possible options. + +#### Custom icon +<%= embed Patterns::FeedbackDialogPreview, :custom_icon, panels: %i[source] %> + +#### Loading +<%= embed Patterns::FeedbackDialogPreview, :loading, panels: %i[source] %> diff --git a/lookbook/previews/patterns/feedback_dialog_preview.rb b/lookbook/previews/patterns/feedback_dialog_preview.rb new file mode 100644 index 000000000000..7d4276e7a750 --- /dev/null +++ b/lookbook/previews/patterns/feedback_dialog_preview.rb @@ -0,0 +1,21 @@ +# frozen_string_literal: true + +module Patterns + # @hidden + class FeedbackDialogPreview < ViewComponent::Preview + # @display min_height 300px + def default + render_with_template + end + + # @display min_height 300px + def loading + render_with_template + end + + # @display min_height 300px + def custom_icon + render_with_template + end + end +end diff --git a/lookbook/previews/patterns/feedback_dialog_preview/custom_icon.html.erb b/lookbook/previews/patterns/feedback_dialog_preview/custom_icon.html.erb new file mode 100644 index 000000000000..5f9b550fe1fe --- /dev/null +++ b/lookbook/previews/patterns/feedback_dialog_preview/custom_icon.html.erb @@ -0,0 +1,8 @@ +<%= + render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog| + 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 +%> diff --git a/lookbook/previews/patterns/feedback_dialog_preview/default.html.erb b/lookbook/previews/patterns/feedback_dialog_preview/default.html.erb new file mode 100644 index 000000000000..f439275bcf7b --- /dev/null +++ b/lookbook/previews/patterns/feedback_dialog_preview/default.html.erb @@ -0,0 +1,8 @@ +<%= + render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog| + dialog.with_feedback_message do |message| + message.with_heading(tag: :h2) { "Success" } + message.with_description { "Great! Everything worked well." } + end + end +%> diff --git a/lookbook/previews/patterns/feedback_dialog_preview/loading.html.erb b/lookbook/previews/patterns/feedback_dialog_preview/loading.html.erb new file mode 100644 index 000000000000..f04c19aa19d6 --- /dev/null +++ b/lookbook/previews/patterns/feedback_dialog_preview/loading.html.erb @@ -0,0 +1,8 @@ +<%= + render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog| + dialog.with_feedback_message(loading: true) do |message| + message.with_heading(tag: :h2) { "Waiting" } + message.with_description { "The job is currently running.." } + end + end +%>