@charcoal-ui/react 4.2.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TextField/index.d.ts.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +7 -7
- package/src/components/TextField/index.tsx +2 -4
- package/src/components/TextField/text-field.test.tsx +72 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/react",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"test": "vitest run --passWithNoTests"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@charcoal-ui/esbuild-plugin-styled-components": "^4.2.
|
|
36
|
+
"@charcoal-ui/esbuild-plugin-styled-components": "^4.2.1",
|
|
37
37
|
"@react-types/switch": "^3.1.2",
|
|
38
38
|
"@storybook/addon-actions": "^8.0.5",
|
|
39
39
|
"@storybook/react": "^8.0.5",
|
|
@@ -59,10 +59,10 @@
|
|
|
59
59
|
"vitest": "^2.0.1"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@charcoal-ui/foundation": "^4.2.
|
|
63
|
-
"@charcoal-ui/icons": "^4.2.
|
|
64
|
-
"@charcoal-ui/theme": "^4.2.
|
|
65
|
-
"@charcoal-ui/utils": "^4.2.
|
|
62
|
+
"@charcoal-ui/foundation": "^4.2.1",
|
|
63
|
+
"@charcoal-ui/icons": "^4.2.1",
|
|
64
|
+
"@charcoal-ui/theme": "^4.2.1",
|
|
65
|
+
"@charcoal-ui/utils": "^4.2.1",
|
|
66
66
|
"@react-aria/button": "^3.9.1",
|
|
67
67
|
"@react-aria/checkbox": "^3.13.0",
|
|
68
68
|
"@react-aria/dialog": "^3.5.10",
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
96
96
|
"directory": "packages/react"
|
|
97
97
|
},
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "9a017d7e402dfcf371a5ca9a2b61bcd095467d89"
|
|
99
99
|
}
|
|
@@ -108,9 +108,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
108
108
|
data-invalid={invalid === true}
|
|
109
109
|
ref={containerRef}
|
|
110
110
|
>
|
|
111
|
-
{prefix
|
|
112
|
-
<div className="charcoal-text-field-prefix">{prefix}</div>
|
|
113
|
-
)}
|
|
111
|
+
{prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
|
|
114
112
|
<input
|
|
115
113
|
className="charcoal-text-field-input"
|
|
116
114
|
aria-describedby={showAssistiveText ? describedbyId : undefined}
|
|
@@ -126,7 +124,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
126
124
|
value={value}
|
|
127
125
|
{...props}
|
|
128
126
|
/>
|
|
129
|
-
{(suffix
|
|
127
|
+
{(suffix || showCount) && (
|
|
130
128
|
<div className="charcoal-text-field-suffix">
|
|
131
129
|
{suffix}
|
|
132
130
|
{showCount && (
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { render } from '@testing-library/react'
|
|
2
|
+
import TextField from '.'
|
|
3
|
+
|
|
4
|
+
import '@testing-library/jest-dom'
|
|
5
|
+
|
|
6
|
+
describe('TextField component', () => {
|
|
7
|
+
it('should not render prefix and suffix when not provided', () => {
|
|
8
|
+
const { container } = render(<TextField />)
|
|
9
|
+
|
|
10
|
+
// prefix and suffix elements should not be rendered
|
|
11
|
+
const prefixElement = container.querySelector('.charcoal-text-field-prefix')
|
|
12
|
+
const suffixElement = container.querySelector('.charcoal-text-field-suffix')
|
|
13
|
+
|
|
14
|
+
expect(prefixElement).toBeNull()
|
|
15
|
+
expect(suffixElement).toBeNull()
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
test.each([
|
|
19
|
+
[null, 'null'],
|
|
20
|
+
[undefined, 'undefined'],
|
|
21
|
+
['', 'empty string'],
|
|
22
|
+
[false, 'boolean false'],
|
|
23
|
+
[0, 'zero'],
|
|
24
|
+
])(
|
|
25
|
+
'should not render prefix when value is falsy (%s: %s)',
|
|
26
|
+
(prefixValue, _desc) => {
|
|
27
|
+
const { container } = render(<TextField prefix={prefixValue} />)
|
|
28
|
+
const prefixElement = container.querySelector('.charcoal-text-prefix')
|
|
29
|
+
expect(prefixElement).toBeNull()
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
|
|
33
|
+
test.each([
|
|
34
|
+
[null, 'null'],
|
|
35
|
+
[undefined, 'undefined'],
|
|
36
|
+
['', 'empty string'],
|
|
37
|
+
[false, 'boolean false'],
|
|
38
|
+
[0, 'zero'],
|
|
39
|
+
])(
|
|
40
|
+
'should not render suffix when value is falsy (%s: %s) and showCount is false',
|
|
41
|
+
(suffixValue, _desc) => {
|
|
42
|
+
const { container } = render(
|
|
43
|
+
<TextField suffix={suffixValue} showCount={false} />
|
|
44
|
+
)
|
|
45
|
+
const suffixElement = container.querySelector(
|
|
46
|
+
'.charcoal-text-field-suffix'
|
|
47
|
+
)
|
|
48
|
+
expect(suffixElement).toBeNull()
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
|
|
52
|
+
it('should render prefix and suffix when provided as truthy values', () => {
|
|
53
|
+
const prefixContent = 'Test Prefix'
|
|
54
|
+
const suffixContent = 'Test Suffix'
|
|
55
|
+
const { container, getByText } = render(
|
|
56
|
+
<TextField
|
|
57
|
+
prefix={<span>{prefixContent}</span>}
|
|
58
|
+
suffix={<span>{suffixContent}</span>}
|
|
59
|
+
/>
|
|
60
|
+
)
|
|
61
|
+
|
|
62
|
+
const prefixElement = container.querySelector('.charcoal-text-field-prefix')
|
|
63
|
+
const suffixElement = container.querySelector('.charcoal-text-field-suffix')
|
|
64
|
+
|
|
65
|
+
expect(prefixElement).not.toBeNull()
|
|
66
|
+
expect(suffixElement).not.toBeNull()
|
|
67
|
+
|
|
68
|
+
// Verify text content
|
|
69
|
+
expect(getByText(prefixContent)).toBeInTheDocument()
|
|
70
|
+
expect(getByText(suffixContent)).toBeInTheDocument()
|
|
71
|
+
})
|
|
72
|
+
})
|