Add form legend required symbol

[britneywwc]

Done

• Add is-required class to fieldset legend

Fixes [list issues/bugs if needed]

QA

• Open https://vanilla-framework-5214.demos.haus/docs/examples/patterns/forms/fieldset-required?theme=light
• See that the asterisk shows for fieldset legend

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

Thanks @britneywwc, could you share some context to it, where do we show required on fieldset level instead of input level?

[britneywwc]

Hi @bartaz. Yeah sure, when checkbox/radio inputs are grouped under a fieldset and we wish to set the legend for that fieldset group to show that it's required. We set required on the input level as well but the intention behind this is to show the required label (*) on the corresponding legend.

Example use case here: https://github.com/canonical/ubuntu.com/blob/56e02eb43914c928fc20e553f75eb70ae56e4d74/templates/kernel/real-time/contact-us.html#L312

Please let me know it makes sense to add it to the legend field, it's ongoing work so I figured this could be upstreamed if useful.

[bartaz]

In such case I'd suggest making an example that reflects this use case (have a group of checkboxes inside the fieldset, rather than text input).

[bartaz]

There seem to be some linting/prettier issues that fail the tests. You can run dotrun test locally to see them as well.

For the linter failing that we don't allow element selectors, just disable linting for that (we are doing that for all base styles, because we expect them to be on elements).

[jmuzina]

Added a note about adding this to combined forms example to ensure this gets tested by Percy.

Also, I think this should set package.json package version to 4.15.1 as 4.15.0 has already been released and no PR has updated main to 4.15.1 yet.

edit: updated to 4.16.0 as we have since pushed a minor version update to staging :)

[britneywwc]

Thanks for all the suggestions, I've addressed them in the recent pushes. Please have another look!

[jmuzina]

Thanks @britneywwc ! Another thing - can we get an entry in releases.yml announcing the new class variant?

[pastelcyborg]

LGTM; please just roll back that content/margin-right change in the unresolved conversation and it's good to go!