Add new
-
+
diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx
index 4c1aaf7d3e5..050378ca0c2 100644
--- a/packages/@react-spectrum/s2/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx
@@ -67,9 +67,9 @@ type Story = StoryObj;
export const Example: Story = {
render: (args) => (
@@ -164,7 +164,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
Enable search
-
+
search term 1
search term 2
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index 2682f1bc8be..94167cef0a2 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -33,7 +33,11 @@ const meta: Meta = {
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
- contextualHelp: {table: {disable: true}}
+ contextualHelp: {table: {disable: true}},
+ placeholder: {control: {type: 'text'}}
+ },
+ args: {
+ placeholder: 'How many items?'
},
tags: ['autodocs'],
title: 'NumberField'
@@ -102,4 +106,3 @@ export const ContextualHelpExample: Story = {
label: 'Quantity'
}
};
-
diff --git a/packages/@react-spectrum/s2/stories/Popover.stories.tsx b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
index 42ca7489c0e..0ecf51d15b0 100644
--- a/packages/@react-spectrum/s2/stories/Popover.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
@@ -104,8 +104,8 @@ export const HelpCenter: Story = {
How are we doing? Share your feedback here.
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index 827a5cb8ed5..e162130e03a 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -34,7 +34,11 @@ const meta: Meta = {
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
- contextualHelp: {table: {disable: true}}
+ contextualHelp: {table: {disable: true}},
+ placeholder: {control: {type: 'text'}}
+ },
+ args: {
+ placeholder: 'Enter your search here'
},
title: 'SearchField'
};
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index eea59c28416..ba8e8169114 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -28,7 +28,11 @@ const meta: Meta = {
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
- contextualHelp: {table: {disable: true}}
+ contextualHelp: {table: {disable: true}},
+ placeholder: {control: {type: 'text'}}
+ },
+ args: {
+ placeholder: 'Enter your name'
},
title: 'TextField'
};
diff --git a/packages/@react-spectrum/s2/test/ColorField.test.tsx b/packages/@react-spectrum/s2/test/ColorField.test.tsx
new file mode 100644
index 00000000000..5d38c458f6b
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/ColorField.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColorField} from '../src';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('ColorField', () => {
+ let user;
+ beforeAll(() => {
+ user = userEvent.setup({delay: null, pointerMap});
+ });
+
+ it('should warn if the ColorField renders/blurs without a placeholder', async () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let {getByRole, rerender} = render(
+
+ );
+
+ expect(spy).toHaveBeenCalledWith(expect.stringContaining('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: '));
+ spy.mockClear();
+
+ await user.tab();
+ await user.tab();
+ expect(spy).toHaveBeenCalledWith(expect.stringContaining('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: '));
+ spy.mockClear();
+
+ let input = getByRole('textbox');
+ await user.click(input);
+ await user.keyboard('AAAAAA');
+ await user.tab();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index 05cefeb35c8..c85b7bbe932 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
describe('Combobox', () => {
let user;
let testUtilUser = new User();
+ let warnSpy;
function DynamicCombobox(props) {
let {items, loadingState, onLoadMore, ...otherProps} = props;
return (
@@ -40,6 +41,7 @@ describe('Combobox', () => {
jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
+ warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
user = userEvent.setup({delay: null, pointerMap});
});
@@ -209,4 +211,29 @@ describe('Combobox', () => {
expect(tree.getAllByText('Contents')[1]).toBeVisible();
warn.mockRestore();
});
+
+ it('should not warn if the Combobox renders/blurs without a placeholder', async () => {
+ warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let items = [{name: 'Chocolate'}, {name: 'Mint'}, {name: 'Chocolate Chip'}];
+ let {rerender} = render(
+
+ );
+
+ expect(warnSpy).not.toBeCalled();
+
+ await user.tab();
+ await user.tab();
+ expect(warnSpy).not.toBeCalled();
+
+ rerender();
+ expect(warnSpy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(warnSpy).not.toHaveBeenCalled();
+
+ render(
+
+ );
+ expect(warnSpy).not.toHaveBeenCalled();
+ });
});
diff --git a/packages/@react-spectrum/s2/test/NumberField.test.tsx b/packages/@react-spectrum/s2/test/NumberField.test.tsx
new file mode 100644
index 00000000000..75876f2c6f0
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/NumberField.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {NumberField} from '../src';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('NumberField', () => {
+ let user;
+ beforeAll(() => {
+ user = userEvent.setup({delay: null, pointerMap});
+ });
+
+ it('should not warn if the NumberField renders/blurs without a placeholder', async () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let {getByRole, rerender} = render(
+
+ );
+
+ expect(spy).not.toBeCalled();
+
+ await user.tab();
+ await user.tab();
+ expect(spy).not.toBeCalled();
+
+ let input = getByRole('textbox');
+ await user.click(input);
+ await user.keyboard('1');
+ await user.tab();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/@react-spectrum/s2/test/SearchField.test.tsx b/packages/@react-spectrum/s2/test/SearchField.test.tsx
index a8ccddc2ae3..9d6d87feccb 100644
--- a/packages/@react-spectrum/s2/test/SearchField.test.tsx
+++ b/packages/@react-spectrum/s2/test/SearchField.test.tsx
@@ -41,4 +41,28 @@ describe('SearchField', () => {
await user.keyboard('Foo');
expect(group).not.toHaveAttribute('data-focus-visible');
});
+
+ it('should not warn if the SearchField renders/blurs without a placeholder', async () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let {getByRole, rerender} = render(
+
+ );
+
+ expect(spy).not.toBeCalled();
+ await user.tab();
+ await user.tab();
+ expect(spy).not.toBeCalled();
+
+ let input = getByRole('searchbox');
+ await user.click(input);
+ await user.keyboard('Foo');
+ await user.tab();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+ });
});
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
new file mode 100644
index 00000000000..9b433598f9a
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import {TextArea, TextField} from '../src';
+import userEvent from '@testing-library/user-event';
+
+describe('TextField', () => {
+ let user;
+ beforeAll(() => {
+ user = userEvent.setup({delay: null, pointerMap});
+ });
+
+ it('should warn if the TextField renders/blurs without a placeholder', async () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let {getByRole, rerender} = render(
+
+ );
+
+ expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
+ spy.mockClear();
+
+ await user.tab();
+ await user.tab();
+ expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
+ spy.mockClear();
+
+ let input = getByRole('textbox');
+ await user.click(input);
+ await user.keyboard('Foo');
+ await user.tab();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+ });
+
+ it('should warn if the TextArea renders/blurs without a placeholder', async () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ let {getByRole, rerender} = render(
+
+ );
+
+ expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
+ spy.mockClear();
+
+ await user.tab();
+ await user.tab();
+ expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
+ spy.mockClear();
+
+ let input = getByRole('textbox');
+ await user.click(input);
+ await user.keyboard('Foo');
+ await user.tab();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+
+ rerender();
+ expect(spy).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
index 362b916d7bf..56156f54447 100644
--- a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
+++ b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
@@ -49,7 +49,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
## ColorField
- Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder` (it has been removed for accessibility reasons)
- Change `validationState=“invalid”` to `isInvalid`
- Remove `validationState=“valid”` (it is no longer supported)
@@ -59,7 +58,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
- Change `menuWidth` value from a `DimensionValue` to a pixel value
- Remove `isQuiet` (it is no longer supported)
- [PENDING] Comment out `loadingState` (it has not been implemented yet)
-- Remove `placeholder` (it is no longer supported)
- Change `validationState=“invalid”` to `isInvalid`
- Remove `validationState=“valid”` (it is no longer supported)
- [PENDING] Comment out `onLoadMore` (it has not been implemented yet)
@@ -134,7 +132,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
- Remove `showErrorIcon` (it has been removed for accessibility reasons)
## SearchField
-- Remove `placeholder` (it has been removed for accessibility reasons)
- [PENDING] Comment out icon (it has not been implemented yet)
- Remove `isQuiet` (it is no longer supported)
- Change `validationState=“invalid”` to `isInvalid`
@@ -169,14 +166,12 @@ Note that `[PENDING]` indicates that future changes will occur before the final
## TextArea
- [PENDING] Comment out `icon` (it has not been implemented yet)
- Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder` (it has been removed for accessibility reasons)
- Change `validationState=“invalid”` to `isInvalid`
- Remove `validationState=“valid”` (it is no longer supported)
## TextField
- [PENDING] Comment out `icon` (it has not been implemented yet)
- Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder` (it has been removed for accessibility reasons)
- Change `validationState=“invalid”` to `isInvalid`
- Remove `validationState=“valid”` (it is no longer supported)
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
index 80aa4da0c2f..aaac132d311 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
@@ -6,12 +6,6 @@ exports[`Removes isQuiet 1`] = `
"
`;
-exports[`Removes placeholder 1`] = `
-"import { ColorField } from "@react-spectrum/s2";
-
-"
-`;
-
exports[`changes validationState to isInvalid or nothing 1`] = `
"import { ColorField } from "@react-spectrum/s2";
let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
index e5643e6ec7a..4d74b2d5c4b 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
@@ -89,31 +89,6 @@ let props = {isQuiet: true};
"
`;
-exports[`Removes placeholder 1`] = `
-"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-