Merge branch 'main' into dependabot/npm_and_yarn/packages/colors/exam…

…ples/sass-modules/next-13.5.0
carbon-design-system · Oct 31, 2023 · 8a42c92 · 8a42c92
2 parents efdb426 + cb2e75a
commit 8a42c92
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 79 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -62,6 +62,7 @@ jobs:
         with:
           node-version: '20.x'
       - uses: actions/cache@v3
+        if: github.event_name != 'merge_group'
         id: cache
         with:
           path: |
@@ -88,6 +89,7 @@ jobs:
         with:
           node-version: '20.x'
       - uses: actions/cache@v3
+        if: github.event_name != 'merge_group'
         id: cache
         with:
           path: |
@@ -127,6 +129,7 @@ jobs:
         with:
           node-version: '20.x'
       - uses: actions/cache@v3
+        if: github.event_name != 'merge_group'
         id: cache
         with:
           path: |
@@ -186,6 +189,7 @@ jobs:
         with:
           node-version: '20.x'
       - uses: actions/cache@v3
+        if: github.event_name != 'merge_group'
         id: cache
         with:
           path: |

diff --git a/e2e/components/Menu/Menu-test.avt.e2e.js b/e2e/components/Menu/Menu-test.avt.e2e.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('Menu @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Menu',
+      id: 'components-menu--playground',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Menu @avt-default-state');
+  });
+
+  test('@avt-keyboard-nav Menu', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Menu',
+      id: 'components-menu--playground',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const firstItem = page.getByRole('menuitem', { name: 'Share with' });
+    const LastItem = page.getByRole('menuitem', { name: 'Delete' });
+    const nestedMenu = page.getByRole('menu', { name: 'Share with' });
+    const nestedMenuItem = page
+      .getByRole('menuitemradio', {
+        name: 'None',
+      })
+      .first();
+
+    await expect(firstItem).toBeVisible();
+    await expect(LastItem).toBeVisible();
+    await expect(nestedMenu).not.toBeVisible();
+    await expect(firstItem).toBeFocused();
+
+    // Should go to last item when focused on the first item and arrow up is pressed
+    await page.keyboard.press('ArrowUp');
+    await expect(LastItem).toBeFocused();
+
+    // Should open menu with ArrowRight and focus on first item
+    await page.keyboard.press('ArrowDown');
+    await expect(firstItem).toBeFocused();
+    await page.keyboard.press('ArrowRight');
+    await expect(nestedMenu).toBeVisible();
+    await expect(nestedMenuItem).toBeVisible();
+    await expect(nestedMenuItem).toBeFocused();
+    await expect(nestedMenuItem).not.toBeChecked();
+
+    // Should select item with enter key
+    await page.keyboard.press('Enter');
+    await expect(nestedMenuItem).toBeChecked();
+
+    // Should close menu with ArrowLeft
+    await page.keyboard.press('ArrowLeft');
+    await expect(nestedMenu).not.toBeVisible();
+  });
+});
diff --git a/e2e/components/Menu/Menu-test.e2e.js b/e2e/components/Menu/Menu-test.e2e.js
@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('Menu', () => {
   themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('Menu', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Menu',
-      id: 'components-menu--playground',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('Menu');
-  });
 });
