Skip to content

Commit 5bc6fc3

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #815 from rvsia/carbonHelperText
Carbon helper text
2 parents 9aef2c2 + 07284d4 commit 5bc6fc3

File tree

11 files changed

+147
-127
lines changed

11 files changed

+147
-127
lines changed

‎packages/carbon-component-mapper/README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fcarbon-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fcarbon-component-mapper)
2+
[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms)
3+
[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)
24

35
[![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)
46

@@ -10,7 +12,7 @@ carbon component mapper for [Data Driven Forms](https://github.com/data-driven-f
1012

1113
- [Installation](#installation)
1214
- [React Form Renderer](#react-form-renderer)
13-
- [carbon Mapper](#componentmapper-mapper)
15+
- [Carbon Mapper](#carbon-mapper)
1416
- [Usage](#usage)
1517
- [Basic provided components](#basic-provided-components)
1618
- [Useful links](#useful-links)
@@ -35,7 +37,7 @@ $ npm install @data-driven-forms/react-form-renderer -S
3537
$ yarn add @data-driven-forms/react-form-renderer
3638
```
3739

38-
#### [carbon Mapper](https://data-driven-forms.org/mappers/carbon-component-mapper)
40+
#### [Carbon Mapper](https://data-driven-forms.org/mappers/carbon-component-mapper)
3941

4042
```console
4143
$ npm install @data-driven-forms/carbon-component-mapper -S
@@ -96,8 +98,9 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
9698

9799
- [Data Driven Forms documentation](https://data-driven-forms.org/)
98100
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
99-
- [carbon Mapper NPM](https://www.npmjs.com/package/@data-driven-forms/carbon-component-mapper)
100-
101+
- [Carbon Mapper NPM](https://www.npmjs.com/package/@data-driven-forms/carbon-component-mapper)
102+
- [Carbon Design System documentation](https://www.carbondesignsystem.com/)
103+
- [Carbon React Compononents storybook](https://react.carbondesignsystem.com/)
101104

102105
### Development setup
103106

@@ -139,7 +142,7 @@ Tests needed to be run from the core folder.
139142
```console
140143
yarn test
141144

142-
yarn test packages/pf3-component-mapper
145+
yarn test packages/carbon-component-mapper
143146
```
144147

145148
#### Commits
@@ -159,7 +162,7 @@ Types:
159162
- `fix`: a fix, will trigger new `_._.X` release
160163

161164
Packages:
162-
- Please describe which package is being changed `pf3`, `renderer`, ...
165+
- Please describe which package is being changed `carbon`, `renderer`, ...
163166

164167
Please, do not use Semantic Release, if you update only the demo.
165168

‎packages/carbon-component-mapper/src/common/helper-text-block.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './helper-text-block.scss';
5+
6+
const HelperTextBlock = ({ helperText, errorText }) => {
7+
if (errorText) {
8+
return <div className="bx--form-requirement ddorg__carbon-error-helper-text">{errorText}</div>;
9+
}
10+
11+
if (helperText) {
12+
return <div className="bx--form__helper-text">{helperText}</div>;
13+
}
14+
15+
return null;
16+
};
17+
18+
HelperTextBlock.propTypes = {
19+
helperText: PropTypes.node,
20+
errorText: PropTypes.node
21+
};
22+
23+
export default HelperTextBlock;

‎packages/carbon-component-mapper/src/common/helper-text-block.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.ddorg__carbon-error-helper-text {
2+
color: #da1e28;
3+
display: block;
4+
overflow: initial;
5+
}

‎packages/carbon-component-mapper/src/files/checkbox.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,35 @@ import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react';
77

88
import WithDescription from '../common/with-description';
99
import prepareProps from '../common/prepare-props';
10+
import HelperTextBlock from '../common/helper-text-block';
1011

11-
const Wrapper = ({ label, description, children }) => (
12-
<FormGroup legendText={description ? <WithDescription labelText={label} description={description} /> : label}>{children}</FormGroup>
12+
const Wrapper = ({ label, description, children, helperText, error, showError }) => (
13+
<FormGroup legendText={description ? <WithDescription labelText={label} description={description} /> : label}>
14+
{children}
15+
<HelperTextBlock helperText={helperText} errorText={showError && error} />
16+
</FormGroup>
1317
);
1418

1519
Wrapper.propTypes = {
1620
label: PropTypes.node,
1721
children: PropTypes.node,
18-
description: PropTypes.node
22+
description: PropTypes.node,
23+
helperText: PropTypes.node,
24+
error: PropTypes.node,
25+
showError: PropTypes.bool
1926
};
2027

2128
const SingleCheckbox = (props) => {
22-
const { input, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
29+
const { input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
2330

24-
return <CarbonCheckbox {...input} id={input.name} {...rest} />;
31+
const invalid = (meta.touched || validateOnMount) && meta.error;
32+
33+
return (
34+
<div>
35+
<CarbonCheckbox {...input} id={input.name} {...rest} />
36+
<HelperTextBlock helperText={helperText} errorText={invalid} />
37+
</div>
38+
);
2539
};
2640

2741
const SingleCheckboxInCommon = ({ label, isDisabled, id, ...props }) => <CarbonCheckbox id={id} labelText={label} disabled={isDisabled} />;

‎packages/carbon-component-mapper/src/files/date-picker.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-components-react';
66

77
import prepareProps from '../common/prepare-props';
8+
import HelperTextBlock from '../common/helper-text-block';
89

910
const DatePicker = (props) => {
10-
const { input, datePickerType, meta, DatePickerProps, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
11+
const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
1112

1213
const invalid = (meta.touched || validateOnMount) && meta.error;
1314

1415
return (
15-
<CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
16-
<DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
17-
</CarbonDatePicker>
16+
<div>
17+
<CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
18+
<DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
19+
</CarbonDatePicker>
20+
<HelperTextBlock helperText={!invalid && helperText} />
21+
</div>
1822
);
1923
};
2024

‎packages/carbon-component-mapper/src/files/radio.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,14 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import { FormGroup, RadioButtonGroup, RadioButton } from 'carbon-components-react';
66

77
import prepareProps from '../common/prepare-props';
8+
import HelperTextBlock from '../common/helper-text-block';
89

910
const Radio = (props) => {
10-
const { labelText, disabled, input, options, FormGroupProps, ...rest } = useFieldApi(prepareProps({ type: 'radio', ...props }));
11+
const { labelText, disabled, input, options, FormGroupProps, helperText, meta, validateOnMount, ...rest } = useFieldApi(
12+
prepareProps({ type: 'radio', ...props })
13+
);
14+
15+
const invalid = (meta.touched || validateOnMount) && meta.error;
1116

1217
return (
1318
<FormGroup legendText={labelText} {...FormGroupProps}>
@@ -16,6 +21,7 @@ const Radio = (props) => {
1621
<RadioButton key={option.value} disabled={disabled} labelText={option.label} value={option.value} {...option} />
1722
))}
1823
</RadioButtonGroup>
24+
<HelperTextBlock helperText={helperText} errorText={invalid} />
1925
</FormGroup>
2026
);
2127
};

‎packages/carbon-component-mapper/src/files/slider.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import { Slider as CarbonSlider } from 'carbon-components-react';
66

77
import prepareProps from '../common/prepare-props';
8+
import HelperTextBlock from '../common/helper-text-block';
89

910
const Slider = (props) => {
10-
const { input, meta, isRequired, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
11+
const { input, meta, isRequired, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
1112

1213
const invalid = (meta.touched || validateOnMount) && meta.error;
1314

1415
return (
15-
<CarbonSlider
16-
{...input}
17-
value={Number(input.value) || 0}
18-
key={input.name}
19-
id={input.name}
20-
invalid={Boolean(invalid)}
21-
min={0}
22-
max={100}
23-
required={isRequired}
24-
{...rest}
25-
/>
16+
<div>
17+
<CarbonSlider
18+
{...input}
19+
value={Number(input.value) || 0}
20+
key={input.name}
21+
id={input.name}
22+
invalid={Boolean(invalid)}
23+
min={0}
24+
max={100}
25+
required={isRequired}
26+
{...rest}
27+
/>
28+
<HelperTextBlock helperText={helperText} errorText={invalid} />
29+
</div>
2630
);
2731
};
2832

‎packages/carbon-component-mapper/src/files/switch.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,19 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import { Toggle } from 'carbon-components-react';
66

77
import prepareProps from '../common/prepare-props';
8+
import HelperTextBlock from '../common/helper-text-block';
89

910
const Switch = (props) => {
10-
const { input, meta, onText, offText, ...rest } = useFieldApi(prepareProps(props));
11+
const { input, meta, onText, offText, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
1112

12-
return <Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />;
13+
const invalid = (meta.touched || validateOnMount) && meta.error;
14+
15+
return (
16+
<div>
17+
<Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />
18+
<HelperTextBlock helperText={helperText} errorText={invalid} />
19+
</div>
20+
);
1321
};
1422

1523
Switch.propTypes = {

‎packages/carbon-component-mapper/src/files/time-picker.js‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from 'carbon-components-react';
66

77
import prepareProps from '../common/prepare-props';
8+
import HelperTextBlock from '../common/helper-text-block';
89

910
const TimePicker = (props) => {
10-
const { input, meta, twelveHoursFormat, timezones, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
11+
const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
1112

1213
const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
1314
const [format, selectFormat] = useState('AM');
@@ -63,30 +64,37 @@ const TimePicker = (props) => {
6364
}, [timezone, format]);
6465

6566
return (
66-
<CarbonTimePicker
67-
{...input}
68-
value={finalValue}
69-
onBlur={enhnancedOnBlur}
70-
key={input.name}
71-
id={input.name}
72-
invalid={Boolean(invalid)}
73-
invalidText={invalid || ''}
74-
{...rest}
75-
>
76-
{twelveHoursFormat && (
77-
<TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
78-
<SelectItem value="AM" text="AM" />
79-
<SelectItem value="PM" text="PM" />
80-
</TimePickerSelect>
81-
)}
82-
{timezones && (
83-
<TimePickerSelect labelText="Timezone" id={`${rest.id || input.name}-timezones`} onChange={({ target: { value } }) => selectTimezone(value)}>
84-
{timezones.map(({ showAs, ...tz }) => (
85-
<SelectItem key={tz.value} text={tz.label} {...tz} />
86-
))}
87-
</TimePickerSelect>
88-
)}
89-
</CarbonTimePicker>
67+
<div>
68+
<CarbonTimePicker
69+
{...input}
70+
value={finalValue}
71+
onBlur={enhnancedOnBlur}
72+
key={input.name}
73+
id={input.name}
74+
invalid={Boolean(invalid)}
75+
invalidText={invalid || ''}
76+
{...rest}
77+
>
78+
{twelveHoursFormat && (
79+
<TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
80+
<SelectItem value="AM" text="AM" />
81+
<SelectItem value="PM" text="PM" />
82+
</TimePickerSelect>
83+
)}
84+
{timezones && (
85+
<TimePickerSelect
86+
labelText="Timezone"
87+
id={`${rest.id || input.name}-timezones`}
88+
onChange={({ target: { value } }) => selectTimezone(value)}
89+
>
90+
{timezones.map(({ showAs, ...tz }) => (
91+
<SelectItem key={tz.value} text={tz.label} {...tz} />
92+
))}
93+
</TimePickerSelect>
94+
)}
95+
</CarbonTimePicker>
96+
<HelperTextBlock helperText={!invalid && helperText} />
97+
</div>
9098
);
9199
};
92100

0 commit comments

Comments
 (0)