Skip to content

Commit 58b30d3

Browse files
tw15eganaledavilatay1orjones
authored
feat(FluidTextInput): create unstable__FluidTextInput component (#11971)
* feat(FluidTextInput): create FluidTextInput component * test(snapshot): update snapshots * chore(fluid-input-text): update fluid input text styles * chore(test): add test stories * style(FluidTextInput): adjust tooltip styles, add test story * test(FluidTextInput): add e2e tests * refactor(TextInput): move fluid text input styles to own file * refactor(FluidTextInput): use isFluid context * test(FluidTextInput): add component API tests * chore(FluidTextInput): export under unstable prefix * test(FluidTextInput): update snapshot * chore(FluidTextInput): remove test story Co-authored-by: Alessandra Davila <adavila91@gmail.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
1 parent 3a4f61d commit 58b30d3

File tree

13 files changed

+793
-11
lines changed

13 files changed

+793
-11
lines changed

‎e2e/components/FluidTextInput/FluidTextInput-test.e2e.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
const { expect, test } = require('@playwright/test');
11+
const { themes } = require('../../test-utils/env');
12+
const { snapshotStory, visitStory } = require('../../test-utils/storybook');
13+
14+
test.describe('FluidTextInput', () => {
15+
themes.forEach((theme) => {
16+
test.describe(theme, () => {
17+
test('fluid text input @vrt', async ({ page }) => {
18+
await snapshotStory(page, {
19+
component: 'FluidTextInput',
20+
id: 'experimental-unstable-fluidtextinput--default',
21+
theme,
22+
});
23+
});
24+
});
25+
});
26+
27+
test('accessibility-checker @avt', async ({ page }) => {
28+
await visitStory(page, {
29+
component: 'FluidTextInput',
30+
id: 'experimental-unstable-fluidtextinput--default',
31+
globals: {
32+
theme: 'white',
33+
},
34+
});
35+
await expect(page).toHaveNoACViolations('FluidTextInput');
36+
});
37+
});

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9165,6 +9165,71 @@ Map {
91659165
},
91669166
},
91679167
},
9168+
"unstable__FluidTextInput" => Object {
9169+
"propTypes": Object {
9170+
"className": Object {
9171+
"type": "string",
9172+
},
9173+
"defaultValue": Object {
9174+
"args": Array [
9175+
Array [
9176+
Object {
9177+
"type": "string",
9178+
},
9179+
Object {
9180+
"type": "number",
9181+
},
9182+
],
9183+
],
9184+
"type": "oneOfType",
9185+
},
9186+
"disabled": Object {
9187+
"type": "bool",
9188+
},
9189+
"id": Object {
9190+
"isRequired": true,
9191+
"type": "string",
9192+
},
9193+
"invalid": Object {
9194+
"type": "bool",
9195+
},
9196+
"invalidText": Object {
9197+
"type": "node",
9198+
},
9199+
"labelText": Object {
9200+
"isRequired": true,
9201+
"type": "node",
9202+
},
9203+
"onChange": Object {
9204+
"type": "func",
9205+
},
9206+
"onClick": Object {
9207+
"type": "func",
9208+
},
9209+
"placeholder": Object {
9210+
"type": "string",
9211+
},
9212+
"value": Object {
9213+
"args": Array [
9214+
Array [
9215+
Object {
9216+
"type": "string",
9217+
},
9218+
Object {
9219+
"type": "number",
9220+
},
9221+
],
9222+
],
9223+
"type": "oneOfType",
9224+
},
9225+
"warn": Object {
9226+
"type": "bool",
9227+
},
9228+
"warnText": Object {
9229+
"type": "node",
9230+
},
9231+
},
9232+
},
91689233
"unstable_useContextMenu" => Object {},
91699234
"unstable_useFeatureFlag" => Object {},
91709235
"unstable_useFeatureFlags" => Object {},

