Skip to content

Commit 45407bd

Browse files
ragafusragafus
committedFeb 26, 2025
refactor: make FieldLabel optional in fields components
1 parent 9835e11 commit 45407bd

File tree

19 files changed

+257
-185
lines changed

19 files changed

+257
-185
lines changed
 

‎packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
getFieldId,
1212
createSequentialId,
1313
warning,
14+
hasFieldLabel,
1415
} from '@commercetools-uikit/utils';
1516
import Constraints from '@commercetools-uikit/constraints';
1617
import Spacings from '@commercetools-uikit/spacings';
@@ -345,7 +346,7 @@ export type TAsyncCreatableSelectFieldProps = {
345346
/**
346347
* Title of the label
347348
*/
348-
title: string | ReactNode;
349+
title?: string | ReactNode;
349350
/**
350351
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
351352
*/
@@ -463,16 +464,18 @@ export default class AsyncCreatableSelectField extends Component<
463464
return (
464465
<Constraints.Horizontal max={this.props.horizontalConstraint}>
465466
<Spacings.Stack scale="xs">
466-
<FieldLabel
467-
title={this.props.title}
468-
hint={this.props.hint}
469-
description={this.props.description}
470-
onInfoButtonClick={this.props.onInfoButtonClick}
471-
hintIcon={this.props.hintIcon}
472-
badge={this.props.badge}
473-
hasRequiredIndicator={this.props.isRequired}
474-
htmlFor={this.state.id}
475-
/>
467+
{hasFieldLabel(this.props) && (
468+
<FieldLabel
469+
title={this.props.title}
470+
hint={this.props.hint}
471+
description={this.props.description}
472+
onInfoButtonClick={this.props.onInfoButtonClick}
473+
hintIcon={this.props.hintIcon}
474+
badge={this.props.badge}
475+
hasRequiredIndicator={this.props.isRequired}
476+
htmlFor={this.state.id}
477+
/>
478+
)}
476479
<AsyncCreatableSelectInput
477480
horizontalConstraint="scale"
478481
hasError={hasError}

‎packages/components/fields/async-select-field/src/async-select-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
getFieldId,
1313
createSequentialId,
1414
warning,
15+
hasFieldLabel,
1516
} from '@commercetools-uikit/utils';
1617
import Constraints from '@commercetools-uikit/constraints';
1718
import Spacings from '@commercetools-uikit/spacings';
@@ -305,7 +306,7 @@ export type TAsyncSelectFieldProps = {
305306
/**
306307
* Title of the label
307308
*/
308-
title: string | ReactNode;
309+
title?: string | ReactNode;
309310
/**
310311
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
311312
*/
@@ -421,16 +422,18 @@ export default class AsyncSelectField extends Component<
421422
return (
422423
<Constraints.Horizontal max={this.props.horizontalConstraint}>
423424
<Spacings.Stack scale="xs">
424-
<FieldLabel
425-
title={this.props.title}
426-
hint={this.props.hint}
427-
description={this.props.description}
428-
onInfoButtonClick={this.props.onInfoButtonClick}
429-
hintIcon={this.props.hintIcon}
430-
badge={this.props.badge}
431-
hasRequiredIndicator={this.props.isRequired}
432-
htmlFor={this.state.id}
433-
/>
425+
{hasFieldLabel(this.props) && (
426+
<FieldLabel
427+
title={this.props.title}
428+
hint={this.props.hint}
429+
description={this.props.description}
430+
onInfoButtonClick={this.props.onInfoButtonClick}
431+
hintIcon={this.props.hintIcon}
432+
badge={this.props.badge}
433+
hasRequiredIndicator={this.props.isRequired}
434+
htmlFor={this.state.id}
435+
/>
436+
)}
434437
<AsyncSelectInput
435438
horizontalConstraint="scale"
436439
hasError={hasError}

‎packages/components/fields/creatable-select-field/src/creatable-select-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
createSequentialId,
1111
filterDataAttributes,
1212
getFieldId,
13+
hasFieldLabel,
1314
warning,
1415
} from '@commercetools-uikit/utils';
1516
import Constraints from '@commercetools-uikit/constraints';
@@ -330,7 +331,7 @@ export type TCreatableSelectFieldProps = {
330331
/**
331332
* Title of the label
332333
*/
333-
title: string | ReactNode;
334+
title?: string | ReactNode;
334335
/**
335336
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
336337
*/
@@ -442,16 +443,18 @@ export default class CreatableSelectField extends Component<
442443
return (
443444
<Constraints.Horizontal max={this.props.horizontalConstraint}>
444445
<Spacings.Stack scale="xs">
445-
<FieldLabel
446-
title={this.props.title}
447-
hint={this.props.hint}
448-
description={this.props.description}
449-
onInfoButtonClick={this.props.onInfoButtonClick}
450-
hintIcon={this.props.hintIcon}
451-
badge={this.props.badge}
452-
hasRequiredIndicator={this.props.isRequired}
453-
htmlFor={this.state.id}
454-
/>
446+
{hasFieldLabel(this.props) && (
447+
<FieldLabel
448+
title={this.props.title}
449+
hint={this.props.hint}
450+
description={this.props.description}
451+
onInfoButtonClick={this.props.onInfoButtonClick}
452+
hintIcon={this.props.hintIcon}
453+
badge={this.props.badge}
454+
hasRequiredIndicator={this.props.isRequired}
455+
htmlFor={this.state.id}
456+
/>
457+
)}
455458
<CreatableSelectInput
456459
horizontalConstraint="scale"
457460
hasError={hasError}

‎packages/components/fields/date-field/src/date-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
createSequentialId,
1414
getFieldId,
1515
warning,
16+
hasFieldLabel,
1617
} from '@commercetools-uikit/utils';
1718
import Constraints from '@commercetools-uikit/constraints';
1819
import Spacings from '@commercetools-uikit/spacings';
@@ -151,7 +152,7 @@ export type TDateFieldProps = {
151152
/**
152153
* Title of the label
153154
*/
154-
title: ReactNode;
155+
title?: ReactNode;
155156
/**
156157
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
157158
*/
@@ -239,16 +240,18 @@ class DateField extends Component<TDateFieldProps, TDateFieldState> {
239240
return (
240241
<Constraints.Horizontal max={this.props.horizontalConstraint}>
241242
<Spacings.Stack scale="xs">
242-
<FieldLabel
243-
title={this.props.title}
244-
hint={this.props.hint}
245-
description={this.props.description}
246-
onInfoButtonClick={this.props.onInfoButtonClick}
247-
hintIcon={this.props.hintIcon}
248-
badge={this.props.badge}
249-
hasRequiredIndicator={this.props.isRequired}
250-
htmlFor={this.state.id}
251-
/>
243+
{hasFieldLabel(this.props) && (
244+
<FieldLabel
245+
title={this.props.title}
246+
hint={this.props.hint}
247+
description={this.props.description}
248+
onInfoButtonClick={this.props.onInfoButtonClick}
249+
hintIcon={this.props.hintIcon}
250+
badge={this.props.badge}
251+
hasRequiredIndicator={this.props.isRequired}
252+
htmlFor={this.state.id}
253+
/>
254+
)}
252255
<DateInput
253256
id={this.state.id}
254257
name={this.props.name}

‎packages/components/fields/date-range-field/src/date-range-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
createSequentialId,
1111
getFieldId,
1212
warning,
13+
hasFieldLabel,
1314
} from '@commercetools-uikit/utils';
1415
import Constraints from '@commercetools-uikit/constraints';
1516
import Spacings from '@commercetools-uikit/spacings';
@@ -139,7 +140,7 @@ export type TDateRangeFieldProps = {
139140
/**
140141
* Title of the label
141142
*/
142-
title: string | ReactNode;
143+
title?: string | ReactNode;
143144
/**
144145
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
145146
*/
@@ -228,16 +229,18 @@ class DateRangeField extends Component<
228229
return (
229230
<Constraints.Horizontal max={this.props.horizontalConstraint}>
230231
<Spacings.Stack scale="xs">
231-
<FieldLabel
232-
title={this.props.title}
233-
hint={this.props.hint}
234-
description={this.props.description}
235-
onInfoButtonClick={this.props.onInfoButtonClick}
236-
hintIcon={this.props.hintIcon}
237-
badge={this.props.badge}
238-
hasRequiredIndicator={this.props.isRequired}
239-
htmlFor={this.state.id}
240-
/>
232+
{hasFieldLabel(this.props) && (
233+
<FieldLabel
234+
title={this.props.title}
235+
hint={this.props.hint}
236+
description={this.props.description}
237+
onInfoButtonClick={this.props.onInfoButtonClick}
238+
hintIcon={this.props.hintIcon}
239+
badge={this.props.badge}
240+
hasRequiredIndicator={this.props.isRequired}
241+
htmlFor={this.state.id}
242+
/>
243+
)}
241244
<DateRangeInput
242245
id={this.state.id}
243246
name={this.props.name}

‎packages/components/fields/date-time-field/src/date-time-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
getFieldId,
1313
createSequentialId,
1414
warning,
15+
hasFieldLabel,
1516
} from '@commercetools-uikit/utils';
1617
import Constraints from '@commercetools-uikit/constraints';
1718
import Spacings from '@commercetools-uikit/spacings';
@@ -148,7 +149,7 @@ export type TDateTimeFieldProps = {
148149
/**
149150
* Title of the label
150151
*/
151-
title: ReactNode;
152+
title?: ReactNode;
152153
/**
153154
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
154155
*/
@@ -244,16 +245,18 @@ class DateTimeField extends Component<
244245
return (
245246
<Constraints.Horizontal max={this.props.horizontalConstraint}>
246247
<Spacings.Stack scale="xs">
247-
<FieldLabel
248-
title={this.props.title}
249-
hint={this.props.hint}
250-
description={this.props.description}
251-
onInfoButtonClick={this.props.onInfoButtonClick}
252-
hintIcon={this.props.hintIcon}
253-
badge={this.props.badge}
254-
hasRequiredIndicator={this.props.isRequired}
255-
htmlFor={this.state.id}
256-
/>
248+
{hasFieldLabel(this.props) && (
249+
<FieldLabel
250+
title={this.props.title}
251+
hint={this.props.hint}
252+
description={this.props.description}
253+
onInfoButtonClick={this.props.onInfoButtonClick}
254+
hintIcon={this.props.hintIcon}
255+
badge={this.props.badge}
256+
hasRequiredIndicator={this.props.isRequired}
257+
htmlFor={this.state.id}
258+
/>
259+
)}
257260
<DateTimeInput
258261
id={this.state.id}
259262
name={this.props.name}

‎packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
getFieldId,
1212
createSequentialId,
1313
warning,
14+
hasFieldLabel,
1415
} from '@commercetools-uikit/utils';
1516
import { type MessageDescriptor } from 'react-intl';
1617
import Constraints from '@commercetools-uikit/constraints';
@@ -188,7 +189,7 @@ export type TLocalizedMultilineTextFieldProps = {
188189
/**
189190
* Title of the label
190191
*/
191-
title: string | ReactNode;
192+
title?: string | ReactNode;
192193
/**
193194
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon.
194195
*/
@@ -285,16 +286,18 @@ class LocalizedMultilineTextField extends Component<
285286
return (
286287
<Constraints.Horizontal max={this.props.horizontalConstraint}>
287288
<Spacings.Stack scale="xs">
288-
<FieldLabel
289-
title={this.props.title}
290-
hint={this.props.hint}
291-
description={this.props.description}
292-
onInfoButtonClick={this.props.onInfoButtonClick}
293-
hintIcon={this.props.hintIcon}
294-
badge={this.props.badge}
295-
hasRequiredIndicator={this.props.isRequired}
296-
htmlFor={this.state.id}
297-
/>
289+
{hasFieldLabel(this.props) && (
290+
<FieldLabel
291+
title={this.props.title}
292+
hint={this.props.hint}
293+
description={this.props.description}
294+
onInfoButtonClick={this.props.onInfoButtonClick}
295+
hintIcon={this.props.hintIcon}
296+
badge={this.props.badge}
297+
hasRequiredIndicator={this.props.isRequired}
298+
htmlFor={this.state.id}
299+
/>
300+
)}
298301
<LocalizedMultilineTextInput
299302
id={this.state.id}
300303
name={this.props.name}

‎packages/components/fields/localized-text-field/src/localized-text-field.tsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
createSequentialId,
1313
filterDataAttributes,
1414
getFieldId,
15+
hasFieldLabel,
1516
warning,
1617
} from '@commercetools-uikit/utils';
1718
import Constraints from '@commercetools-uikit/constraints';
@@ -170,7 +171,7 @@ export type TLocalizedTextFieldProps = {
170171
/**
171172
* Title of the label
172173
*/
173-
title: ReactNode;
174+
title?: ReactNode;
174175
/**
175176
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
176177
*/
@@ -270,16 +271,18 @@ class LocalizedTextField extends Component<
270271
return (
271272
<Constraints.Horizontal max={this.props.horizontalConstraint}>
272273
<Spacings.Stack scale="xs">
273-
<FieldLabel
274-
title={this.props.title}
275-
hint={this.props.hint}
276-
description={this.props.description}
277-
onInfoButtonClick={this.props.onInfoButtonClick}
278-
hintIcon={this.props.hintIcon}
279-
badge={this.props.badge}
280-
hasRequiredIndicator={this.props.isRequired}
281-
htmlFor={this.state.id}
282-
/>
274+
{hasFieldLabel(this.props) && (
275+
<FieldLabel
276+
title={this.props.title}
277+
hint={this.props.hint}
278+
description={this.props.description}
279+
onInfoButtonClick={this.props.onInfoButtonClick}
280+
hintIcon={this.props.hintIcon}
281+
badge={this.props.badge}
282+
hasRequiredIndicator={this.props.isRequired}
283+
htmlFor={this.state.id}
284+
/>
285+
)}
283286
<LocalizedTextInput
284287
autoComplete={this.props.autoComplete}
285288
id={this.state.id}

0 commit comments

Comments
 (0)