From c7cc7dfbdc7f2409b3282198ece9ecff7bcf213a Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <dylan.decrulle@outlook.fr>
Date: Thu, 11 Jul 2024 14:26:26 +0200
Subject: [PATCH] fix: do not display empty `<label></label>` (#275)

---
 src/Input.tsx                | 16 +++++++++-------
 src/Range.tsx                | 18 ++++++++++--------
 src/SegmentedControl.tsx     | 26 ++++++++++++++------------
 src/Select.tsx               | 12 ++++++++----
 src/SelectNext.tsx           | 10 ++++++----
 src/ToggleSwitch.tsx         | 22 ++++++++++++----------
 src/Upload.tsx               | 10 ++++++----
 src/blocks/PasswordInput.tsx | 16 +++++++++-------
 src/shared/Fieldset.tsx      | 14 ++++++++------
 9 files changed, 82 insertions(+), 62 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index bcf240b2a..d04e60aa8 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -127,13 +127,15 @@ export const Input = memo(
                 id={id}
                 {...rest}
             >
-                <label
-                    className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
-                    htmlFor={inputId}
-                >
-                    {label}
-                    {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label
+                        className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
+                        htmlFor={inputId}
+                    >
+                        {label}
+                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                    </label>
+                )}
                 {(() => {
                     const nativeInputOrTextArea = (
                         <NativeInputOrTextArea
diff --git a/src/Range.tsx b/src/Range.tsx
index de9a62083..99c8c4221 100644
--- a/src/Range.tsx
+++ b/src/Range.tsx
@@ -129,14 +129,16 @@ export const Range = memo(
                 id={`${id}-group`}
                 {...rest}
             >
-                <label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
-                    {label}
-                    {hintText !== undefined && (
-                        <span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
-                            {hintText}
-                        </span>
-                    )}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
+                        {label}
+                        {hintText !== undefined && (
+                            <span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
+                                {hintText}
+                            </span>
+                        )}
+                    </label>
+                )}
                 <div
                     className={cx(
                         fr.cx(
diff --git a/src/SegmentedControl.tsx b/src/SegmentedControl.tsx
index a288f8412..04636d2fb 100644
--- a/src/SegmentedControl.tsx
+++ b/src/SegmentedControl.tsx
@@ -172,18 +172,20 @@ export const SegmentedControl = memo(
                                     name={segmentedName}
                                     type="radio"
                                 />
-                                <label
-                                    className={cx(
-                                        fr.cx(
-                                            segment.iconId !== undefined && segment.iconId,
-                                            "fr-label"
-                                        ),
-                                        classes["element-each__label"]
-                                    )}
-                                    htmlFor={segmentId}
-                                >
-                                    {segment.label}
-                                </label>
+                                {segment.label && (
+                                    <label
+                                        className={cx(
+                                            fr.cx(
+                                                segment.iconId !== undefined && segment.iconId,
+                                                "fr-label"
+                                            ),
+                                            classes["element-each__label"]
+                                        )}
+                                        htmlFor={segmentId}
+                                    >
+                                        {segment.label}
+                                    </label>
+                                )}
                             </div>
                         );
                     })}
diff --git a/src/Select.tsx b/src/Select.tsx
index 12eaa7eef..6e6324517 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -90,10 +90,14 @@ export const Select = memo(
                 style={style}
                 {...rest}
             >
-                <label className={fr.cx("fr-label")} htmlFor={selectId}>
-                    {label}
-                    {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
-                </label>
+                {Boolean(label || hint) && (
+                    <label className={fr.cx("fr-label")} htmlFor={selectId}>
+                        {label}
+                        {hint !== undefined && (
+                            <span className={fr.cx("fr-hint-text")}>{hint}</span>
+                        )}
+                    </label>
+                )}
                 <select
                     className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
                     id={selectId}
diff --git a/src/SelectNext.tsx b/src/SelectNext.tsx
index c0212efc5..c96cc23a6 100644
--- a/src/SelectNext.tsx
+++ b/src/SelectNext.tsx
@@ -140,10 +140,12 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
             style={style}
             {...rest}
         >
-            <label className={fr.cx("fr-label")} htmlFor={selectId}>
-                {label}
-                {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
-            </label>
+            {Boolean(label || hint) && (
+                <label className={fr.cx("fr-label")} htmlFor={selectId}>
+                    {label}
+                    {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
+                </label>
+            )}
             <select
                 className={cx(fr.cx("fr-select"), nativeSelectProps?.className)}
                 id={selectId}
diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx
index 5a53fb31d..6d81c7d4b 100644
--- a/src/ToggleSwitch.tsx
+++ b/src/ToggleSwitch.tsx
@@ -120,16 +120,18 @@ export const ToggleSwitch = memo(
                     checked={props_checked ?? checked}
                     name={name}
                 />
-                <label
-                    className={cx(fr.cx("fr-toggle__label"), classes.label)}
-                    htmlFor={inputId}
-                    {...(showCheckedHint && {
-                        "data-fr-checked-label": t("checked"),
-                        "data-fr-unchecked-label": t("unchecked")
-                    })}
-                >
-                    {label}
-                </label>
+                {label && (
+                    <label
+                        className={cx(fr.cx("fr-toggle__label"), classes.label)}
+                        htmlFor={inputId}
+                        {...(showCheckedHint && {
+                            "data-fr-checked-label": t("checked"),
+                            "data-fr-unchecked-label": t("unchecked")
+                        })}
+                    >
+                        {label}
+                    </label>
+                )}
                 {helperText && (
                     <p className={cx(fr.cx("fr-hint-text"), classes.hint)} id={hintId}>
                         {helperText}
diff --git a/src/Upload.tsx b/src/Upload.tsx
index c402afa95..2cfca967e 100644
--- a/src/Upload.tsx
+++ b/src/Upload.tsx
@@ -72,10 +72,12 @@ export const Upload = memo(
                 )}
                 ref={ref}
             >
-                <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
-                    {label}
-                    <span className={fr.cx("fr-hint-text")}>{hint}</span>
-                </label>
+                {Boolean(label || hint) && (
+                    <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
+                        {label}
+                        <span className={fr.cx("fr-hint-text")}>{hint}</span>
+                    </label>
+                )}
                 <input
                     aria-describedby={messageId}
                     aria-disabled={disabled}
diff --git a/src/blocks/PasswordInput.tsx b/src/blocks/PasswordInput.tsx
index c1e957876..d947e84b4 100644
--- a/src/blocks/PasswordInput.tsx
+++ b/src/blocks/PasswordInput.tsx
@@ -101,13 +101,15 @@ export const PasswordInput = memo(
                 ref={ref}
                 {...rest}
             >
-                <label
-                    className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
-                    htmlFor={inputId}
-                >
-                    {label}
-                    {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label
+                        className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
+                        htmlFor={inputId}
+                    >
+                        {label}
+                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                    </label>
+                )}
                 <div className={fr.cx("fr-input-wrap")}>
                     <input
                         {...nativeInputProps}
diff --git a/src/shared/Fieldset.tsx b/src/shared/Fieldset.tsx
index 1b5720980..a76271448 100644
--- a/src/shared/Fieldset.tsx
+++ b/src/shared/Fieldset.tsx
@@ -167,12 +167,14 @@ export const Fieldset = memo(
                                 name={radioName}
                                 {...nativeInputProps}
                             />
-                            <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
-                                {label}
-                                {hintText !== undefined && (
-                                    <span className={fr.cx("fr-hint-text")}>{hintText}</span>
-                                )}
-                            </label>
+                            {Boolean(label || hintText) && (
+                                <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
+                                    {label}
+                                    {hintText !== undefined && (
+                                        <span className={fr.cx("fr-hint-text")}>{hintText}</span>
+                                    )}
+                                </label>
+                            )}
                             {"illustration" in rest && (
                                 <div className={fr.cx("fr-radio-rich__img")}>
                                     {rest.illustration}