Guidance for the additional colours for the Tag component

[adamsilver]

First stab at guidance for the additional Tag colours as explained here:
alphagov/govuk-frontend#1711

[govuk-design-system-ci]

You can preview this change here:

Built with commit 0216af3

https://deploy-preview-1141--govuk-design-system-preview.netlify.com

[NickColley]

🌈 are you missing the --grey modifier you're proposing?

[StephenGill]

Hi - looks great, but would be good to include a little more detail in the guidance.

I've drafted some here: https://docs.google.com/document/d/186_znVV07PQg44GOkJ7tbyTwY3JLgXuYJ5K7CtFOJBE/edit

@adamsilver @timpaul @m-green could you have a look and let me know what you think?

[adamsilver]

@StephenGill I've made comments and suggestions on the guidance. Thanks a lot for putting this together.

[StephenGill]

Thanks @adamsilver. I've had a go at re-drafting it - could you have a look?

https://docs.google.com/document/d/186_znVV07PQg44GOkJ7tbyTwY3JLgXuYJ5K7CtFOJBE/edit

[adamsilver]

Thanks @StephenGill. Looks fab. I spotted a typo and made one suggestion. Feel free to reject it though—no biggie.

[StephenGill]

Thanks @adamsilver - do you want to update the PR with the additional guidance, or is there an easier way to do it?

[adamsilver]

@StephenGill I'll do it now!

[simonwhatley]

@adamsilver it is worth highlighting your tag examples are just that, examples. The words used in the tags should be defined by the service team based on user needs.

[adamsilver]

@whatterz we don't point out examples are examples elsewhere in the design system (to my knowledge) so I'd be reluctant to do that just for the Tag component.

But, if the examples are confusing maybe we can do something about that. For example, make the examples better, or split up the examples into separate example boxes with descriptions for suggested use.

I guess it would be good to understand exactly what's confusing and why.

[adamsilver]

@timpaul @StephenGill I've changed the guidance based on feedback from the working group. Let me know what you think.

[StephenGill]

Thanks for this.

When I re-read it, it seemed a little abstract (my fault - it comes from the draft I did).

I've done a bit of a re-write and restructure so it addresses concrete use cases a little more directly. But hopefully I've kept the substance of what you agreed with the working group.

See what you think @adamsilver - if you're happy I'll push the changes: https://docs.google.com/document/d/1-SThdCRmgvAPBNSngoZAa_6wEz9ZDVT2vMYV9lLX_Xg/edit

[adamsilver]

@StephenGill really like the restructure! I've added a couple comments/suggestions.

[StephenGill]

Hi @adamsilver - are you happy with this version? If you are, I'll ask one of the team to review it

[adamsilver]

@StephenGill the preview isn't working so I can't check.

[StephenGill]

Sorry - probably my fault. I'll ask someone to look into it.

[36degrees]

This is dependant on a release of GOV.UK Frontend with the new tag modifiers – once that's done, the changes to package.json should be reverted. Feel free to dismiss this review once that's happened.

[adamsilver]

@StephenGill I've removed the note about starting with solid colours as per our chat on the Google doc.

Can we add the existing example at the top back to this? I think it's useful to include it as a way to confirm I'm looking at the right component.

[StephenGill]

Thanks Adam -

@timpaul and I talked about the example. Because it shows the tag from the phase banner - which is quite a long way removed from the typical use case for tags - we thought it best to remove it.