Skip to content

Commit 13f2327

Browse files
devadula-nandanmaradwan26emyarodadamalston
authored
feat(number-input): matches parity on WC type='text', custom validations, format options (#21681)
* feat: number input type text and custom validations initial commit * fix: ts build errors, and in inheriting fluid number input * chore: comment new tests * fix: add @carbon/utilities as explicit dependency * fix: update lock file * fix: validate on input and controlled set value and tests * chore: update copyright current year * fix: update yarn lock * Update packages/web-components/src/components/number-input/__tests__/number-input-test.js remove test comment Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> * fix: few inconsistencies and add tests * chore: add clarity on note * revert: test stories * chore: remove note and update jsdoc * fix: validation logic which are failing tests after merge from main * fix: some edge cases and add tests * revert: test stories, and mark new features as experimental * chore: update utilities to 0.17.0 * fix: modify contradicting test, and fix button disable state in readonly * refactor: add review suggestions, bump test coverage, add story actions * fix: review comments * chore: export re-usable direction type used in event detail * Update number-input.ts Co-authored-by: Adam Alston <aalston9@gmail.com> * docs: update stories --------- Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> Co-authored-by: emyarod <emyarod@users.noreply.github.com> Co-authored-by: Adam Alston <aalston9@gmail.com>
1 parent 2bb3f0b commit 13f2327

14 files changed

Lines changed: 2552 additions & 237 deletions

File tree

‎packages/react/.storybook/preview.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,12 @@ const devTools = {
6464
},
6565
};
6666

