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.scss b/src/components/comment-form/comment-form.scss index 7c591d5ce..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: 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-form/comment-form.stories.mdx b/src/components/comment-form/comment-form.stories.mdx index eea18cec1..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`, 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`, and `main_label`. When using the [Comment pattern](/docs/components-comment--with-reply-button) this will be done automatically.) {{ 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. -

+ + {% 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.scss b/src/components/comment/comment.scss index 72435c453..5ac9e8062 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -50,6 +50,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: size.$spacing-gap-comment-form-vertical; } /// Named object for consistency with the Media component. @@ -134,10 +138,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/tokens/size/spacing.js b/src/tokens/size/spacing.js index 08c8c6882..aab97843f 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) },