fix(radio-button): Remove undocumented property/attribute from the Ho…

…st element. #2059
Esri · Apr 27, 2021 · 89e90b5 · 89e90b5
1 parent 0bee24d
commit 89e90b5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/src/components/calcite-radio-button/calcite-radio-button.scss b/src/components/calcite-radio-button/calcite-radio-button.scss
@@ -1,7 +1,10 @@
 :host {
   @apply cursor-pointer inline-block;
 }
-:host([labeled]) {
+.container {
+  @apply inline-flex;
+}
+.container--labeled {
   @apply mb-0 items-center inline-flex gap-2;
 }
 :host([disabled]) {
@@ -10,23 +13,23 @@
     @apply cursor-default;
   }
 }
-:host([scale="s"][labeled]) {
+:host([scale="s"]) .container--labeled {
   @apply mb-2 mr-3;
   @supports not (display: grid) {
     calcite-radio {
       @apply mr-2;
     }
   }
 }
-:host([scale="m"][labeled]) {
+:host([scale="m"]) .container--labeled {
   @apply mb-2 mr-4;
   @supports not (display: grid) {
     calcite-radio {
       @apply mr-2;
     }
   }
 }
-:host([scale="l"][labeled]) {
+:host([scale="l"]) .container--labeled {
   @apply gap-3 mb-2 mr-5;
   @supports not (display: grid) {
     calcite-radio {

diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx
@@ -353,32 +353,34 @@ export class CalciteRadioButton {
 
   render(): VNode {
     return (
-      <Host labeled={!!this.el.textContent}>
-        <input
-          aria-label={this.value || this.guid}
-          checked={this.checked}
-          disabled={this.disabled}
-          hidden={this.hidden}
-          id={`${this.guid}-input`}
-          name={this.name}
-          onBlur={this.onInputBlur}
-          onFocus={this.onInputFocus}
-          ref={this.setInputEl}
-          required={this.required}
-          type="radio"
-          value={this.value}
-        />
-        <calcite-radio
-          checked={this.checked}
-          disabled={this.disabled}
-          focused={this.focused}
-          hidden={this.hidden}
-          hovered={this.hovered}
-          ref={(el) => (this.radio = el)}
-          scale={this.scale}
-          theme={this.theme}
-        />
-        {this.renderLabel()}
+      <Host>
+        <div class={{ container: true, "container--labeled": !!this.el.textContent }}>
+          <input
+            aria-label={this.value || this.guid}
+            checked={this.checked}
+            disabled={this.disabled}
+            hidden={this.hidden}
+            id={`${this.guid}-input`}
+            name={this.name}
+            onBlur={this.onInputBlur}
+            onFocus={this.onInputFocus}
+            ref={this.setInputEl}
+            required={this.required}
+            type="radio"
+            value={this.value}
+          />
+          <calcite-radio
+            checked={this.checked}
+            disabled={this.disabled}
+            focused={this.focused}
+            hidden={this.hidden}
+            hovered={this.hovered}
+            ref={(el) => (this.radio = el)}
+            scale={this.scale}
+            theme={this.theme}
+          />
+          {this.renderLabel()}
+        </div>
       </Host>
     );
   }