Add form legend required symbol (canonical#5214)

* Add form legend required symbol

* Add is-required fieldset legend example

* Add fieldset required example

* Fix stylelint issues

* Use margin for spacing

* run prettier

* Apply code suggestions

* Update vanilla version

* Update to 4.16.0

* Update releases.yml with new class variant

---------

Co-authored-by: Julie Muzina <julie.muzina@canonical.com>

releases.yml

@@ -4,6 +4,10 @@
       url: /docs/patterns/cta-block#borderless
       status: New
       notes: We've introduced a new borderless variant of the CTA block component.
+    - component: Forms / Fieldset required
+      url: /docs/base/forms#fieldset
+      status: New
+      notes: We've introduced <code>is-required</code> to legend fieldset elements.
 - version: 4.15.0
   features:
     - component: CTA Block

scss/_base_forms.scss

@@ -225,5 +225,11 @@
     margin-right: 0;
     padding: calc($spv--large - $input-border-thickness);
   }
+
+  legend {
+    &.is-required::before {
+      content: '* ';
+    }
+  }
   // stylelint-enable selector-max-type
 }

templates/docs/base/forms.md

@@ -132,6 +132,12 @@ You can use the `<fieldset>` element to divide the form into different logical s
 View example of the base form fieldset
 </a></div>
 
+You can add `is-required` to `<legend>` to indicate required fields.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/forms/fieldset-required/" class="js-example">
+  View example of fieldset required fields
+</a></div>
+
 ## Inline
 
 By applying the class `.p-form--inline` and wrapping any form control in `.p-form__group` you can change the layout style of any form to be inline.

templates/docs/examples/patterns/forms/combined.html

@@ -11,6 +11,7 @@
 <section>{% include 'docs/examples/patterns/forms/checkbox-inline.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/checkbox-validation.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/dense.html' %}</section>
+<section>{% include 'docs/examples/patterns/forms/fieldset-required.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-help-text.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-inline.html' %}</section>
 <section>{% include 'docs/examples/patterns/forms/form-stacked.html' %}</section>

templates/docs/examples/patterns/forms/fieldset-required.html

@@ -0,0 +1,24 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Fieldset required{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+<form>
+  <fieldset>
+    <legend class="is-required">Required input</legend>
+    <label class="p-radio">
+      <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioExample1">
+      <span class="p-radio__label" id="radioExample1">.p-radio</span>
+    </label>
+    <label class="p-radio">
+      <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioExample2">
+      <span class="p-radio__label" id="radioExample2">.p-radio</span>
+    </label>
+    <label class="p-radio">
+      <input type="radio" class="p-radio__input" name="radioPattern" aria-labelledby="radioExample3">
+      <span class="p-radio__label" id="radioExample3">.p-radio</span>
+    </label>
+  </fieldset>
+</form>
+{% endblock %}