diff --git a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('Toggletip @avt', () => {
+  test('@avt-default-state Toggletip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Toggletip',
+      id: 'components-toggletip--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Toggletip');
+  });
+
+  test('@avt-keyboard-nav Toggletip', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Toggletip',
+      id: 'components-toggletip--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Checking if the defaultOpen is working
+    await expect(page.locator('.cds--popover--open')).toBeVisible();
+
+    // Checking first Toggletip interaction
+    await page.keyboard.press('Tab');
+    await expect(page.getByLabel('Show information').first()).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.cds--popover--open')).toBeVisible();
+    // Tabbing inside the popover
+    await page.keyboard.press('Tab');
+    await expect(page.locator('.cds--link').first()).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Button' })).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+
+    // Checking second Toggletip interaction and close on Escape key
+    await expect(page.getByLabel('Show information').last()).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.cds--popover--open')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.locator('.cds--popover--open')).not.toBeVisible();
+  });
+});
diff --git a/e2e/components/Toggletip/Toggletip-test.e2e.js b/e2e/components/Toggletip/Toggletip-test.e2e.js
@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
-const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+import { test } from '@playwright/test';
+import { themes } from '../../test-utils/env';
+import { snapshotStory } from '../../test-utils/storybook';
 
 test.describe('Toggletip', () => {
   themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('Toggletip', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Toggletip',
-      id: 'components-toggletip--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('Toggletip');
-  });
 });
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1054,6 +1054,9 @@ Map {
   "ComboBox" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "allowCustomValue": Object {
+        "type": "bool",
+      },
       "aria-label": Object {
         "type": "string",
       },
@@ -1945,6 +1948,7 @@ Map {
       },
     },
     "TableExpandRow": Object {
+      "$$typeof": Symbol(react.forward_ref),
       "propTypes": Object {
         "aria-controls": Object {
           "type": "string",
@@ -1979,6 +1983,7 @@ Map {
           "type": "func",
         },
       },
+      "render": [Function],
     },
     "TableExpandedRow": Object {
       "propTypes": Object {
@@ -7557,6 +7562,7 @@ Map {
     },
   },
   "TableExpandRow" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "aria-controls": Object {
         "type": "string",
@@ -7591,6 +7597,7 @@ Map {
         "type": "func",
       },
     },
+    "render": [Function],
   },
   "TableExpandedRow" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -101,6 +101,21 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should retain value if custom value is entered and `allowCustomValue` is set', async () => {
+    render(<ComboBox {...mockProps} allowCustomValue />);
+
+    expect(findInputNode()).toHaveDisplayValue('');
+
+    await userEvent.type(findInputNode(), 'Apple');
+    // Should close menu and keep value in input, even though it is not in the item list
+    await userEvent.keyboard('[Enter]');
+    assertMenuClosed();
+    expect(findInputNode()).toHaveDisplayValue('Apple');
+    // Should retain value on blur
+    await userEvent.keyboard('[Tab]');
+    expect(findInputNode()).toHaveDisplayValue('Apple');
+  });
+
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
       render(

diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -21,6 +21,7 @@ import ComboBox from '../ComboBox';
 - [itemToElement](#itemtoelement)
 - [itemToString](#itemtostring)
 - [shouldFilterItem](#shouldfilteritem)
+- [allowCustomValue](#allowcustomvalue)
 - [With Layer](#with-layer)
 - [Feedback](#feedback)
 
@@ -147,6 +148,19 @@ const filterItems = (menu) => {
 />;
 ```
 
+## `allowCustomValue`
+
+By default, if text is entered into the `Combobox` and it does not match an
+item, it will be cleared on blur. However, you can change this behavior by
+passing in the `allowCustomValue` prop. This will allow a user to close the menu
+and accept a custom value by pressing `Enter` as well as retain the value on
+blur. The `inputValue` is provided as a second argument to the `onChange`
+callback.
+
+```js
+{selectedItem: undefined, inputValue: 'Apple'}
+```
+
 ## With Layer
 
 <Canvas>

diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -79,6 +79,32 @@ export const Default = () => (
   </div>
 );
 
+export const AllowCustomValue = () => {
+  const filterItems = (menu) => {
+    return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
+  };
+  return (
+    <div style={{ width: 300 }}>
+      <ComboBox
+        allowCustomValue
+        shouldFilterItem={filterItems}
+        onChange={(e) => {
+          console.log(e);
+        }}
+        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"
+      />
+    </div>
+  );
+};
+
 export const _WithLayer = () => (
   <WithLayer>
     {(layer) => (