feat(slots): add supoprt for label placement in a slot #40

AlaskaAirlines · Jul 13, 2021 · aeb6f88 · aeb6f88
1 parent 71ef50b
commit aeb6f88
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -68,7 +68,28 @@ <h1>auro-radio</h1>
         </template>
       </demo-snippet>
 
-      <p>Group with pre-selected option and clear-all button</p>
+      <p>Group w/slots</p>
+      <demo-snippet>
+        <template>
+            <auro-radio-group required>
+              <span slot="legend">Will you pick a plan?</span>
+              <auro-radio id="radio10" name="radioDemo10" value="yes">
+                <b>Lounge $300 USD</b><br>
+                <span slot="content">
+                  <small>These are small sub-text words</small>
+                  <ul>
+                    <li>All Alaska Lounges...</li>
+                    <li>1 year membership</li>
+                  </ul>
+                </span>
+              </auro-radio>
+              <auro-radio id="radio11" label="No" name="radioDemo11" value="no"></auro-radio>
+              <auro-radio id="radio12" label="No" name="radioDemo12" value="maybe">Maybe</auro-radio>
+            </auro-radio-group>
+        </template>
+      </demo-snippet>
+
+      <p>Simple group</p>
       <demo-snippet>
         <template>
             <auro-radio-group required>

diff --git a/src/auro-radio.js b/src/auro-radio.js
@@ -134,11 +134,12 @@ class AuroRadio extends LitElement {
           tabIndex="-1"
         />
 
-        <label
-          for="${ifDefined(this.id)}"
-          class="${classMap(labelClasses)}"
-        >${this.label}</label>
+        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}">
+          <slot>${this.label}</slot>
+        </label>
+
       </div>
+      <slot name="content" class="slotContent"></slot>
     `;
   }
 }

diff --git a/src/auro-radio.scss b/src/auro-radio.scss
@@ -153,3 +153,9 @@
 
   color: var(--auro-color-text-error-on-light);
 }
+
+.slotContent {
+  display: block;
+  margin-left: var(--auro-size-xl);
+  padding-left: var(--auro-size-xs);
+}