‎packages/react/src/__tests__/index-test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ describe('Carbon Components React', () => {
229229
"unstable_Pagination",
230230
"unstable_Text",
231231
"unstable_TextDirection",
232+
"unstable__FluidTextInput",
232233
"unstable_useContextMenu",
233234
"unstable_useFeatureFlag",
234235
"unstable_useFeatureFlags",

‎packages/react/src/components/FluidTextInput/FluidTextInput.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import PropTypes from 'prop-types';
9+
import React from 'react';
10+
import classnames from 'classnames';
11+
import TextInput from '../TextInput';
12+
import { usePrefix } from '../../internal/usePrefix';
13+
import { FormContext } from '../FluidForm/FormContext';
14+
15+
function FluidTextInput({ className, ...other }) {
16+
const prefix = usePrefix();
17+
const classNames = classnames(`${prefix}--text-input--fluid`, className);
18+
19+
return (
20+
<FormContext.Provider value={{ isFluid: true }}>
21+
<TextInput className={classNames} {...other} />
22+
</FormContext.Provider>
23+
);
24+
}
25+
26+
FluidTextInput.propTypes = {
27+
/**
28+
* Specify an optional className to be applied to the outer FluidForm wrapper
29+
*/
30+
className: PropTypes.string,
31+
32+
/**
33+
* Optionally provide the default value of the `<input>`
34+
*/
35+
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36+
37+
/**
38+
* Specify whether the `<input>` should be disabled
39+
*/
40+
disabled: PropTypes.bool,
41+
42+
/**
43+
* Specify a custom `id` for the `<input>`
44+
*/
45+
id: PropTypes.string.isRequired,
46+
47+
/**
48+
* Specify whether the control is currently invalid
49+
*/
50+
invalid: PropTypes.bool,
51+
52+
/**
53+
* Provide the text that is displayed when the control is in an invalid state
54+
*/
55+
invalidText: PropTypes.node,
56+
57+
/**
58+
* Provide the text that will be read by a screen reader when visiting this
59+
* control
60+
*/
61+
labelText: PropTypes.node.isRequired,
62+
63+
/**
64+
* Optionally provide an `onChange` handler that is called whenever `<input>`
65+
* is updated
66+
*/
67+
onChange: PropTypes.func,
68+
69+
/**
70+
* Optionally provide an `onClick` handler that is called whenever the
71+
* `<input>` is clicked
72+
*/
73+
onClick: PropTypes.func,
74+
75+
/**
76+
* Specify the placeholder attribute for the `<input>`
77+
*/
78+
placeholder: PropTypes.string,
79+
80+
/**
81+
* Specify the value of the `<input>`
82+
*/
83+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
84+
85+
/**
86+
* Specify whether the control is currently in warning state
87+
*/
88+
warn: PropTypes.bool,
89+
90+
/**
91+
* Provide the text that is displayed when the control is in warning state
92+
*/
93+
warnText: PropTypes.node,
94+
};
95+
96+
export default FluidTextInput;

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import FluidTextInput from '../FluidTextInput';
10+
import {
11+
ToggletipLabel,
12+
Toggletip,
13+
ToggletipButton,
14+
ToggletipContent,
15+
} from '../Toggletip';
16+
import { Information } from '@carbon/icons-react';
17+
import './test.scss';
18+
19+
export default {
20+
title: 'Experimental/unstable__FluidTextInput',
21+
component: FluidTextInput,
22+
};
23+
24+
export const Default = () => (
25+
<FluidTextInput labelText="Label" placeholder="Placeholder text" />
26+
);
27+
28+
const ToggleTip = (
29+
<>
30+
<ToggletipLabel>Label</ToggletipLabel>
31+
<Toggletip align="top-left">
32+
<ToggletipButton label="Show information">
33+
<Information />
34+
</ToggletipButton>
35+
<ToggletipContent>
36+
<p>Additional field information here.</p>
37+
</ToggletipContent>
38+
</Toggletip>
39+
</>
40+
);
41+
42+
export const DefaultWithTooltip = () => (
43+
<FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
44+
);
45+
46+
export const Playground = (args) => (
47+
<div style={{ width: args.playgroundWidth }}>
48+
<FluidTextInput {...args} />
49+
</div>
50+
);
51+
52+
Playground.argTypes = {
53+
playgroundWidth: {
54+
control: { type: 'range', min: 300, max: 800, step: 50 },
55+
defaultValue: 300,
56+
},
57+
className: {
58+
control: {
59+
type: 'text',
60+
},
61+
defaultValue: 'test-class',
62+
},
63+
defaultValue: {
64+
control: {
65+
type: 'text',
66+
},
67+
},
68+
placeholder: {
69+
control: {
70+
type: 'text',
71+
},
72+
defaultValue: 'Placeholder text',
73+
},
74+
invalid: {
75+
control: {
76+
type: 'boolean',
77+
},
78+
defaultValue: false,
79+
},
80+
invalidText: {
81+
control: {
82+
type: 'text',
83+
},
84+
defaultValue:
85+
'Error message that is really long can wrap to more lines but should not be excessively long.',
86+
},
87+
disabled: {
88+
control: {
89+
type: 'boolean',
90+
},
91+
defaultValue: false,
92+
},
93+
labelText: {
94+
control: {
95+
type: 'text',
96+
},
97+
defaultValue: 'Label',
98+
},
99+
warn: {
100+
control: {
101+
type: 'boolean',
102+
},
103+
defaultValue: false,
104+
},
105+
warnText: {
106+
control: {
107+
type: 'text',
108+
},
109+
defaultValue:
110+
'Warning message that is really long can wrap to more lines but should not be excessively long.',
111+
},
112+
value: {
113+
control: {
114+
type: 'text',
115+
},
116+
},
117+
};

0 commit comments

Comments
 (0)