Rename ComboBox and ListBox to Combobox and Listbox

UNRELEASED.md

@@ -40,7 +40,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
-- Rebuilt `Autocomplete` internals using new `ComboBox` and `ListBox` components built on the ARIA 1.2 spec for improved accessibility ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
+- Rebuilt `Autocomplete` internals using new `Combobox` and `Listbox` components built on the ARIA 1.2 spec for improved accessibility ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
 - Modernized tests for Avatar, Backdrop, Badge, Banner components([#4306](https://github.com/Shopify/polaris-react/pull/4306))
 - Modernized test for Card: Subsection, Header, Sections and Card ([#4325](https://github.com/Shopify/polaris-react/pull/4325)).
 - Modernized tests for Item, Panel, List, Tab, TabMeasurer (from Tabs components). ([#4313](https://github.com/Shopify/polaris-react/pull/4313))

src/components/Autocomplete/Autocomplete.tsx

@@ -8,8 +8,8 @@ import type {
 import type {PopoverProps} from '../Popover';
 import {isSection} from '../../utilities/options';
 import {useI18n} from '../../utilities/i18n';
-import {ComboBox} from '../ComboBox';
-import {ListBox} from '../ListBox';
+import {Combobox} from '../Combobox';
+import {Listbox} from '../Listbox';
 
 import {MappedAction, MappedOption} from './components';
 import styles from './Autocomplete.scss';
@@ -49,7 +49,7 @@ export interface AutocompleteProps {
 // generated *.d.ts files.
 
 export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
-  TextField: typeof ComboBox.TextField;
+  TextField: typeof Combobox.TextField;
 } = function Autocomplete({
   options,
   selected,
@@ -100,13 +100,13 @@ export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
         const optionMarkup = buildMappedOptionFromOption(options);
 
         return (
-          <ListBox.Section
+          <Listbox.Section
             divider={false}
-            title={<ListBox.Header>{title}</ListBox.Header>}
+            title={<Listbox.Header>{title}</Listbox.Header>}
             key={title}
           >
             {optionMarkup}
-          </ListBox.Section>
+          </Listbox.Section>
         );
       });
 
@@ -120,12 +120,12 @@ export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
 
     if (listTitle) {
       return (
-        <ListBox.Section
+        <Listbox.Section
           divider={false}
-          title={<ListBox.Header>{listTitle}</ListBox.Header>}
+          title={<Listbox.Header>{listTitle}</Listbox.Header>}
         >
           {optionList}
-        </ListBox.Section>
+        </Listbox.Section>
       );
     }
 
@@ -139,7 +139,7 @@ export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
   ]);
 
   const loadingMarkup = loading ? (
-    <ListBox.Loading
+    <Listbox.Loading
       accessibilityLabel={i18n.translate(
         'Polaris.Autocomplete.spinnerAccessibilityLabel',
       )}
@@ -168,24 +168,24 @@ export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
   );
 
   return (
-    <ComboBox
+    <Combobox
       activator={textField}
       allowMultiple={allowMultiple}
       onScrolledToBottom={onLoadMoreResults}
       preferredPosition={preferredPosition}
     >
       {actionMarkup || optionsMarkup || loadingMarkup || emptyStateMarkup ? (
-        <ListBox onSelect={updateSelection}>
+        <Listbox onSelect={updateSelection}>
           {actionMarkup}
           {optionsMarkup && (!loading || willLoadMoreResults)
             ? optionsMarkup
             : null}
           {loadingMarkup}
           {emptyStateMarkup}
-        </ListBox>
+        </Listbox>
       ) : null}
-    </ComboBox>
+    </Combobox>
   );
 };
 
-Autocomplete.TextField = ComboBox.TextField;
+Autocomplete.TextField = Combobox.TextField;

src/components/Autocomplete/README.md

@@ -11,7 +11,7 @@ keywords:
 
 # Autocomplete
 
-The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.
+The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `Combobox` and `Listbox` components with minor UI differences.
 
 ---
 
@@ -814,7 +814,7 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili
 
 ### Structure
 
-The autocomplete component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) and the [Aria 1.2 ListBox pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox).
+The autocomplete component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) and the [Aria 1.2 Listbox pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox).
 
 The autocomplete list displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the `preferredPosition` prop.
 

src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -4,7 +4,7 @@ import type {ActionListItemDescriptor} from '../../../../types';
 import {Badge} from '../../../Badge';
 import {classNames} from '../../../../utilities/css';
 import {MappedActionContext} from '../../../../utilities/autocomplete';
-import {ListBox} from '../../../ListBox';
+import {Listbox} from '../../../Listbox';
 import {Icon} from '../../../Icon';
 import {TextStyle} from '../../../TextStyle';
 import {useI18n} from '../../../../utilities/i18n';
@@ -102,7 +102,7 @@ export function MappedAction({
   return (
     <MappedActionContext.Provider value={context}>
       <div className={styles.ActionContainer}>
-        <ListBox.Action
+        <Listbox.Action
           selected={active}
           disabled={disabled}
           value={content || ''}
@@ -115,7 +115,7 @@ export function MappedAction({
               {suffixMarkup}
             </div>
           </div>
-        </ListBox.Action>
+        </Listbox.Action>
       </div>
     </MappedActionContext.Provider>
   );

src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {mountWithListBoxProvider} from 'test-utilities/list-box';
+import {mountWithListboxProvider} from 'test-utilities/listbox';
 
-import {ListBox} from '../../../../ListBox';
+import {Listbox} from '../../../../Listbox';
 import {MappedAction} from '../MappedAction';
 import {MappedActionContext} from '../../../../../utilities/autocomplete';
 import {Badge} from '../../../../Badge';
@@ -13,7 +13,7 @@ describe('MappedAction', () => {
       status: 'new' as const,
       content: 'new',
     };
-    const mappedAction = mountWithListBoxProvider(
+    const mappedAction = mountWithListboxProvider(
       <MappedAction badge={badge} />,
     );
 
@@ -24,7 +24,7 @@ describe('MappedAction', () => {
   });
 
   it('renders suffix when provided', () => {
-    const mappedAction = mountWithListBoxProvider(
+    const mappedAction = mountWithListboxProvider(
       <MappedAction suffix={<MockComponent />} />,
     );
 
@@ -33,15 +33,15 @@ describe('MappedAction', () => {
 
   it('renders helpText when provided', () => {
     const helpText = 'help text';
-    const mappedAction = mountWithListBoxProvider(
+    const mappedAction = mountWithListboxProvider(
       <MappedAction helpText={helpText} />,
     );
 
     expect(mappedAction).toContainReactText(helpText);
   });
 
   it('renders ellipsis when true', () => {
-    const mappedAction = mountWithListBoxProvider(
+    const mappedAction = mountWithListboxProvider(
       <MappedAction ellipsis content="content for ellipsis" />,
     );
 
@@ -56,7 +56,7 @@ describe('MappedAction', () => {
       onAction: () => {},
       destructive: false,
     };
-    const mappedAction = mountWithListBoxProvider(<MappedAction {...props} />);
+    const mappedAction = mountWithListboxProvider(<MappedAction {...props} />);
 
     expect(mappedAction).toContainReactComponent(MappedActionContext.Provider, {
       value: {
@@ -66,48 +66,48 @@ describe('MappedAction', () => {
     });
   });
 
-  describe('ListBox.Action', () => {
+  describe('Listbox.Action', () => {
     it('renders', () => {
-      const mappedAction = mountWithListBoxProvider(<MappedAction />);
+      const mappedAction = mountWithListboxProvider(<MappedAction />);
 
-      expect(mappedAction).toContainReactComponent(ListBox.Action);
+      expect(mappedAction).toContainReactComponent(Listbox.Action);
     });
 
     it('passes active', () => {
-      const mappedAction = mountWithListBoxProvider(<MappedAction active />);
+      const mappedAction = mountWithListboxProvider(<MappedAction active />);
 
-      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+      expect(mappedAction).toContainReactComponent(Listbox.Action, {
         selected: true,
       });
     });
 
     it('passes disabled', () => {
       const disabled = true;
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction disabled={disabled} />,
       );
 
-      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+      expect(mappedAction).toContainReactComponent(Listbox.Action, {
         disabled,
       });
     });
 
     it('passes value', () => {
       const value = 'value';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction content={value} />,
       );
 
-      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+      expect(mappedAction).toContainReactComponent(Listbox.Action, {
         value,
       });
     });
 
     it('defaults value to an empty string', () => {
       const value = '';
-      const mappedAction = mountWithListBoxProvider(<MappedAction />);
+      const mappedAction = mountWithListboxProvider(<MappedAction />);
 
-      expect(mappedAction).toContainReactComponent(ListBox.Action, {
+      expect(mappedAction).toContainReactComponent(Listbox.Action, {
         value,
       });
     });
@@ -116,7 +116,7 @@ describe('MappedAction', () => {
   describe('prefix markup', () => {
     it('renders images', () => {
       const image = 'image';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction image={image} />,
       );
 
@@ -127,15 +127,15 @@ describe('MappedAction', () => {
 
     it('renders icon', () => {
       const source = 'icon';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction icon={source} />,
       );
 
       expect(mappedAction).toContainReactComponent(Icon, {source});
     });
 
     it('renders prefix', () => {
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction prefix={<MockComponent />} />,
       );
 
@@ -145,7 +145,7 @@ describe('MappedAction', () => {
     it('renders icon instead of image', () => {
       const source = 'icon';
       const image = 'image';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction icon={source} image={image} />,
       );
 
@@ -157,7 +157,7 @@ describe('MappedAction', () => {
 
     it('renders prefix instead of image', () => {
       const image = 'image';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction prefix={<MockComponent />} image={image} />,
       );
 
@@ -169,7 +169,7 @@ describe('MappedAction', () => {
 
     it('renders prefix instead of icon', () => {
       const source = 'icon';
-      const mappedAction = mountWithListBoxProvider(
+      const mappedAction = mountWithListboxProvider(
         <MappedAction prefix={<MockComponent />} icon={source} />,
       );
 

src/components/Autocomplete/components/MappedOption/MappedOption.tsx

@@ -1,7 +1,7 @@
 import React, {memo} from 'react';
 
 import type {OptionDescriptor, ArrayElement} from '../../../../types';
-import {ListBox} from '../../../ListBox';
+import {Listbox} from '../../../Listbox';
 import {classNames} from '../../../../utilities/css';
 
 import styles from './MappedOption.scss';
@@ -32,19 +32,19 @@ export const MappedOption = memo(function MappedOption({
   const accessibilityLabel = typeof label === 'string' ? label : undefined;
 
   return (
-    <ListBox.Option
+    <Listbox.Option
       accessibilityLabel={accessibilityLabel}
       key={value}
       selected={selected}
       value={value}
       disabled={disabled}
     >
-      <ListBox.TextOption selected={selected} disabled={disabled}>
+      <Listbox.TextOption selected={selected} disabled={disabled}>
         <div className={styles.Content}>
           {mediaMarkup}
           {label}
         </div>
-      </ListBox.TextOption>
-    </ListBox.Option>
+      </Listbox.TextOption>
+    </Listbox.Option>
   );
 });