From b5d1a71f46cbbdae00412e99fe60adff852d9cb6 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Sat, 14 Dec 2024 17:04:42 -0500
Subject: [PATCH] Simplify hint slots

---
 src/components/checkbox/checkbox.ts         | 13 +++++++++----
 src/components/color-picker/color-picker.ts | 12 ++++++++----
 src/components/input/input.ts               | 15 ++++++++++-----
 src/components/radio-group/radio-group.ts   | 15 ++++++++++-----
 src/components/select/select.ts             | 14 ++++++++++----
 src/components/switch/switch.ts             | 15 ++++++++++-----
 src/components/textarea/textarea.ts         | 15 ++++++++++-----
 src/styles/shadow/form-control.css          | 12 ++++++------
 8 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 9cd9f89b7..6b3f8557a 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -41,7 +41,7 @@ import styles from './checkbox.css';
  * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
  * @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  *
  * @cssproperty --background-color - The checkbox's background color.
  * @cssproperty --background-color-checked - The checkbox's background color when checked.
@@ -252,9 +252,14 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
           <slot part="label"></slot>
         </label>
 
-        <div aria-hidden=${hasHint ? 'false' : 'true'} class="form-control__hint" id="hint" part="form-control-hint">
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          class="${classMap({ 'has-slotted': hasHint })}"
+          id="hint"
+          part="hint"
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index c30891994..89be95240 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1119,7 +1119,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             'form-control--medium': this.size === 'medium',
             'form-control--large': this.size === 'large',
             'form-control--has-label': hasLabel,
-            'form-control--has-hint': hasHint
           })}
           part="trigger-container form-control"
           slot="trigger"
@@ -1168,9 +1167,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             aria-describedby="hint"
           ></button>
 
-          <div part="form-control-hint" id="hint" class="form-control__hint">
-            <slot name="hint">${this.hint}</slot>
-          </div>
+          <slot
+            name="hint"
+            part="hint"
+            class=${classMap({
+              'has-slotted': hasHint
+            })}
+            >${this.hint}</slot
+          >
         </div>
         ${colorPicker}
       </wa-dropdown>
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index fc1b56233..ae499bca1 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -44,7 +44,7 @@ import styles from './input.css';
  * @csspart form-control - The form control that wraps the label, input, and hint.
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  * @csspart base - The component's base wrapper.
  * @csspart input - The internal `<input>` control.
  * @csspart prefix - The container that wraps the prefix.
@@ -411,7 +411,6 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
           'form-control--has-label': hasLabel,
-          'form-control--has-hint': hasHint
         })}
       >
         <label
@@ -528,9 +527,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           </div>
         </div>
 
-        <div part="form-control-hint" id="hint" class="form-control__hint" aria-hidden=${hasHint ? 'false' : 'true'}>
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index dcc9147ae..48f25816e 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -35,7 +35,7 @@ import styles from './radio-group.css';
  * @csspart form-control - The form control that wraps the label, input, and hint.
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  * @csspart button-group - The button group that wraps radio buttons.
  * @csspart button-group__base - The button group's `base` part.
  */
@@ -326,7 +326,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
           'form-control--large': this.size === 'large',
           'form-control--radio-group': true,
           'form-control--has-label': hasLabel,
-          'form-control--has-hint': hasHint
         })}
         role="radiogroup"
         aria-labelledby="label"
@@ -353,9 +352,15 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
             : defaultSlot}
         </div>
 
-        <div part="form-control-hint" id="hint" class="form-control__hint" aria-hidden=${hasHint ? 'false' : 'true'}>
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          >${this.hint}</slot
+        >
       </fieldset>
     `;
   }
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index dd0b9aa0d..f64fdb52d 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -61,7 +61,7 @@ import styles from './select.css';
  * @csspart form-control - The form control that wraps the label, input, and hint.
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
  * @csspart suffix - The container that wraps the suffix slot.
@@ -931,9 +931,15 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           </wa-popup>
         </div>
 
-        <div part="form-control-hint" id="hint" class="form-control__hint" aria-hidden=${hasHint ? 'false' : 'true'}>
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 5f607a933..171335f03 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -34,7 +34,7 @@ import styles from './switch.css';
  * @csspart control - The control that houses the switch's thumb.
  * @csspart thumb - The switch's thumb.
  * @csspart label - The switch's label.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  *
  * @cssproperty --background-color - The switch's background color.
  * @cssproperty --background-color-checked - The switch's background color when checked.
@@ -243,7 +243,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
           'form-control--small': this.size === 'small',
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
-          'form-control--has-hint': hasHint
         })}
       >
         <label
@@ -286,9 +285,15 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
           </div>
         </label>
 
-        <div aria-hidden=${hasHint ? 'false' : 'true'} class="form-control__hint" id="hint" part="form-control-hint">
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 3ce1b119d..8885a845f 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -32,7 +32,7 @@ import styles from './textarea.css';
  * @csspart form-control - The form control that wraps the label, input, and hint.
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-hint - The hint's wrapper.
+ * @csspart hint - The hint's wrapper.
  * @csspart base - The component's base wrapper.
  * @csspart textarea - The internal `<textarea>` control.
  *
@@ -322,7 +322,6 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
           'form-control--has-label': hasLabel,
-          'form-control--has-hint': hasHint
         })}
       >
         <label
@@ -384,9 +383,15 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
           </div>
         </div>
 
-        <div part="form-control-hint" id="hint" class="form-control__hint" aria-hidden=${hasHint ? 'false' : 'true'}>
-          <slot name="hint">${this.hint}</slot>
-        </div>
+        <slot
+          name="hint"
+          part="hint"
+          aria-hidden=${hasHint ? 'false' : 'true'}
+          class=${classMap({
+            'has-slotted': hasHint
+          })}
+          >${this.hint}</slot
+        >
       </div>
     `;
   }
diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css
index 7bb627e89..9f445d3e3 100644
--- a/src/styles/shadow/form-control.css
+++ b/src/styles/shadow/form-control.css
@@ -30,12 +30,8 @@
 }
 
 /* Help text */
-.form-control [part~='form-control-hint'] {
-  display: none;
-}
-
-.form-control--has-hint [part~='form-control-hint'] {
-  display: block;
+[part~='form-control-hint'],
+[part~='hint'] {
   color: var(--wa-color-text-quiet);
   margin-top: var(--wa-space-3xs);
   font-size: var(--size-smaller, 85%);
@@ -55,4 +51,8 @@
   &:is(.form-control--radio-group *) {
     margin-top: var(--wa-space-2xs);
   }
+
+  &:not(.has-slotted, .form-control--has-hint) {
+    display: none;
+  }
 }