From bb1d06b66786d79163559ad2f94aa938943d2c65 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 12:45:45 -0700 Subject: [PATCH 1/6] Refine the visual display of the comment reply form help text This PR wraps the help text in and alert, and adjust the spacing between the reply form and the comment above. The goal is to more clearly distinguish the reply form from the comment, and make it clear that the help text is connected to the reply form, not the comment above.| Fixes #1427 --- .changeset/cold-melons-boil.md | 5 ++++ .../comment-form/comment-form.stories.mdx | 4 ++- src/components/comment-form/comment-form.twig | 27 ++++++++++++++----- src/components/comment/comment.scss | 9 ++++--- src/components/comment/comment.twig | 1 + 5 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 .changeset/cold-melons-boil.md diff --git a/.changeset/cold-melons-boil.md b/.changeset/cold-melons-boil.md new file mode 100644 index 000000000..fde00e33d --- /dev/null +++ b/.changeset/cold-melons-boil.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Refine the visual display of the comment reply form help text diff --git a/src/components/comment-form/comment-form.stories.mdx b/src/components/comment-form/comment-form.stories.mdx index eea18cec1..59a4b05c0 100644 --- a/src/components/comment-form/comment-form.stories.mdx +++ b/src/components/comment-form/comment-form.stories.mdx @@ -62,7 +62,7 @@ The form used to add a comment to an article. Including the `heading_id` and `he -There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment. (You'll also want to modify `heading_tag`, `heading_id`, `heading_class`, and `heading_text`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.) +There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment. (You'll also want to modify `heading_tag`, `heading_id`, `heading_class`, `heading_text`, `main_label`, and `wrap_help_text_in_alert`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.) diff --git a/src/components/comment-form/comment-form.twig b/src/components/comment-form/comment-form.twig index 8836c1b84..d5517fe70 100644 --- a/src/components/comment-form/comment-form.twig +++ b/src/components/comment-form/comment-form.twig @@ -1,3 +1,13 @@ +{% set help_text %} +

+ Please be kind, courteous and constructive. + You may use simple HTML or + Markdown + in your comments. + All fields are required. +

+{% endset %} +
{{ heading_text|default("Leave a Comment") }} -

- Please be kind, courteous and constructive. - You may use simple HTML or - Markdown - in your comments. - All fields are required. -

