From b23cbb676ae498e04328b0578ad76f60a9e27422 Mon Sep 17 00:00:00 2001 From: Parimal Satyal <88370597+psatyal@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:50:20 +0200 Subject: [PATCH 1/6] Wrote draft docs for Feedback Dialog/Message --- ...eedback-dialog-and-feedback-message.md.erb | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.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 new file mode 100644 index 000000000000..c3dc737368f9 --- /dev/null +++ b/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb @@ -0,0 +1,65 @@ +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 Feedback Message is a sub-component (a variation of `Blankslate`) that is contained in the Feedback Dialog, but can also be used separately. + +### Overview + +[Live Example] + +### 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: + +- **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. + +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. + +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. + +### Options + +Whilst all options available to the `Dialog` component are available to the Feedback Message, 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. + +If you would need or would like to use a different variant, please contact the UX and Front-end Primer teams. + +### Best practices + +#### 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 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. +- 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.  + +### Used in + +The Feedback Dialog (or just the Feedback Message independently) is already used in a number of places: + +- **File storages,** + - to inform the user that the set-up was successful + - to ask the user to log in if the action they are trying to accomplish requires it + - to warn the user about the consequences of removing a file storage from a project when they try to do this +- **API Token generation** process (success or error) +- **PDF export**, to inform the user of the status of the export job (waiting or successful) + +### Technical notes + +[Notes from Henriette] + +### Examples + +[Live examples of a couple of variations] \ No newline at end of file From bf3325a15be7719052a810f09985d6df78a07e4b Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 10 Sep 2024 12:25:18 +0200 Subject: [PATCH 2/6] 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 +%> From 586d2b46e0356bf6cbed3860aead397dc16fea0e Mon Sep 17 00:00:00 2001 From: Parimal Satyal <88370597+psatyal@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:50:20 +0200 Subject: [PATCH 3/6] Wrote draft docs for Feedback Dialog/Message --- ...eedback-dialog-and-feedback-message.md.erb | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.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 new file mode 100644 index 000000000000..c3dc737368f9 --- /dev/null +++ b/lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb @@ -0,0 +1,65 @@ +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 Feedback Message is a sub-component (a variation of `Blankslate`) that is contained in the Feedback Dialog, but can also be used separately. + +### Overview + +[Live Example] + +### 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: + +- **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. + +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. + +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. + +### Options + +Whilst all options available to the `Dialog` component are available to the Feedback Message, 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. + +If you would need or would like to use a different variant, please contact the UX and Front-end Primer teams. + +### Best practices + +#### 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 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. +- 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.  + +### Used in + +The Feedback Dialog (or just the Feedback Message independently) is already used in a number of places: + +- **File storages,** + - to inform the user that the set-up was successful + - to ask the user to log in if the action they are trying to accomplish requires it + - to warn the user about the consequences of removing a file storage from a project when they try to do this +- **API Token generation** process (success or error) +- **PDF export**, to inform the user of the status of the export job (waiting or successful) + +### Technical notes + +[Notes from Henriette] + +### Examples + +[Live examples of a couple of variations] \ No newline at end of file From e3bc714fcee33dc3943af3f3d5dc3262c653bbe1 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 10 Sep 2024 12:25:18 +0200 Subject: [PATCH 4/6] 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 +%> From abc46db51bf2bd59b315f7499b3aa2e24e022cb3 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Fri, 13 Sep 2024 08:28:53 +0200 Subject: [PATCH 5/6] Minor text changes --- ...-feedback-dialog-and-feedback-message.md.erb | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) 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 677a09d7f2fb..fc90ceca51c1 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,4 +1,4 @@ -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 FeedbackDialog is used to provide the user feedback on any kind of 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 FeedbackMessage is a sub-component (a variation of `Blankslate`) that is contained in the FeedbackDialog, but can also be used separately. @@ -8,17 +8,14 @@ The FeedbackMessage is a sub-component (a variation of `Blankslate`) that is con ### Anatomy -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: +The Feedback Dialog is a variation of a normal Primer Dialog, with two additional possible slots: -- **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.  +- **Feedback Message** (mandatory) is what is contained in the dialog, itself a variation of 'Blankslate'. +- **Additional content** (optional) can be placed below the FeedbackMessage when you need to include other important elements like a checkbox, more text or a banner. 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 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. +In it's default form, the FeedbackDialog contains a message with a green success icon and a heading. The message 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 @@ -36,7 +33,7 @@ If you would need or would like to use a different variant, please contact the U #### Do: -- 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 FeedbackDialog 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: @@ -54,7 +51,7 @@ The FeedbackDialog (or just the FeedbackMessage independently) is already used i - to ask the user to log in if the action they are trying to accomplish requires it - to warn the user about the consequences of removing a file storage from a project when they try to do this - **API Token generation** process (success or error) -- **PDF export**, to inform the user of the status of the export job (waiting or successful) +- **PDF export**, to inform the user of the status of the export job (loading, waiting or successful) ### Technical notes From 477d0e1f74c6ed96859a5a4ec6879663fea7a234 Mon Sep 17 00:00:00 2001 From: Parimal Satyal <88370597+psatyal@users.noreply.github.com> Date: Fri, 13 Sep 2024 09:54:52 +0200 Subject: [PATCH 6/6] Minor (typos and phrasing) --- .../patterns/13-feedback-dialog-and-feedback-message.md.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 677a09d7f2fb..6328a935c360 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 @@ -18,7 +18,7 @@ Both of these inherit all the properties of their original Primer components and 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 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. +In its 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 @@ -58,7 +58,7 @@ The FeedbackDialog (or just the FeedbackMessage independently) is already used i ### Technical notes -The FeedbackDialog offer a set of additional slots, which the normal Dialog does not have +The FeedbackDialog offers a set of additional slots, which the normal Dialog does not: * [`with_feedback_message`](../../inspect/primer/open_project/feedback_dialog/default) * it can then receive the normal slots that a `Blankslate` can receive @@ -77,7 +77,7 @@ end ### Examples -Please visit the the [previews](../../inspect/primer/open_project/feedback_dialog/playground) for a detailed overview of the possible options. +Please consult 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] %>