Skip to content

Commit b54381a

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #949 from skateman/carbon-fix-label-numeric
fix(carbon): pass the label for numeric text-field correctly
2 parents aa9ca59 + d221200 commit b54381a

File tree

2 files changed

+88
-75
lines changed

2 files changed

+88
-75
lines changed

‎packages/carbon-component-mapper/src/files/text-field.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { TextInput, NumberInput } from 'carbon-components-react';
77
import prepareProps from './prepare-props';
88

99
const TextField = (props) => {
10-
const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
10+
const { input, meta, validateOnMount, labelText, ...rest } = useFieldApi(prepareProps(props));
1111

1212
const Component = input.type === 'number' ? NumberInput : TextInput;
1313

@@ -23,6 +23,7 @@ const TextField = (props) => {
2323
invalidText={invalid || ''}
2424
warn={Boolean(warn)}
2525
warnText={warn || ''}
26+
{...(input.type === 'number' ? { label: labelText } : { labelText })}
2627
{...rest}
2728
/>
2829
);

‎packages/carbon-component-mapper/src/tests/components.test.js

Lines changed: 86 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@ describe('component tests', () => {
1414
onSubmit={jest.fn()}
1515
FormTemplate={(props) => <FormTemplate {...props} />}
1616
schema={schema}
17-
componentMapper={componentMapper}
17+
componentMapper={{
18+
...componentMapper,
19+
'text-field-number': {
20+
component: componentMapper[componentTypes.TEXT_FIELD],
21+
type: 'number'
22+
}
23+
}}
1824
{...props}
1925
/>
2026
);
@@ -47,7 +53,8 @@ describe('component tests', () => {
4753
componentTypes.TIME_PICKER,
4854
componentTypes.SWITCH,
4955
componentTypes.SELECT,
50-
componentTypes.SLIDER
56+
componentTypes.SLIDER,
57+
'text-field-number'
5158
].forEach((component) => {
5259
describe(`Component type: ${component}`, () => {
5360
beforeEach(() => {
@@ -70,6 +77,8 @@ describe('component tests', () => {
7077

7178
if (component === componentTypes.RADIO) {
7279
expect(wrapper.find('.bx--radio-button-wrapper')).toHaveLength(options.length);
80+
} else if (component === 'text-field-number') {
81+
expect(wrapper.find('NumberInput')).toHaveLength(1);
7382
} else {
7483
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
7584
expect(
@@ -99,96 +108,99 @@ describe('component tests', () => {
99108
}
100109
});
101110

102-
it('renders with warning', async () => {
103-
const errorField = {
104-
...field,
105-
validate: [{ type: validatorTypes.REQUIRED, warning: true }],
106-
useWarnings: true,
107-
validateOnMount: true
108-
};
109-
let wrapper;
111+
if (component !== 'text-field-number') {
112+
it('renders with warning', async () => {
113+
const errorField = {
114+
...field,
115+
validate: [{ type: validatorTypes.REQUIRED, warning: true }],
116+
useWarnings: true,
117+
validateOnMount: true
118+
};
119+
let wrapper;
120+
121+
await act(async () => {
122+
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
123+
});
124+
wrapper.update();
125+
wrapper.update();
126+
127+
const helperText = wrapper.find('.bx--form__helper-text');
128+
129+
if (helperText.length) {
130+
expect(helperText.text()).toEqual(errorText);
131+
} else {
132+
expect(
133+
wrapper
134+
.find('.bx--form-requirement')
135+
.last()
136+
.text()
137+
).toEqual(errorText);
138+
}
139+
});
140+
141+
it('renders with helperText', () => {
142+
const helpertextField = {
143+
...field,
144+
helperText
145+
};
146+
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
110147

111-
await act(async () => {
112-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
148+
expect(
149+
wrapper
150+
.find('.bx--form__helper-text')
151+
.last()
152+
.text()
153+
).toEqual(helperText);
113154
});
114-
wrapper.update();
115155

116-
const helperText = wrapper.find('.bx--form__helper-text');
156+
it('renders with description and helperText', () => {
157+
const descriptionField = {
158+
...field,
159+
description,
160+
helperText
161+
};
162+
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
163+
164+
expect(wrapper.find(WithDescription)).toHaveLength(1);
117165

118-
if (helperText.length) {
119-
expect(helperText.text()).toEqual(errorText);
120-
} else {
121166
expect(
122167
wrapper
123-
.find('.bx--form-requirement')
168+
.find('.bx--form__helper-text')
124169
.last()
125170
.text()
126-
).toEqual(errorText);
127-
}
128-
});
171+
).toEqual(helperText);
172+
});
129173

130-
it('renders with helperText', () => {
131-
const helpertextField = {
132-
...field,
133-
helperText
134-
};
135-
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
136-
137-
expect(
138-
wrapper
139-
.find('.bx--form__helper-text')
140-
.last()
141-
.text()
142-
).toEqual(helperText);
143-
});
174+
it('renders with error and helperText', () => {
175+
const errorFields = {
176+
...field,
177+
helperText,
178+
validate: [{ type: validatorTypes.REQUIRED }]
179+
};
180+
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
181+
wrapper.find('form').simulate('submit');
144182

145-
it('renders with description', () => {
146-
const descriptionField = {
147-
...field,
148-
description
149-
};
150-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
183+
if (wrapper.find('#field-name-error-msg').length) {
184+
expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
185+
expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
186+
}
151187

152-
expect(wrapper.find(WithDescription)).toHaveLength(1);
153-
});
188+
if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
189+
expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
190+
}
191+
192+
expect(wrapper.find('.bx--form__helper-text')).toHaveLength(0);
193+
});
194+
}
154195

155-
it('renders with description and helperText', () => {
196+
it('renders with description', () => {
156197
const descriptionField = {
157198
...field,
158-
description,
159-
helperText
199+
description
160200
};
161201
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
162202

163203
expect(wrapper.find(WithDescription)).toHaveLength(1);
164-
165-
expect(
166-
wrapper
167-
.find('.bx--form__helper-text')
168-
.last()
169-
.text()
170-
).toEqual(helperText);
171-
});
172-
173-
it('renders with error and helperText', () => {
174-
const errorFields = {
175-
...field,
176-
helperText,
177-
validate: [{ type: validatorTypes.REQUIRED }]
178-
};
179-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
180-
wrapper.find('form').simulate('submit');
181-
182-
if (wrapper.find('#field-name-error-msg').length) {
183-
expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
184-
expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
185-
}
186-
187-
if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
188-
expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
189-
}
190-
191-
expect(wrapper.find('.bx--form__helper-text')).toHaveLength(0);
192204
});
193205

194206
it('renders isDisabled', () => {

0 commit comments

Comments
 (0)