Skip to content

Add Feedback component#7232

Open
owenatgov wants to merge 4 commits into
mainfrom
feedback-component
Open

Add Feedback component#7232
owenatgov wants to merge 4 commits into
mainfrom
feedback-component

Conversation

@owenatgov

@owenatgov owenatgov commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

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 footerStart block? 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-container on 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.

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

Stylesheets changes to npm package

diff --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

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

Rendered HTML changes to npm package

diff --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

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

Other changes to npm package

diff --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 &lt;em&gt;cool&lt;/em&gt; service\n      </h2>\n        <div class=\"govuk-feedback__body\">\n            <p class=\"govuk-body\">\n              Tell us about your experience using this &lt;em&gt;cool&lt;/em&gt; 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

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

📋 Stats

File sizes

File Size Percentage change
dist/govuk-frontend-development.min.css 123.11 KiB 0.7%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 123.1 KiB 0.7%

No changes to module sizes.


Action run for bec4322

@hazalarpalikli

hazalarpalikli commented Jul 1, 2026

Copy link
Copy Markdown

Hello, can we reduce the space to 5px between the title and text please, attaching images below

component with 5px spacing

@owenatgov

Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
@owenatgov owenatgov marked this pull request as ready for review July 1, 2026 15:55
@owenatgov owenatgov requested a review from a team July 1, 2026 15:56

@NickColley NickColley left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

Comment thread packages/govuk-frontend-review/src/views/examples/translated/index.njk Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/_mixin.scss Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/_mixin.scss

@NickColley NickColley left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to approve after resolved these two little ones, looking really solid 👏🏻

Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml Outdated
Comment thread packages/govuk-frontend/src/govuk/components/feedback/feedback.yaml

@NickColley NickColley left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solid work! Nice one 👏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build feedback component

5 participants