Add Feedback component#7232
Open
owenatgov wants to merge 4 commits into
Open
Conversation
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 355a7a913..8012bd211 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3043,6 +3043,64 @@ screen and (forced-colors:active) {
display: block !important
}
+.govuk-feedback {
+ box-sizing: border-box;
+ padding: 20px 15px 25px;
+ border-top: 1px solid;
+ border-color: var(--govuk-brand-colour, #1d70b8);
+ background-color: var(--govuk-surface-background-colour, #f4f8fb)
+}
+
+@media (min-width:40.0625em) {
+ .govuk-feedback {
+ padding-right: 20px;
+ padding-left: 20px
+ }
+}
+
+@media (max-width:40.0525em) {
+ .govuk-feedback {
+ margin-right: 0;
+ margin-left: 0
+ }
+}
+
+.govuk-feedback__title {
+ font-family: GDS Transport, arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 700;
+ font-size: 1.3125rem;
+ line-height: 1.1904761905;
+ margin-top: 0;
+ color: var(--govuk-text-colour, #0b0c0c);
+ margin-bottom: 5px
+}
+
+@media print {
+ .govuk-feedback__title {
+ font-family: sans-serif
+ }
+}
+
+@media (min-width:40.0625em) {
+ .govuk-feedback__title {
+ font-size: 1.5rem;
+ line-height: 1.25
+ }
+}
+
+@media print {
+ .govuk-feedback__title {
+ font-size: 18pt;
+ line-height: 1.15
+ }
+}
+
+.govuk-feedback__body>:last-child {
+ margin-bottom: 0
+}
+
.govuk-file-upload {
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
Action run for bec4322 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/feedback/template-default.html b/packages/govuk-frontend/dist/govuk/components/feedback/template-default.html
new file mode 100644
index 000000000..cc53e9567
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/template-default.html
@@ -0,0 +1,12 @@
+<div class="govuk-feedback govuk-width-container">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-two-thirds">
+ <h2 class="govuk-feedback__title">
+ Help us improve this service
+ </h2>
+ <div class="govuk-feedback__body">
+ <p class="govuk-body">Tell us about your experience using this service. <a href="#" class="govuk-link">Give us your feedback</a></p>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/template-silly-example.html b/packages/govuk-frontend/dist/govuk/components/feedback/template-silly-example.html
new file mode 100644
index 000000000..de51d6798
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/template-silly-example.html
@@ -0,0 +1,19 @@
+<div class="govuk-feedback govuk-width-container">
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-two-thirds">
+ <h2 class="govuk-feedback__title">
+ Help us improve this service
+ </h2>
+ <div class="govuk-feedback__body">
+ <p class="govuk-body">Tell us about your experience using this service.</p>
+ <p class="govuk-body">Click this cool link to <a href="#" class="govuk-link">give us your feedback</a>.</p>
+ <p class="govuk-body">There's another paragraph here.</p>
+ <ul class="govuk-list govuk-list--bullet">
+ <li>There is also a list</li>
+ <li>With items in</li>
+ <li>How strange!</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
Action run for bec4322 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/_index.import.scss b/packages/govuk-frontend/dist/govuk/components/_index.import.scss
index 400472460..5e6ea3942 100644
--- a/packages/govuk-frontend/dist/govuk/components/_index.import.scss
+++ b/packages/govuk-frontend/dist/govuk/components/_index.import.scss
@@ -10,6 +10,7 @@
@import "error-message";
@import "error-summary";
@import "exit-this-page";
+@import "feedback";
@import "fieldset";
@import "file-upload";
@import "footer";
diff --git a/packages/govuk-frontend/dist/govuk/components/_index.scss b/packages/govuk-frontend/dist/govuk/components/_index.scss
index 364f6934b..e80df57fc 100644
--- a/packages/govuk-frontend/dist/govuk/components/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/_index.scss
@@ -10,6 +10,7 @@
@use "error-message";
@use "error-summary";
@use "exit-this-page";
+@use "feedback";
@use "fieldset";
@use "file-upload";
@use "footer";
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/README.md b/packages/govuk-frontend/dist/govuk/components/feedback/README.md
new file mode 100644
index 000000000..9d3d8ee6d
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/README.md
@@ -0,0 +1,15 @@
+# Feedback
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the Feedback component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/feedback).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/feedback/#options-feedback-example) for details.
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/_feedback.import.scss b/packages/govuk-frontend/dist/govuk/components/feedback/_feedback.import.scss
new file mode 100644
index 000000000..81e01515f
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/_feedback.import.scss
@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("feedback");
+
+@import "index";
+
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/_index.import.scss b/packages/govuk-frontend/dist/govuk/components/feedback/_index.import.scss
new file mode 100644
index 000000000..eb999d0bc
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/_index.import.scss
@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/feedback") {
+ @include mixin.styles;
+}
+
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/_index.scss b/packages/govuk-frontend/dist/govuk/components/feedback/_index.scss
new file mode 100644
index 000000000..8be2e75f1
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/_index.scss
@@ -0,0 +1,5 @@
+@use "../../custom-properties";
+@use "mixin";
+
+@include mixin.styles;
+
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/feedback/_mixin.scss
new file mode 100644
index 000000000..3b39043d2
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/_mixin.scss
@@ -0,0 +1,43 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+ .govuk-feedback {
+ box-sizing: border-box;
+ // Tie left/right padding to page gutter as it stretches across the whole
+ // screen on smaller screens
+ padding: base.govuk-spacing(4) base.$govuk-gutter-half base.govuk-spacing(5);
+ border-top: 1px solid;
+ border-color: base.govuk-functional-colour("brand");
+ background-color: base.govuk-functional-colour("surface-background");
+
+ @media #{base.govuk-from-breakpoint(tablet)} {
+ padding-right: base.govuk-spacing(4);
+ padding-left: base.govuk-spacing(4);
+ }
+
+ // Override $govuk-width-container's left and right margin as we want Feedback
+ // to go across the whole screen on smaller screens
+ @media #{base.govuk-until-breakpoint(tablet)} {
+ margin-right: 0;
+ margin-left: 0;
+ }
+ }
+
+ .govuk-feedback__title {
+ @include base.govuk-font($size: 24, $weight: bold);
+ margin-top: 0;
+ color: base.govuk-functional-colour(text);
+ @include base.govuk-responsive-margin(1, "bottom");
+ }
+
+ // Removes the bottom margin from the final child element eg: a paragraph
+ //
+ // Feedback body doesn't have any opinions about typography. Instead we defer
+ // to users to use typography classes in their input, or apply a `govuk-body`
+ // paragraph for if users pass `text`.
+ .govuk-feedback__body > :last-child {
+ margin-bottom: 0;
+ }
+}
+
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/fixtures.json b/packages/govuk-frontend/dist/govuk/components/feedback/fixtures.json
new file mode 100644
index 000000000..27dce170b
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/fixtures.json
@@ -0,0 +1,95 @@
+{
+ "component": "feedback",
+ "fixtures": [
+ {
+ "name": "default",
+ "options": {
+ "titleText": "Help us improve this service",
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n"
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": true,
+ "html": "<div class=\"govuk-feedback govuk-width-container\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "silly example",
+ "options": {
+ "titleText": "Help us improve this service",
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service.</p>\n<p class=\"govuk-body\">Click this cool link to <a href=\"#\" class=\"govuk-link\">give us your feedback</a>.</p>\n<p class=\"govuk-body\">There's another paragraph here.</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>There is also a list</li>\n <li>With items in</li>\n <li>How strange!</li>\n</ul>\n"
+ },
+ "hidden": false,
+ "description": "In reality we'd recommend users only use the default example but this is to illustrate if a service team decides they want to add a lot of content",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service.</p>\n <p class=\"govuk-body\">Click this cool link to <a href=\"#\" class=\"govuk-link\">give us your feedback</a>.</p>\n <p class=\"govuk-body\">There's another paragraph here.</p>\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>There is also a list</li>\n <li>With items in</li>\n <li>How strange!</li>\n </ul>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "html in title",
+ "options": {
+ "titleHtml": "Help us improve this <em>cool</em> service",
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n"
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this <em>cool</em> service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "custom heading level",
+ "options": {
+ "titleText": "Help us improve this service",
+ "headingLevel": 3,
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n"
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h3 class=\"govuk-feedback__title\">\n Help us improve this service\n </h3>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "html in text options",
+ "options": {
+ "titleText": "Help us improve this <em>cool</em> service",
+ "text": "Tell us about your experience using this <em>cool</em> service"
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this <em>cool</em> service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">\n Tell us about your experience using this <em>cool</em> service\n </p>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "classes",
+ "options": {
+ "titleText": "Help us improve this service",
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n",
+ "classes": "my-first-class my-second-class"
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container my-first-class my-second-class\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n </div>\n </div>\n </div>\n</div>"
+ },
+ {
+ "name": "attributes",
+ "options": {
+ "titleText": "Help us improve this service",
+ "html": "<p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n",
+ "attributes": {
+ "first-attribute": "first",
+ "second-attribute": "second"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-feedback govuk-width-container\" first-attribute=\"first\" second-attribute=\"second\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h2 class=\"govuk-feedback__title\">\n Help us improve this service\n </h2>\n <div class=\"govuk-feedback__body\">\n <p class=\"govuk-body\">Tell us about your experience using this service. <a href=\"#\" class=\"govuk-link\">Give us your feedback</a></p>\n </div>\n </div>\n </div>\n</div>"
+ }
+ ]
+}
diff --git a/packages/govuk-frontend/dist/govuk/components/feedback/macro-options.json b/packages/govuk-frontend/dist/govuk/components/feedback/macro-options.json
new file mode 100644
index 000000000..2e6ae7bf1
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/feedback/macro-options.json
@@ -0,0 +1,50 @@
+[
+ {
+ "name": "titleText",
+ "type": "string",
+ "required": true,
+ "description": "Text to use within the title of the Feedback component. If `titleHtml` is provided, the `titleText` option will be ignored."
+ },
+ {
+ "name": "titleHtml",
+ "type": "string",
+ "required": true,
+ "description": "HTML to use within the title of the Feedback component. If `titleHtml` is provided, the `titleText` option will be ignored."
+ },
+ {
+ "name": "headingLevel",
+ "type": "integer",
+ "required": false,
+ "description": "Heading level, from `1` to `6`. Default is `2`."
+ },
+ {
+ "name": "text",
+ "type": "string",
+ "required": true,
+ "description": "Text to use within the Feedback component content. If `html` is provided, the `text` option will be ignored."
+ },
+ {
+ "name": "html",
+ "type": "string",
+ "required": true,
+ "description": "HTML to use within the Feedback component content. If `html` is provided, the `text` option will be ignored."
+ },
+ {
+ "name": "caller",
+ "type": "nunjucks-block",
+ "required": false,
+ "description": "Not strictly a parameter but a [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block lets you call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you'll need to wrap the entire Feedback component in a `call` block."
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "Classes to add to the Feedback component container."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes (for example, data attributes) to add to the Feedback component container."
+ }
+]
Action run for bec4322 |
📋 StatsFile sizes
No changes to module sizes. Action run for bec4322 |
seaemsi
reviewed
Jul 1, 2026
NickColley
requested changes
Jul 1, 2026
NickColley
left a comment
Contributor
There was a problem hiding this comment.
Looking really good! Only sort of blocking one I feel is avoiding styling the body and allowing people to put multiple paragraphs in if they have something else they'd like to say...
ba4df5a to
b7856ad
Compare
b7856ad to
8dca916
Compare
NickColley
requested changes
Jul 2, 2026
NickColley
left a comment
Contributor
There was a problem hiding this comment.
Happy to approve after resolved these two little ones, looking really solid 👏🏻
seaemsi
approved these changes
Jul 2, 2026
8dca916 to
d0cb19b
Compare
d0cb19b to
e6e5bba
Compare
e6e5bba to
00b3059
Compare
00b3059 to
e1e437b
Compare
NickColley
approved these changes
Jul 7, 2026
NickColley
left a comment
Contributor
There was a problem hiding this comment.
Solid work! Nice one 👏🏻
e1e437b to
58a4f6b
Compare
58a4f6b to
bec4322
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Important
Don't merge until we know we'll be able to release at the end of the cycle
What it says on the tin. Closes #7190
Notes
There's a question on how detailed the changelog gets into. Do we explain to people that they can add Feedback via the
footerStartblock? Do we do this in the component guidance? I'm gonna suggest for now that we don't worry too much about it but ideally sort it out before merging.I'm not super happy with
govuk-width-containeron the component block but I also can't think of an alternative for how we want the component to behave besides recreating the width container in the component.I added the component to an existing full page example rather than create a new one. There isn't really a clear real world example that distinctly shows the component in use over what already exists in the review app so I'm not sure there's much value in creating a new one. Open to opinions on this.