+ + {% if wrap_help_text_in_alert %} + {% embed '@cloudfour/components/alert/alert.twig' %} + {% block content %} + {{help_text}} + {% endblock %} + {% endembed %} + {% else %} + {{help_text}} + {% endif %} {% endblock %} {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: main_label|default('Message') } %} {% block control %} diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 72435c453..cf44cf5a6 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -4,6 +4,7 @@ @use '../../compiled/tokens/scss/size'; @use '../../mixins/headings'; @use '../../mixins/theme'; +@use "../../mixins/ms"; .c-comment { display: grid; @@ -50,6 +51,10 @@ .c-comment.is-replying .c-comment__reply-form { display: block; + /// The top margin matches the grid gap spacing applied to the comment form. + /// Otherwise, the form's help text appears visually closer to the comment + /// you're responding to than to the form. + margin-top: ms.step(2, 1rem); } /// Named object for consistency with the Media component. @@ -134,10 +139,6 @@ // Visually centers the child avatars with the indentation of the parent // comment. Without this, the replies feel nested too far to the right. margin-left: math.div(size.$square-avatar-small, -2); -} - -.c-comment__replies, -.c-comment__reply-form { // Since the replies are likely wrapped in a Rhythm object intended to inherit // the parent rhythm, we can use that custom property to inherit that same // spacing between the meta and replies. diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index a8f6dd51f..b34af9c21 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -125,6 +125,7 @@ heading_text: "Reply to #{comment.author.name}", heading_class: 'u-hidden-visually', main_label: 'Reply', + wrap_help_text_in_alert: true, } only %} {% endif %} From 8bf49a788e489fe37a8b48c13e554c2ee25ea5c3 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 12:52:56 -0700 Subject: [PATCH 2/6] Add prop doc --- src/components/comment-form/comment-form.stories.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/comment-form/comment-form.stories.mdx b/src/components/comment-form/comment-form.stories.mdx index 59a4b05c0..19460750c 100644 --- a/src/components/comment-form/comment-form.stories.mdx +++ b/src/components/comment-form/comment-form.stories.mdx @@ -120,6 +120,7 @@ There is also a reply version of this component (`is_reply: true`), used to repl - `heading_class`: An optional class for your heading. - `heading_id`: A unique ID for your help text. This will be used as the accessible description for the reply textarea. - `main_label`: The label for the primary message textarea. Defaults to `message` +- `wrap_help_text_in_alert`: Wraps the help text in the promo in an [Alert](/docs/components-alert--basic) - `logged_in_user`: [user object](https://timber.github.io/docs/reference/timber-user/#properties) of the type: ```ts From bd3428c90acd19e7519c0ff70c3dcdf5451b9310 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 14:08:28 -0700 Subject: [PATCH 3/6] Always wrap help text in alert --- .../comment-form/comment-form.stories.mdx | 5 +--- src/components/comment-form/comment-form.twig | 30 +++++++------------ src/components/comment/comment.twig | 1 - 3 files changed, 12 insertions(+), 24 deletions(-) diff --git a/src/components/comment-form/comment-form.stories.mdx b/src/components/comment-form/comment-form.stories.mdx index 19460750c..57ff7fe79 100644 --- a/src/components/comment-form/comment-form.stories.mdx +++ b/src/components/comment-form/comment-form.stories.mdx @@ -62,7 +62,7 @@ The form used to add a comment to an article. Including the `heading_id` and `he -There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment. (You'll also want to modify `heading_tag`, `heading_id`, `heading_class`, `heading_text`, `main_label`, and `wrap_help_text_in_alert`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.) +There is also a reply version of this component (`is_reply: true`), used to reply to an existing comment. (You'll also want to modify `heading_tag`, `heading_id`, `heading_class`, `heading_text`, and `main_label`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.) @@ -120,7 +118,6 @@ There is also a reply version of this component (`is_reply: true`), used to repl - `heading_class`: An optional class for your heading. - `heading_id`: A unique ID for your help text. This will be used as the accessible description for the reply textarea. - `main_label`: The label for the primary message textarea. Defaults to `message` -- `wrap_help_text_in_alert`: Wraps the help text in the promo in an [Alert](/docs/components-alert--basic) - `logged_in_user`: [user object](https://timber.github.io/docs/reference/timber-user/#properties) of the type: ```ts diff --git a/src/components/comment-form/comment-form.twig b/src/components/comment-form/comment-form.twig index d5517fe70..d2694963a 100644 --- a/src/components/comment-form/comment-form.twig +++ b/src/components/comment-form/comment-form.twig @@ -1,13 +1,3 @@ -{% set help_text %} -

- Please be kind, courteous and constructive. - You may use simple HTML or - Markdown - in your comments. - All fields are required. -

-{% endset %} - - {% if wrap_help_text_in_alert %} - {% embed '@cloudfour/components/alert/alert.twig' %} - {% block content %} - {{help_text}} - {% endblock %} - {% endembed %} - {% else %} - {{help_text}} - {% endif %} + {% embed '@cloudfour/components/alert/alert.twig' %} + {% block content %} +

+ Please be kind, courteous and constructive. + You may use simple HTML or + Markdown + in your comments. + All fields are required. +

+ {% endblock %} + {% endembed %} {% endblock %} {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: main_label|default('Message') } %} {% block control %} diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig index b34af9c21..a8f6dd51f 100644 --- a/src/components/comment/comment.twig +++ b/src/components/comment/comment.twig @@ -125,7 +125,6 @@ heading_text: "Reply to #{comment.author.name}", heading_class: 'u-hidden-visually', main_label: 'Reply', - wrap_help_text_in_alert: true, } only %} {% endif %} From 2249cf9ee109ef2dfe6eb7c7c70bdd188a77f698 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 14:17:12 -0700 Subject: [PATCH 4/6] Use tokens for comment form spacing values --- src/components/comment-form/comment-form.scss | 2 +- src/components/comment/comment.scss | 2 +- src/tokens/size/spacing.js | 6 +++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/comment-form/comment-form.scss b/src/components/comment-form/comment-form.scss index 7c591d5ce..f6289c2d0 100644 --- a/src/components/comment-form/comment-form.scss +++ b/src/components/comment-form/comment-form.scss @@ -3,7 +3,7 @@ .c-comment-form { display: grid; - grid-gap: ms.step(2, 1rem) ms.step(4, 1rem); + grid-gap: size.$spacing-gap-comment-form-vertical size.$spacing-gap-comment-form-horizontal; grid-template-columns: 1fr 1fr; } diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index cf44cf5a6..b741b31a3 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -54,7 +54,7 @@ /// The top margin matches the grid gap spacing applied to the comment form. /// Otherwise, the form's help text appears visually closer to the comment /// you're responding to than to the form. - margin-top: ms.step(2, 1rem); + margin-top: size.$spacing-gap-comment-form-vertical; } /// Named object for consistency with the Media component. diff --git a/src/tokens/size/spacing.js b/src/tokens/size/spacing.js index 08c8c6882..bae03fee0 100644 --- a/src/tokens/size/spacing.js +++ b/src/tokens/size/spacing.js @@ -1,4 +1,4 @@ -const { modularEm } = require('../../scripts/modular-scale'); +const { modularEm, modularRem } = require('../../scripts/modular-scale'); module.exports = { size: { @@ -49,6 +49,10 @@ module.exports = { logo_group: { value: modularEm(3), }, + comment_form: { + horizontal: { value: modularRem(4) }, + vertical: { value: modularRem(2) }, + } }, control: { text_inset: { value: modularEm(-1) }, From 78a05a6deac7d03931123b96def0a1a873655b00 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 14:24:30 -0700 Subject: [PATCH 5/6] Lint --- src/components/comment-form/comment-form.scss | 3 ++- src/tokens/size/spacing.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/comment-form/comment-form.scss b/src/components/comment-form/comment-form.scss index f6289c2d0..6b984fe9c 100644 --- a/src/components/comment-form/comment-form.scss +++ b/src/components/comment-form/comment-form.scss @@ -3,7 +3,8 @@ .c-comment-form { display: grid; - grid-gap: size.$spacing-gap-comment-form-vertical size.$spacing-gap-comment-form-horizontal; + grid-gap: size.$spacing-gap-comment-form-vertical + size.$spacing-gap-comment-form-horizontal; grid-template-columns: 1fr 1fr; } diff --git a/src/tokens/size/spacing.js b/src/tokens/size/spacing.js index bae03fee0..aab97843f 100644 --- a/src/tokens/size/spacing.js +++ b/src/tokens/size/spacing.js @@ -52,7 +52,7 @@ module.exports = { comment_form: { horizontal: { value: modularRem(4) }, vertical: { value: modularRem(2) }, - } + }, }, control: { text_inset: { value: modularEm(-1) }, From 359e3bc3ed3dc471268d6ba04466fb007f4c3f86 Mon Sep 17 00:00:00 2001 From: Paul Hebert Date: Thu, 22 Jul 2021 15:19:50 -0700 Subject: [PATCH 6/6] Remove unused use --- src/components/comment/comment.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index b741b31a3..5ac9e8062 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -4,7 +4,6 @@ @use '../../compiled/tokens/scss/size'; @use '../../mixins/headings'; @use '../../mixins/theme'; -@use "../../mixins/ms"; .c-comment { display: grid;