Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(combobox): refactor to use useCombobox #16283

Merged
merged 7 commits into from
May 10, 2024
Merged

chore(combobox): refactor to use useCombobox #16283

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
513000c
chore: refactor to use useCombobox
preetibansalui Apr 30, 2024
ddbc07f
fix: test error
preetibansalui Apr 30, 2024
b6a8cc0
Merge branch 'main' into 14684-refactor-combobox-to-use-usecombobox
preetibansalui Apr 30, 2024
0ec652f
fix: selecting disabled items
preetibansalui May 3, 2024
f5975ee
Merge branch 'main' into 14684-refactor-combobox-to-use-usecombobox
preetibansalui May 6, 2024
97a8304
fix: pr review fixes
preetibansalui May 9, 2024
5386296
Merge branch 'main' into 14684-refactor-combobox-to-use-usecombobox
preetibansalui May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion e2e/components/ComboBox/ComboBox-test.avt.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ test.describe('@avt ComboBox', () => {
await expect(menu).toBeVisible();
// Navigation inside the menu
// move to first option
await page.keyboard.press('ArrowDown');
await expect(optionOne).toHaveClass(
'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
);
Expand Down Expand Up @@ -114,5 +113,24 @@ test.describe('@avt ComboBox', () => {
// Should select and populate combobox with current filtered item
await page.keyboard.press('Enter');
await expect(combobox).toHaveValue('Option 2');
// clear to prep for general selection
await page.keyboard.press('Escape');
await expect(clearButton).toBeHidden();
await expect(combobox).toHaveValue('');

// should open and select option 1
await page.keyboard.press('Enter');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await expect(combobox).toHaveValue('Option 1');
await page.keyboard.press('Escape');

// should open and select option 2
await page.keyboard.press('Enter');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await expect(combobox).toHaveValue('Option 2');
await page.keyboard.press('Escape');
});
});
1 change: 0 additions & 1 deletion e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ test.describe('@avt FluidComboBox', () => {
await expect(menu).toBeVisible();
// Navigation inside the menu
// move to first option
await page.keyboard.press('ArrowDown');
await expect(optionOne).toHaveClass(
'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
);
Expand Down
136 changes: 1 addition & 135 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1116,141 +1116,7 @@ Map {
"type": "bool",
},
"downshiftProps": Object {
"args": Array [
Object {
"children": Object {
"type": "func",
},
"defaultHighlightedIndex": Object {
"type": "number",
},
"defaultIsOpen": Object {
"type": "bool",
},
"environment": Object {
"args": Array [
Object {
"Node": Object {
"isRequired": true,
"type": "func",
},
"addEventListener": Object {
"isRequired": true,
"type": "func",
},
"document": Object {
"args": Array [
Object {
"activeElement": Object {
"isRequired": true,
"type": "any",
},
"body": Object {
"isRequired": true,
"type": "any",
},
"createElement": Object {
"isRequired": true,
"type": "func",
},
"getElementById": Object {
"isRequired": true,
"type": "func",
},
},
],
"isRequired": true,
"type": "shape",
},
"removeEventListener": Object {
"isRequired": true,
"type": "func",
},
},
],
"type": "shape",
},
"getA11yStatusMessage": Object {
"type": "func",
},
"getItemId": Object {
"type": "func",
},
"highlightedIndex": Object {
"type": "number",
},
"id": Object {
"type": "string",
},
"initialHighlightedIndex": Object {
"type": "number",
},
"initialInputValue": Object {
"type": "string",
},
"initialIsOpen": Object {
"type": "bool",
},
"initialSelectedItem": Object {
"type": "any",
},
"inputId": Object {
"type": "string",
},
"inputValue": Object {
"type": "string",
},
"isOpen": Object {
"type": "bool",
},
"itemCount": Object {
"type": "number",
},
"itemToString": Object {
"type": "func",
},
"labelId": Object {
"type": "string",
},
"menuId": Object {
"type": "string",
},
"onChange": Object {
"type": "func",
},
"onInputValueChange": Object {
"type": "func",
},
"onOuterClick": Object {
"type": "func",
},
"onSelect": Object {
"type": "func",
},
"onStateChange": Object {
"type": "func",
},
"onUserAction": Object {
"type": "func",
},
"scrollIntoView": Object {
"type": "func",
},
"selectedItem": Object {
"type": "any",
},
"selectedItemChanged": Object {
"type": "func",
},
"stateReducer": Object {
"type": "func",
},
"suppressRefError": Object {
"type": "bool",
},
},
],
"type": "shape",
"type": "object",
},
"helperText": Object {
"type": "node",
Expand Down
10 changes: 1 addition & 9 deletions packages/react/src/components/ComboBox/ComboBox-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Slug } from '../Slug';

const findInputNode = () => screen.getByRole('combobox');
const openMenu = async () => {
await userEvent.click(findInputNode());
await userEvent.click(screen.getByTitle('Open'));
};

const prefix = 'cds';
Expand All @@ -39,14 +39,6 @@ describe('ComboBox', () => {
};
});

it('should display the menu of items when a user clicks on the input', async () => {
render(<ComboBox {...mockProps} />);

await userEvent.click(findInputNode());

assertMenuOpen(mockProps);
});

it('should call `onChange` each time an item is selected', async () => {
render(<ComboBox {...mockProps} />);
expect(mockProps.onChange).not.toHaveBeenCalled();
Expand Down
26 changes: 2 additions & 24 deletions packages/react/src/components/ComboBox/ComboBox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,6 @@ export const Default = () => (
onChange={() => {}}
id="carbon-combobox"
items={items}
downshiftProps={{
onStateChange: () => {
console.log('the state has changed');
},
}}
itemToString={(item) => (item ? item.text : '')}
titleText="ComboBox title"
helperText="Combobox helper text"
Expand All @@ -88,16 +83,9 @@ export const AllowCustomValue = () => {
<ComboBox
allowCustomValue
shouldFilterItem={filterItems}
onChange={(e) => {
console.log(e);
}}
onChange={() => {}}
id="carbon-combobox"
items={['Apple', 'Orange', 'Banana', 'Pineapple', 'Raspberry', 'Lime']}
downshiftProps={{
onStateChange: () => {
console.log('the state has changed');
},
}}
titleText="ComboBox title"
helperText="Combobox helper text"
/>
Expand Down Expand Up @@ -127,11 +115,6 @@ export const Playground = (args) => (
<ComboBox
id="carbon-combobox"
items={items}
downshiftProps={{
onStateChange: () => {
console.log('the state has changed');
},
}}
itemToString={(item) => (item ? item.text : '')}
titleText="ComboBox title"
helperText="Combobox helper text"
Expand Down Expand Up @@ -192,19 +175,14 @@ Playground.argTypes = {
onChange: {
action: 'changed',
},
onClick: {
onToggleClick: {
action: 'clicked',
},
onInputChange: {
table: {
disable: true,
},
},
onToggleClick: {
table: {
disable: true,
},
},
selectedItem: {
table: {
disable: true,
Expand Down
Loading
Loading