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

Additional Tag modifier classes for different colours #1711

Merged
merged 2 commits into from
Mar 5, 2020
Merged

Additional Tag modifier classes for different colours #1711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1db835
Added additional colour modifiers for Tag component
adamsilver Jan 24, 2020
886b472
Add deprecated notice for the inactive modifier
adamsilver Mar 5, 2020
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
47 changes: 47 additions & 0 deletions src/govuk/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,54 @@
}
}

// Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
.govuk-tag--inactive {
background-color: govuk-colour("dark-grey", $legacy: "grey-1");
}

.govuk-tag--grey {
Copy link
Contributor

Choose a reason for hiding this comment

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

We should consider whether there's a need for inactive and grey, or whether they can be the same thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah. I considered deleting it, but I thought that would delay the contribution as I assumed it would be a breaking change.

Copy link
Contributor

Choose a reason for hiding this comment

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

We could consider marking it as deprecated, for example.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, and actually, it's not documented on the Tag component page. Is it documented publically elsewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've left it in, and maybe the deprecation can be a release note? Or do I need to do something in the code to mark it as deprecated?

Copy link
Contributor

Choose a reason for hiding this comment

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

Since it's not been documented we could consider dropping it in 4.0.0

Copy link
Member

Choose a reason for hiding this comment

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

Created an issue for dropping it in 4.0.0: #1757

I'll chat to @m-green about whether we want to add a deprecation notice for govuk-tag--inactive somewhere, seeing that we don't document the class anywhere currently.

Copy link
Member

Choose a reason for hiding this comment

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

@adamsilver Would you be okay to add something like

Deprecated. We will be removing this class in a future release, use `.govuk-tag--grey` instead.

above the govuk-tag--inactive class in the scss file? 🙏

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@hannalaakso done.

color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
}

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

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

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

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

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

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

.govuk-tag--pink {
color: govuk-shade(govuk-colour("pink"), 40);
background: govuk-tint(govuk-colour("pink"), 80);
}

.govuk-tag--green {
color: govuk-shade(govuk-colour("green"), 20);
background: govuk-tint(govuk-colour("green"), 80);
}

}
36 changes: 36 additions & 0 deletions src/govuk/components/tag/tag.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,39 @@ examples:
data:
text: alpha
classes: govuk-tag--inactive
- name: grey
adamsilver marked this conversation as resolved.
Show resolved Hide resolved
data:
text: Grey
classes: govuk-tag--grey
- name: blue
data:
text: Blue
classes: govuk-tag--blue
- name: turquoise
data:
text: Turquoise
classes: govuk-tag--turquoise
- name: green
data:
text: Green
classes: govuk-tag--green
- name: purple
data:
text: Purple
classes: govuk-tag--purple
- name: pink
data:
text: Pink
classes: govuk-tag--pink
- name: red
data:
text: Red
classes: govuk-tag--red
- name: orange
data:
text: Orange
classes: govuk-tag--orange
- name: yellow
data:
text: Yellow
classes: govuk-tag--yellow