Merge pull request #791 from MathieuPuech/feat/add-help-text-on-choice-input

feat(choice-input): add rendering of help-text

packages/checkbox-group/README.md

@@ -183,3 +183,29 @@ export const validationAdvanced = () => {
   `;
 };
 ```
+
+### Help text
+
+You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
+
+```js preview-story
+export const helpText = () => html`
+  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
+    <lion-checkbox
+      label="Archimedes"
+      .choiceValue=${'Archimedes'}
+      help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
+    ></lion-checkbox>
+    <lion-checkbox
+      label="Francis Bacon"
+      .choiceValue=${'Francis Bacon'}
+      help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
+    ></lion-checkbox>
+    <lion-checkbox
+      label="Marie Curie"
+      .choiceValue=${'Marie Curie'}
+      help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
+    ></lion-checkbox>
+  </lion-checkbox-group>
+`;
+```

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -92,6 +92,7 @@ export const ChoiceInputMixin = superclass =>
         css`
           :host {
             display: flex;
+            flex-wrap: wrap;
           }
 
           :host([hidden]) {
@@ -101,6 +102,10 @@ export const ChoiceInputMixin = superclass =>
           .choice-field__graphic-container {
             display: none;
           }
+          .choice-field__help-text {
+            display: block;
+            flex-basis: 100%;
+          }
         `,
       ];
     }
@@ -118,6 +123,9 @@ export const ChoiceInputMixin = superclass =>
         <div class="choice-field__label">
           <slot name="label"></slot>
         </div>
+        <small class="choice-field__help-text">
+          <slot name="help-text"></slot>
+        </small>
       `;
     }
 

packages/radio-group/README.md

@@ -180,3 +180,29 @@ export const validateItem = () => {
   `;
 };
 ```
+
+### Help text
+
+You can add help text on each checkbox with `help-text` attribute on the `<lion-radio>`.
+
+```js preview-story
+export const helpText = () => html`
+  <lion-radio-group name="dinosTwo" label="Favourite dinosaur">
+    <lion-radio
+      label="allosaurus"
+      .choiceValue=${'allosaurus'}
+      help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period"
+    ></lion-radio>
+    <lion-radio
+      label="brontosaurus"
+      .choiceValue=${'brontosaurus'}
+      help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
+    ></lion-radio>
+    <lion-radio
+      label="diplodocus"
+      .choiceValue=${'diplodocus'}
+      help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston"
+    ></lion-radio>
+  </lion-radio-group>
+`;
+```