Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tag design changes #3502

Merged
merged 2 commits into from
May 23, 2023
Merged

Tag design changes #3502

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
976535e
Tag design changes
frankieroberto Apr 14, 2023
625532f
Add note to changelog about tag changes
frankieroberto May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...ages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

exports[`Phase banner with dependant components renders the tag component classes 1`] = `
<strong class="govuk-tag govuk-phase-banner__content__tag govuk-tag--grey">
alpha
Alpha
</strong>
`;

exports[`Phase banner with dependant components renders the tag component html 1`] = `
<strong class="govuk-tag govuk-phase-banner__content__tag">
<em>
alpha
Alpha
</em>
</strong>
`;

exports[`Phase banner with dependant components renders the tag component text 1`] = `
<strong class="govuk-tag govuk-phase-banner__content__tag">
alpha
Alpha
</strong>
`;
9 changes: 9 additions & 0 deletions packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,16 @@
}

.govuk-phase-banner__content__tag {
@include govuk-font($size: 16);
margin-right: govuk-spacing(2);

// When forced colour mode is active, for example to provide high contrast,
// the background colour of the tag is the same as the rest of the page. To ensure
// that the tag is perceived as separate to the rest of the text in the phase banner,
// it is made bold.
@media screen and (forced-colors: active) {
font-weight: bold;
}
}

