Skip to content

Commit c7cc7df

Browse files
ddecrulleddecrulle
authored
fix: do not display empty <label></label> (#275)
1 parent 5507541 commit c7cc7df

File tree

9 files changed

+82
-62
lines changed

9 files changed

+82
-62
lines changed

‎src/Input.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,15 @@ export const Input = memo(
127127
id={id}
128128
{...rest}
129129
>
130-
<label
131-
className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
132-
htmlFor={inputId}
133-
>
134-
{label}
135-
{hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
136-
</label>
130+
{Boolean(label || hintText) && (
131+
<label
132+
className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
133+
htmlFor={inputId}
134+
>
135+
{label}
136+
{hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
137+
</label>
138+
)}
137139
{(() => {
138140
const nativeInputOrTextArea = (
139141
<NativeInputOrTextArea

‎src/Range.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,14 +129,16 @@ export const Range = memo(
129129
id={`${id}-group`}
130130
{...rest}
131131
>
132-
<label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
133-
{label}
134-
{hintText !== undefined && (
135-
<span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
136-
{hintText}
137-
</span>
138-
)}
139-
</label>
132+
{Boolean(label || hintText) && (
133+
<label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
134+
{label}
135+
{hintText !== undefined && (
136+
<span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
137+
{hintText}
138+
</span>
139+
)}
140+
</label>
141+
)}
140142
<div
141143
className={cx(
142144
fr.cx(

‎src/SegmentedControl.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -172,18 +172,20 @@ export const SegmentedControl = memo(
172172
name={segmentedName}
173173
type="radio"
174174
/>
175-
<label
176-
className={cx(
177-
fr.cx(
178-
segment.iconId !== undefined && segment.iconId,
179-
"fr-label"
180-
),
181-
classes["element-each__label"]
182-
)}
183-
htmlFor={segmentId}
184-
>
185-
{segment.label}
186-
</label>
175+
{segment.label && (
176+
<label
177+
className={cx(
178+
fr.cx(
179+
segment.iconId !== undefined && segment.iconId,
180+
"fr-label"
181+
),
182+
classes["element-each__label"]
183+
)}
184+
htmlFor={segmentId}
185+
>
186+
{segment.label}
187+
</label>
188+
)}
187189
</div>
188190
);
189191
})}

‎src/Select.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,14 @@ export const Select = memo(
9090
style={style}
9191
{...rest}
9292
>
93-
<label className={fr.cx("fr-label")} htmlFor={selectId}>
94-
{label}
95-
{hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
96-
</label>
93+
{Boolean(label || hint) && (
94+
<label className={fr.cx("fr-label")} htmlFor={selectId}>
95+
{label}
96+
{hint !== undefined && (
97+
<span className={fr.cx("fr-hint-text")}>{hint}</span>
98+
)}
99+
</label>
100+
)}
97101
<select
98102
className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
99103
id={selectId}

‎src/SelectNext.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,12 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
140140
style={style}
141141
{...rest}
142142
>
143-
<label className={fr.cx("fr-label")} htmlFor={selectId}>
144-
{label}
145-
{hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
146-
</label>
143+
{Boolean(label || hint) && (
144+
<label className={fr.cx("fr-label")} htmlFor={selectId}>
145+
{label}
146+
{hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
147+
</label>
148+
)}
147149
<select
148150
className={cx(fr.cx("fr-select"), nativeSelectProps?.className)}
149151
id={selectId}

‎src/ToggleSwitch.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -120,16 +120,18 @@ export const ToggleSwitch = memo(
120120
checked={props_checked ?? checked}
121121
name={name}
122122
/>
123-
<label
124-
className={cx(fr.cx("fr-toggle__label"), classes.label)}
125-
htmlFor={inputId}
126-
{...(showCheckedHint && {
127-
"data-fr-checked-label": t("checked"),
128-
"data-fr-unchecked-label": t("unchecked")
129-
})}
130-
>
131-
{label}
132-
</label>
123+
{label && (
124+
<label
125+
className={cx(fr.cx("fr-toggle__label"), classes.label)}
126+
htmlFor={inputId}
127+
{...(showCheckedHint && {
128+
"data-fr-checked-label": t("checked"),
129+
"data-fr-unchecked-label": t("unchecked")
130+
})}
131+
>
132+
{label}
133+
</label>
134+
)}
133135
{helperText && (
134136
<p className={cx(fr.cx("fr-hint-text"), classes.hint)} id={hintId}>
135137
{helperText}

‎src/Upload.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,12 @@ export const Upload = memo(
7272
)}
7373
ref={ref}
7474
>
75-
<label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
76-
{label}
77-
<span className={fr.cx("fr-hint-text")}>{hint}</span>
78-
</label>
75+
{Boolean(label || hint) && (
76+
<label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
77+
{label}
78+
<span className={fr.cx("fr-hint-text")}>{hint}</span>
79+
</label>
80+
)}
7981
<input
8082
aria-describedby={messageId}
8183
aria-disabled={disabled}

‎src/blocks/PasswordInput.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,15 @@ export const PasswordInput = memo(
101101
ref={ref}
102102
{...rest}
103103
>
104-
<label
105-
className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
106-
htmlFor={inputId}
107-
>
108-
{label}
109-
{hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
110-
</label>
104+
{Boolean(label || hintText) && (
105+
<label
106+
className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
107+
htmlFor={inputId}
108+
>
109+
{label}
110+
{hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
111+
</label>
112+
)}
111113
<div className={fr.cx("fr-input-wrap")}>
112114
<input
113115
{...nativeInputProps}

‎src/shared/Fieldset.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,14 @@ export const Fieldset = memo(
167167
name={radioName}
168168
{...nativeInputProps}
169169
/>
170-
<label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
171-
{label}
172-
{hintText !== undefined && (
173-
<span className={fr.cx("fr-hint-text")}>{hintText}</span>
174-
)}
175-
</label>
170+
{Boolean(label || hintText) && (
171+
<label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
172+
{label}
173+
{hintText !== undefined && (
174+
<span className={fr.cx("fr-hint-text")}>{hintText}</span>
175+
)}
176+
</label>
177+
)}
176178
{"illustration" in rest && (
177179
<div className={fr.cx("fr-radio-rich__img")}>
178180
{rest.illustration}

0 commit comments

Comments
 (0)