Add button examples for hover and focus states of variants #6309
Conversation
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
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/button/template-default-hover-state.html b/packages/govuk-frontend/dist/govuk/components/button/template-default-hover-state.html
new file mode 100644
index 000000000..2a137afe8
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-default-hover-state.html
@@ -0,0 +1,3 @@
+<button type="submit" class="govuk-button :hover" data-module="govuk-button">
+ Save and continue
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-focus-state.html b/packages/govuk-frontend/dist/govuk/components/button/template-focus-state.html
new file mode 100644
index 000000000..4c1a45798
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-focus-state.html
@@ -0,0 +1,3 @@
+<button type="submit" class="govuk-button :focus" data-module="govuk-button">
+ Save and continue
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-inverse-disabled.html b/packages/govuk-frontend/dist/govuk/components/button/template-inverse-disabled.html
new file mode 100644
index 000000000..1ef7c2240
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-inverse-disabled.html
@@ -0,0 +1,3 @@
+<button type="submit" name="Inverse" disabled aria-disabled="true" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ Inverse button
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-inverse-hover-state.html b/packages/govuk-frontend/dist/govuk/components/button/template-inverse-hover-state.html
new file mode 100644
index 000000000..d1c078612
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-inverse-hover-state.html
@@ -0,0 +1,3 @@
+<button type="submit" name="Inverse" class="govuk-button govuk-button--inverse :hover" data-module="govuk-button">
+ Inverse button
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-secondary-disabled.html b/packages/govuk-frontend/dist/govuk/components/button/template-secondary-disabled.html
new file mode 100644
index 000000000..11a66b36f
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-secondary-disabled.html
@@ -0,0 +1,3 @@
+<button type="submit" name="secondary" disabled aria-disabled="true" class="govuk-button govuk-button--secondary" data-module="govuk-button">
+ Secondary button disabled
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-secondary-hover-state.html b/packages/govuk-frontend/dist/govuk/components/button/template-secondary-hover-state.html
new file mode 100644
index 000000000..f78faf1d0
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-secondary-hover-state.html
@@ -0,0 +1,3 @@
+<button type="submit" name="secondary" class="govuk-button govuk-button--secondary :hover" data-module="govuk-button">
+ Secondary button
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-warning-disabled.html b/packages/govuk-frontend/dist/govuk/components/button/template-warning-disabled.html
new file mode 100644
index 000000000..691243b11
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-warning-disabled.html
@@ -0,0 +1,3 @@
+<button type="submit" name="warning" disabled aria-disabled="true" class="govuk-button govuk-button--warning" data-module="govuk-button">
+ Warning button disabled
+</button>
diff --git a/packages/govuk-frontend/dist/govuk/components/button/template-warning-hover-state.html b/packages/govuk-frontend/dist/govuk/components/button/template-warning-hover-state.html
new file mode 100644
index 000000000..aae327d82
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/button/template-warning-hover-state.html
@@ -0,0 +1,3 @@
+<button type="submit" name="Warning" class="govuk-button govuk-button--warning :hover" data-module="govuk-button">
+ Warning button
+</button>
Action run for b027fa4 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
index 09948f778..fe366a789 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
@@ -12,6 +12,30 @@
"screenshot": true,
"html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n Save and continue\n</button>"
},
+ {
+ "name": "default hover state",
+ "options": {
+ "text": "Save and continue",
+ "classes": ":hover"
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" class=\"govuk-button :hover\" data-module=\"govuk-button\">\n Save and continue\n</button>"
+ },
+ {
+ "name": "focus state",
+ "options": {
+ "text": "Save and continue",
+ "classes": ":focus"
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" class=\"govuk-button :focus\" data-module=\"govuk-button\">\n Save and continue\n</button>"
+ },
{
"name": "disabled",
"options": {
@@ -74,6 +98,33 @@
"screenshot": false,
"html": "<button type=\"submit\" name=\"secondary\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</button>"
},
+ {
+ "name": "secondary hover state",
+ "options": {
+ "name": "secondary",
+ "text": "Secondary button",
+ "classes": "govuk-button--secondary :hover"
+ },
+ "hidden": false,
+ "description": "A button for secondary actions",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"secondary\" class=\"govuk-button govuk-button--secondary :hover\" data-module=\"govuk-button\">\n Secondary button\n</button>"
+ },
+ {
+ "name": "secondary disabled",
+ "options": {
+ "name": "secondary",
+ "text": "Secondary button disabled",
+ "classes": "govuk-button--secondary",
+ "disabled": true
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"secondary\" disabled aria-disabled=\"true\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button disabled\n</button>"
+ },
{
"name": "warning",
"options": {
@@ -87,6 +138,33 @@
"screenshot": false,
"html": "<button type=\"submit\" name=\"Warning\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</button>"
},
+ {
+ "name": "warning hover state",
+ "options": {
+ "name": "Warning",
+ "text": "Warning button",
+ "classes": "govuk-button--warning :hover"
+ },
+ "hidden": false,
+ "description": "A button for actions that need a warning",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"Warning\" class=\"govuk-button govuk-button--warning :hover\" data-module=\"govuk-button\">\n Warning button\n</button>"
+ },
+ {
+ "name": "warning disabled",
+ "options": {
+ "name": "warning",
+ "text": "Warning button disabled",
+ "classes": "govuk-button--warning",
+ "disabled": true
+ },
+ "hidden": false,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"warning\" disabled aria-disabled=\"true\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button disabled\n</button>"
+ },
{
"name": "inverse",
"options": {
@@ -102,6 +180,37 @@
"screenshot": true,
"html": "<button type=\"submit\" name=\"Inverse\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Inverse button\n</button>"
},
+ {
+ "name": "inverse hover state",
+ "options": {
+ "name": "Inverse",
+ "text": "Inverse button",
+ "classes": "govuk-button--inverse :hover"
+ },
+ "hidden": false,
+ "description": "A button that appears on dark backgrounds",
+ "pageTemplateOptions": {
+ "bodyClasses": "app-template__body--inverse"
+ },
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"Inverse\" class=\"govuk-button govuk-button--inverse :hover\" data-module=\"govuk-button\">\n Inverse button\n</button>"
+ },
+ {
+ "name": "inverse disabled",
+ "options": {
+ "name": "Inverse",
+ "text": "Inverse button",
+ "classes": "govuk-button--inverse",
+ "disabled": true
+ },
+ "hidden": false,
+ "description": "A button that appears on dark backgrounds",
+ "pageTemplateOptions": {
+ "bodyClasses": "app-template__body--inverse"
+ },
+ "screenshot": false,
+ "html": "<button type=\"submit\" name=\"Inverse\" disabled aria-disabled=\"true\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Inverse button\n</button>"
+ },
{
"name": "attributes",
"options": {
Action run for b027fa4 |
📋 StatsNo changes to any distributed file sizes! Action run for b027fa4 |
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6309
Member
romaricpascal
left a comment
romaricpascal
left a comment
There was a problem hiding this comment.
Looking good for the added states, should the :active state be on there as well?
Wondering also if we should have the focus styles on there as well to see if there's any styles for the variant leaking in the focus style when they shouldn't.
Same could be said for having combinations (:hover + :active, :focus + :hover, :focus + :hover + :active) but that starts to be a lot 😓
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.
Adds examples to button for:
Part of #6257 although will not resolve it
We previously remvoed a lot of these examples in #6091 however the design system designers expressed that it'd be useful to see these examples at a glance, in particular the different colours.
This could be remedied more completely by some sort of states API as detailed in #6257 (comment), but this PR does the job for now