.govuk-phase-banner__text {
Expand Down
6 changes: 3 additions & 3 deletions packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ examples:
- name: default
data:
tag:
text: alpha
text: Alpha
html: This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.

# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
Expand Down Expand Up @@ -54,11 +54,11 @@ examples:
data:
text: This is a new service – your feedback will help us to improve it
tag:
html: <em>alpha</em>
html: <em>Alpha</em>
- name: tag classes
hidden: true
data:
text: This is a new service – your feedback will help us to improve it
tag:
classes: govuk-tag--grey
text: alpha
text: Alpha
78 changes: 51 additions & 27 deletions packages/govuk-frontend/src/govuk/components/tag/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,94 @@
@include govuk-exports("govuk/component/tag") {
.govuk-tag {
@include govuk-font($size: 16, $weight: bold, $line-height: 1);
@include govuk-font($size: 19);

display: inline-block;

padding-top: 5px;
// These negative margins make sure that the tag component doesn’t increase the
// size of its container. Otherwise, for example, a table row containing a tag
// will be taller than one containing plain text.
//
// The negative margin added to the top and bottom matches the extra padding added.
margin-top: -2px;
margin-bottom: -3px;

padding-top: 2px;
padding-right: 8px;
padding-bottom: 4px;
padding-bottom: 3px;
padding-left: 8px;

// When a user customises their colours often the background is removed,
// by adding a outline we ensure that the tag component still keeps it's meaning.
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
outline: 2px solid transparent;
outline-offset: -2px;

color: govuk-colour("white");
background-color: govuk-colour("blue");
letter-spacing: 1px;
color: govuk-shade(govuk-colour("blue"), 60%);
background-color: govuk-tint(govuk-colour("blue"), 70%);

text-decoration: none;
text-transform: uppercase;

// When forced colour mode is active, for example to provide high contrast,
// the background colour of the tag is the same as the rest of the page. To ensure
// that the tag is perceived as separate from any surround text, it is made bold.
//
// Transparent outlines are no longer added, as they make the Tag look indistinguishable
// from a button – but the tag is not interactive in the same way.
@media screen and (forced-colors: active) {
font-weight: bold;
}
}

// Previously the whole tag was transformed to UPPERCASE. We’ve since decided to switch
// to title case to improve readability. The first letter is uppercased to ease the transition,
// as the text may be all lowercase within the HTML itself.
//
// 'capitalize' is used instead of 'uppercase' as a workaround for a spacing bug in Firefox.
.govuk-tag::first-letter {
text-transform: capitalize;
}

.govuk-tag--grey {
color: govuk-shade(govuk-colour("dark-grey"), 30%);
background: govuk-tint(govuk-colour("dark-grey"), 90%);
color: govuk-shade(govuk-colour("dark-grey"), 50%);
background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
}

.govuk-tag--purple {
color: govuk-shade(govuk-colour("purple"), 20%);
background: govuk-tint(govuk-colour("purple"), 80%);
color: govuk-shade(govuk-colour("bright-purple"), 50%);
background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
}

.govuk-tag--turquoise {
color: govuk-shade(govuk-colour("turquoise"), 60%);
background: govuk-tint(govuk-colour("turquoise"), 70%);
background-color: govuk-tint(govuk-colour("turquoise"), 80%);
}

.govuk-tag--blue {
color: govuk-shade(govuk-colour("blue"), 30%);
background: govuk-tint(govuk-colour("blue"), 80%);
color: govuk-shade(govuk-colour("blue"), 60%);
background-color: govuk-tint(govuk-colour("blue"), 70%);
}

.govuk-tag--light-blue {
color: govuk-shade(govuk-colour("blue"), 60%);
background-color: govuk-tint(govuk-colour("blue"), 90%);
}

.govuk-tag--yellow {
color: govuk-shade(govuk-colour("yellow"), 65%);
background: govuk-tint(govuk-colour("yellow"), 75%);
background-color: govuk-tint(govuk-colour("yellow"), 75%);
}

.govuk-tag--orange {
color: govuk-shade(govuk-colour("orange"), 55%);
background: govuk-tint(govuk-colour("orange"), 70%);
background-color: govuk-tint(govuk-colour("orange"), 70%);
}

.govuk-tag--red {
color: govuk-shade(govuk-colour("red"), 30%);
background: govuk-tint(govuk-colour("red"), 80%);
color: govuk-shade(govuk-colour("red"), 80%);
background-color: govuk-tint(govuk-colour("red"), 75%);
}

.govuk-tag--pink {
color: govuk-shade(govuk-colour("pink"), 40%);
background: govuk-tint(govuk-colour("pink"), 80%);
color: govuk-shade(govuk-colour("pink"), 50%);
background-color: govuk-tint(govuk-colour("pink"), 85%);
frankieroberto marked this conversation as resolved.
Show resolved Hide resolved
}

.govuk-tag--green {
color: govuk-shade(govuk-colour("green"), 20%);
background: govuk-tint(govuk-colour("green"), 80%);
background-color: govuk-tint(govuk-colour("green"), 80%);
}
}
14 changes: 7 additions & 7 deletions packages/govuk-frontend/src/govuk/components/tag/tag.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,7 @@ params:
examples:
- name: default
data:
text: alpha
- name: inactive
data:
text: alpha
classes: govuk-tag--grey
text: Alpha
- name: grey
data:
text: Grey
Expand All @@ -32,6 +28,10 @@ examples:
data:
text: Blue
classes: govuk-tag--blue
- name: light blue
data:
text: Light blue
classes: govuk-tag--light-blue
- name: turquoise
data:
text: Turquoise
Expand Down Expand Up @@ -72,8 +72,8 @@ examples:
- name: html as text
hidden: true
data:
text: <span>alpha</span>
text: <span>Alpha</span>
- name: html
hidden: true
data:
html: <span>alpha</span>
html: <span>Alpha</span>
8 changes: 4 additions & 4 deletions packages/govuk-frontend/src/govuk/components/tag/template.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ describe('Tag', () => {

const $component = $('.govuk-tag')
expect($component.get(0).tagName).toEqual('strong')
expect($component.text()).toContain('alpha')
expect($component.text()).toContain('Alpha')
})

it('renders classes', () => {
const $ = render('tag', examples.inactive)
const $ = render('tag', examples.grey)

const $component = $('.govuk-tag')
expect($component.hasClass('govuk-tag--grey')).toBeTruthy()
Expand Down Expand Up @@ -47,14 +47,14 @@ describe('Tag', () => {
const $ = render('tag', examples['html as text'])

const $component = $('.govuk-tag')
expect($component.html()).toContain('&lt;span&gt;alpha&lt;/span&gt;')
expect($component.html()).toContain('&lt;span&gt;Alpha&lt;/span&gt;')
})

it('renders html', () => {
const $ = render('tag', examples.html)

const $component = $('.govuk-tag')
expect($component.html()).toContain('<span>alpha</span>')
expect($component.html()).toContain('<span>Alpha</span>')
})
})
})