67+
// always use full locale code strings for values
6768
const globalTypes = {
6869
locale: {
6970
name: 'Locale',
7071
description: 'Set the localization for the storybook',
71-
defaultValue: 'en',
72+
defaultValue: 'en-US',
7273
toolbar: {
7374
icon: 'globe',
7475
title: 'Locale',
@@ -86,7 +87,7 @@ const globalTypes = {
8687
{
8788
right: '🇵🇸',
8889
title: 'Arabic',
89-
value: 'ar',
90+
value: 'ar-SA',
9091
},
9192
{
9293
right: '🇯🇵',

‎packages/react/src/components/NumberInput/NumberInput.stories.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2023
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -275,6 +275,24 @@ WithTypeOfCustomValidation.argTypes = {
275275
...sharedArgTypes,
276276
};
277277

278-
export const Skeleton = () => {
279-
return <NumberInputSkeleton />;
278+
export const Skeleton = (args) => {
279+
return <NumberInputSkeleton {...args} />;
280+
};
281+
282+
Skeleton.argTypes = {
283+
size: {
284+
table: {
285+
defaultValue: { summary: '"md"' },
286+
},
287+
},
288+
};
289+
290+
Skeleton.args = {
291+
size: 'md',
292+
};
293+
294+
Skeleton.parameters = {
295+
controls: {
296+
include: ['size', 'hideLabel'],
297+
},
280298
};

‎packages/web-components/.storybook/preview.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2024
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -43,23 +43,34 @@ const devTools = {
4343
},
4444
};
4545

46+
// always use full locale code strings for values
4647
export const globalTypes = {
4748
locale: {
4849
name: 'Locale',
4950
description: 'Set the localization for the storybook',
50-
defaultValue: 'en',
51+
defaultValue: 'en-US',
5152
toolbar: {
5253
icon: 'globe',
5354
items: [
5455
{
5556
right: '🇺🇸',
5657
title: 'English',
57-
value: 'en',
58+
value: 'en-US',
59+
},
60+
{
61+
right: '🇩🇪',
62+
title: 'German',
63+
value: 'de-DE',
5864
},
5965
{
6066
right: '🇵🇸',
6167
title: 'Arabic',
62-
value: 'ar',
68+
value: 'ar-SA',
69+
},
70+
{
71+
right: '🇯🇵',
72+
title: 'Japanese',
73+
value: 'ja-JP',
6374
},
6475
],
6576
},

‎packages/web-components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"@carbon/icon-helpers": "10.47.0",
6969
"@carbon/icons": "^11.78.0",
7070
"@carbon/styles": "^1.104.0",
71+
"@carbon/utilities": "^0.17.0",
7172
"@floating-ui/dom": "^1.6.3",
7273
"@ibm/telemetry-js": "^1.10.2",
7374
"@lit/context": "^1.1.3",

‎packages/web-components/src/components/fluid-number-input/fluid-number-input.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp.2025
2+
* Copyright IBM Corp. 2025, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -24,8 +24,8 @@ class CDSFluidNumberInput extends CDSNumberInput {
2424
super.connectedCallback();
2525
}
2626

27-
updated() {
28-
super.updated();
27+
updated(changedProperties: Map<string, unknown>) {
28+
super.updated(changedProperties);
2929
}
3030

3131
render() {

‎packages/web-components/src/components/number-input/__tests__/number-input-skeleton-test.js‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2025
2+
* Copyright IBM Corp. 2025, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -17,36 +17,89 @@ describe('<cds-number-input-skeleton>', () => {
1717
expect(el.classList.contains('custom-class')).to.be.true;
1818
});
1919

20-
it('should spread additional attributes on the host element', async () => {
20+
it('should render skeleton component', async () => {
2121
const el = await fixture(
22-
html`<cds-number-input-skeleton
23-
data-testid="skeleton"></cds-number-input-skeleton>`
22+
html`<cds-number-input-skeleton></cds-number-input-skeleton>`
2423
);
25-
expect(el.getAttribute('data-testid')).to.equal('skeleton');
24+
expect(el).to.exist;
2625
});
2726

2827
it('should render label skeleton by default', async () => {
2928
const el = await fixture(
3029
html`<cds-number-input-skeleton></cds-number-input-skeleton>`
3130
);
32-
const label = el.shadowRoot.querySelector('.cds--label');
31+
const label = el.shadowRoot.querySelector('.cds--label.cds--skeleton');
3332
expect(label).to.exist;
3433
});
3534

36-
it('should hide label skeleton when hide-label is true', async () => {
35+
it('should hide label when hide-label is set', async () => {
3736
const el = await fixture(
3837
html`<cds-number-input-skeleton hide-label></cds-number-input-skeleton>`
3938
);
40-
const label = el.shadowRoot.querySelector('.cds--label');
39+
const label = el.shadowRoot.querySelector('.cds--label.cds--skeleton');
4140
expect(label).to.not.exist;
4241
});
4342

44-
it('should always render number skeleton', async () => {
43+
it('should render input skeleton', async () => {
4544
const el = await fixture(
4645
html`<cds-number-input-skeleton></cds-number-input-skeleton>`
4746
);
47+
const inputSkeleton = el.shadowRoot.querySelector(
48+
'.cds--number.cds--skeleton'
49+
);
50+
expect(inputSkeleton).to.exist;
51+
});
52+
53+
it('should render with md size class by default', async () => {
54+
const el = await fixture(
55+
html`<cds-number-input-skeleton></cds-number-input-skeleton>`
56+
);
57+
const numberSkeleton = el.shadowRoot.querySelector('.cds--number');
58+
expect(numberSkeleton.classList.contains('cds--number--md')).to.be.true;
59+
});
60+
61+
it('should render with sm size class when size is sm', async () => {
62+
const el = await fixture(
63+
html`<cds-number-input-skeleton size="sm"></cds-number-input-skeleton>`
64+
);
65+
const numberSkeleton = el.shadowRoot.querySelector('.cds--number');
66+
expect(numberSkeleton.classList.contains('cds--number--sm')).to.be.true;
67+
});
68+
69+
it('should render with lg size class when size is lg', async () => {
70+
const el = await fixture(
71+
html`<cds-number-input-skeleton size="lg"></cds-number-input-skeleton>`
72+
);
4873
const numberSkeleton = el.shadowRoot.querySelector('.cds--number');
49-
expect(numberSkeleton).to.exist;
50-
expect(numberSkeleton.classList.contains('cds--skeleton')).to.be.true;
74+
expect(numberSkeleton.classList.contains('cds--number--lg')).to.be.true;
75+
});
76+
77+
it('should update size dynamically', async () => {
78+
const el = await fixture(
79+
html`<cds-number-input-skeleton size="sm"></cds-number-input-skeleton>`
80+
);
81+
await el.updateComplete;
82+
83+
expect(el.getAttribute('size')).to.equal('sm');
84+
85+
el.setAttribute('size', 'lg');
86+
await el.updateComplete;
87+
88+
expect(el.getAttribute('size')).to.equal('lg');
89+
});
90+
91+
it('should toggle hide-label dynamically', async () => {
92+
const el = await fixture(
93+
html`<cds-number-input-skeleton></cds-number-input-skeleton>`
94+
);
95+
96+
let label = el.shadowRoot.querySelector('.cds--label.cds--skeleton');
97+
expect(label).to.exist;
98+
99+
el.hideLabel = true;
100+
await el.updateComplete;
101+
102+
label = el.shadowRoot.querySelector('.cds--label.cds--skeleton');
103+
expect(label).to.not.exist;
51104
});
52105
});

0 commit comments

Comments
 (0)