docs: correct spelling issues throughout codebase (carbon-design-syst…

…em#18638)

* docs: correct spelling throughout codebase

* refactor: format markdown

docs/experimental-code.md

@@ -199,7 +199,7 @@ movement, it can be moved from "experimental" status to be "stable".
       - [ ] Snapshot every storybook story
       - [ ] Snapshot important discrete states (open, selected, enabled,
             autoAlign etc.) by setting controls/args on a story
-    - [ ] Accessibility Verifiction Tests (AVT) are present in
+    - [ ] Accessibility Verification Tests (AVT) are present in
           `e2e/components/ComponentName/ComponentName-test.avt.e2e.js` that:
       - [ ] Ensure every story `.toBeAccessible()`
       - [ ] Ensure important discrete states (open, selected, etc.) are covered

docs/release.md

@@ -267,8 +267,8 @@ categories:
 
 ### Manual Patch Release
 
-Occassionaly we need to do an off-cycle patch release to fix some broken
-functionality that was inadvertedly published in a previous release. In such
+Occasionally we need to do an off-cycle patch release to fix some broken
+functionality that was inadvertently published in a previous release. In such
 cases, follow these steps below to ensure a proper patch release:
 
 - [ ] Go to your local version of the monorepo
@@ -345,7 +345,7 @@ cases, follow these steps below to ensure a proper patch release:
   Note:
 
   - Do NOT do this for the <kbd>carbon-components</kbd> package.
-  - You need to use the individual generatied version number for the package
+  - You need to use the individual generated version number for the package
     here, not the released github tag version.
   - Ensure you log into the npm cli as `carbon-bot` to avoid auth issues
 
@@ -493,7 +493,7 @@ For instance:
 
 - `eslint-config-carbon` needs a new major
 - All other packages should only be bumped as a new patch
-- The tag for the release should remain at the curent major `v11.x`, and not be
+- The tag for the release should remain at the current major `v11.x`, and not be
   bumped to `v12.x`
 
 To do this, packages must be versioned manually.

docs/sprint-planning.md

@@ -4,7 +4,7 @@
 ## Table of Contents
 
 - [Overview](#overview)
-- [Dev Sprint Plannning](#dev-sprint-plannning)
+- [Dev Sprint Planning](#dev-sprint-planning)
   - [Process](#process)
     - [Dev Sprint Planning Meeting](#dev-sprint-planning-meeting)
       - [Previous to meeting](#previous-to-meeting)
@@ -22,7 +22,7 @@ the sprint in order to prepare for the next upcoming sprint. The purpose is to
 determine the work items that will be completed in the following sprint and who
 is responsible for each of these work items.
 
-## Dev Sprint Plannning
+## Dev Sprint Planning
 
 Participating developers in the Design System take turns leading the sprint
 planning sessions in a rotational matter per sprint as defined in the

docs/style.md

@@ -256,7 +256,7 @@ or animatable.
 Note that adding a forwarded ref to a component should be considered a breaking
 change. When creating a new component, even if you do not anticipate an explicit
 need to provide a forwarded ref, it's likely still worthwhile to include one to
-avoid unecessary breaking changes in the future.
+avoid unnecessary breaking changes in the future.
 
 #### `className`, `data-testid`, and `...rest`
 

packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js

@@ -180,7 +180,7 @@ describe('CheckboxGroup', () => {
 
   it('should render checkboxes horizontally', () => {
     const { container } = render(
-      <CheckboxGroup orientation="horizontal" legendText="test-horizental-prop">
+      <CheckboxGroup orientation="horizontal" legendText="test-horizontal-prop">
         <Checkbox labelText="Checkbox label 1" id="checkbox-label-1" />
         <Checkbox labelText="Checkbox label 2" id="checkbox-label-2" />
         <Checkbox labelText="Checkbox label 3" id="checkbox-label-3" />

packages/react/src/components/CodeSnippet/CodeSnippet.tsx

@@ -41,7 +41,7 @@ export type DeprecatedCodeSnippetAlignment =
   | 'right-bottom'
   | 'right-top';
 
-export type NewCodeSnippetAlignmnet =
+export type NewCodeSnippetAlignment =
   | 'top'
   | 'bottom'
   | 'left'
@@ -57,7 +57,7 @@ export type NewCodeSnippetAlignmnet =
 
 export type CodeSnippetAlignment =
   | DeprecatedCodeSnippetAlignment
-  | NewCodeSnippetAlignmnet;
+  | NewCodeSnippetAlignment;
 const propMappingFunction = (deprecatedValue) => {
   const mapping = {
     'top-left': 'top-start',

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js

@@ -115,7 +115,7 @@ describe('CodeSnippet', () => {
         {inline}
       </CodeSnippet>
     );
-    // note: outtermost component is a Tooltip
+    // note: outermost component is a Tooltip
     expect(screen.getByTestId('code-5')).toHaveClass('custom-class');
   });
 

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -821,7 +821,7 @@ describe('ComboBox', () => {
 
       expect(document.activeElement).not.toBe(input);
     });
-    it('should suggest best matching typeahread suggestion and complete it in Tab key press', async () => {
+    it('should suggest best matching typeahead suggestion and complete it in Tab key press', async () => {
       const user = userEvent.setup();
       render(<ComboBox {...mockProps} typeahead />);
 

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -366,7 +366,7 @@ export interface ComboBoxProps<ItemType>
   titleText?: ReactNode;
 
   /**
-   * **Experimental**: will enable autcomplete and typeahead for the input field
+   * **Experimental**: will enable autocomplete and typeahead for the input field
    */
   typeahead?: boolean;
 
@@ -1371,7 +1371,7 @@ ComboBox.propTypes = {
   translateWithId: PropTypes.func,
 
   /**
-   * **Experimental**: will enable autcomplete and typeahead for the input field
+   * **Experimental**: will enable autocomplete and typeahead for the input field
    */
   typeahead: PropTypes.bool,
 

packages/react/src/components/ComboButton/ComboButton-test.js

@@ -201,7 +201,7 @@ describe('ComboButton', () => {
       spy.mockRestore();
     });
 
-    it('warns when MenuItemRadioGoup is used in children', async () => {
+    it('warns when MenuItemRadioGroup is used in children', async () => {
       const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
       render(

packages/react/src/components/ComposedModal/ComposedModal.stories.js

@@ -351,7 +351,7 @@ export const WithInlineLoading = () => {
 
     await fakePromise();
 
-    setDescription('Submited!');
+    setDescription('Submitted!');
     setStatus('finished');
   };
 

packages/react/src/components/ContainedList/ContainedList.mdx

@@ -48,7 +48,7 @@ do not support passing in the `ExpandableSearch` within the title action prop
 while passing in the `Search` component as a child at the same time. If this
 happens, the `ExpandableSearch` in the title will override any other `Search`
 passed in as a child. To prevent this potential conflict, we have added
-funtionality to support both designs and both use cases. Please see
+functionality to support both designs and both use cases. Please see
 [Persistent Search](#persistent-search) docs below.
 
 ```js

packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js

@@ -103,7 +103,7 @@ describe('ContentSwitcher - RTL', () => {
       });
     });
 
-    it('should selected initally selected index based on prop', () => {
+    it('should selected initially selected index based on prop', () => {
       render(
         <ContentSwitcher
           onChange={() => {}}

packages/react/src/components/ContextMenu/useContextMenu.stories.js

@@ -30,7 +30,7 @@ export default {
 
 const Text = () => (
   <div style={{ width: '40rem' }}>
-    <h2>Right click anywere in the story frame</h2>
+    <h2>Right click anywhere in the story frame</h2>
     <br />
     <p>
       The <CodeSnippet type="inline">{`<Menu>`}</CodeSnippet> props are set

packages/react/src/components/DataTable/DataTable.mdx

@@ -480,7 +480,7 @@ experimental and might not be performant in tables with large datasets.
 ### Accessible Name
 
 To comply with accessibility requirements, make sure to supply the component
-with an accessible name by providing eiher the `aria-label`, `aria-labelledby`
+with an accessible name by providing either the `aria-label`, `aria-labelledby`
 or `title` attribute to the `Table` component. Read more on the accessible
 naming rule
 [here](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html).

packages/react/src/components/DataTable/__tests__/Table-test.js

@@ -75,7 +75,7 @@ describe('Table', () => {
     });
   });
 
-  describe('with overfow menu', () => {
+  describe('with overflow menu', () => {
     it('should set the visible overflow menu class with `overflowMenuOnHover`', () => {
       const { rerender } = render(<Table />);
       expect(screen.getByRole('table')).not.toHaveClass(

packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js

@@ -190,7 +190,7 @@ describe('TableExpandHeader', () => {
           },
           {
             id: 'd0d95500fccef68dd1e7cb36f381984d340e9a81657b00e578ef175b195d4983',
-            value: 'Sewcond',
+            value: 'Second',
             timestamp: '2022-06-06T12:57:27',
           },
           {

packages/react/src/components/DatePicker/DatePicker.stories.js

@@ -177,7 +177,7 @@ export const Default = ({ readOnly, ...args }) => {
 Default.argTypes = {
   ...sharedArgTypes,
   datePickerType: {
-    options: ['sigle', 'simple', 'range'],
+    options: ['single', 'simple', 'range'],
     control: { type: 'select' },
   },
 };

packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js

@@ -88,7 +88,7 @@ export default (config) => (fp) => {
       );
 
       // The date should only be set if both dates are valid dates, and they don't match.
-      // When they don't match, this indiciates that the date selected in the calendar is stale,
+      // When they don't match, this indicates that the date selected in the calendar is stale,
       // and the current value in the input should be set for the calendar to update.
       if (
         selectedToDate &&
@@ -105,7 +105,7 @@ export default (config) => (fp) => {
     }
 
     const isValidDate = (date) => date?.toString() !== 'Invalid Date';
-    // save end date in calendar inmediately after it's been written down
+    // save end date in calendar immediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {
         fp.setDate(

packages/react/src/components/DatePickerInput/DatePickerInput.tsx

@@ -209,7 +209,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
 
   const datePickerInputHelperId = !helperText
     ? undefined
-    : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+    : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
 
   const inputProps: any = {
     ...rest,

packages/react/src/components/Dropdown/Dropdown.stories.js

@@ -1,6 +1,6 @@
 /**
  * Copyright IBM Corp. 2016, 2023
- *dropdow.stor
+ *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */

packages/react/src/components/Dropdown/__tests__/Dropdown-test.js

@@ -110,7 +110,7 @@ describe('Dropdown', () => {
     expect(screen.getByText(1)).toBeInTheDocument();
   });
 
-  it('should render when defaulItemtoString passed with null value', async () => {
+  it('should render when defaultItemToString passed with null value', async () => {
     let mockProps2 = { ...mockProps, label: [] };
     const { container } = render(<Dropdown {...mockProps2} />);
     const labelElement = screen.queryByText('shankar');

packages/react/src/components/FluidForm/FluidForm.mdx

@@ -36,7 +36,7 @@ import * as FluidFormStories from './FluidForm.stories';
 ### Accessible Name
 
 To comply with accessibility requirements, make sure to supply the component
-with an accessible name by providing eiher the `aria-label`, `aria-labelledby`
+with an accessible name by providing either the `aria-label`, `aria-labelledby`
 or `title` attribute. Read more on the accessible naming rule
 [here](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html).
 

packages/react/src/components/Form/Form.mdx

@@ -49,7 +49,7 @@ suit their needs.
 ### Accessible Name
 
 To comply with accessibility requirements, make sure to supply the component
-with an accessible name by providing eiher the `aria-label`, `aria-labelledby`
+with an accessible name by providing either the `aria-label`, `aria-labelledby`
 or `title` attribute. Read more on the accessible naming rule
 [here](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html).
 

packages/react/src/components/Grid/CSSGrid.tsx

@@ -68,7 +68,7 @@ function CSSGrid<T extends React.ElementType>({
 
 CSSGrid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
 

packages/react/src/components/Grid/Grid.tsx

@@ -22,7 +22,7 @@ function Grid<T extends React.ElementType>(props: GridProps<T>) {
 
 Grid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
 

packages/react/src/components/Heading/__tests__/Heading-test.js

@@ -47,7 +47,7 @@ describe('Heading', () => {
     }
   });
 
-  it('should override heading levels when specifing the level of a section', () => {
+  it('should override heading levels when specifying the level of a section', () => {
     render(
       <>
         <Heading data-testid="h1">h1</Heading>

packages/react/src/components/IconIndicator/IconIndicator.mdx

@@ -36,7 +36,7 @@ function ExampleComponent() {
 ## Kind
 
 Icon indicators can take the form of failed, caution major, caution minor,
-undefined, succeeded, normal, in-progressm incomplete, not started, pending,
+undefined, succeeded, normal, in-progress incomplete, not started, pending,
 unknown, and informative.
 
 ## Size

packages/react/src/components/InlineCheckbox/InlineCheckbox.tsx

@@ -181,7 +181,7 @@ InlineCheckbox.propTypes = {
   id: PropTypes.string.isRequired,
 
   /**
-   * Specify whether the control is in an indterminate state
+   * Specify whether the control is in an indeterminate state
    */
   indeterminate: PropTypes.bool,
 

packages/react/src/components/Layout/Layout.mdx

@@ -33,7 +33,7 @@ layout context's intent.
 If a component is outside a layout context or `props.size` / `props.density`
 isn't set, it will fall back to its default rendering.
 
-Components that are explicitely passed a `size` to are unaffected by the layout
+Components that are explicitly passed a `size` to are unaffected by the layout
 context. Example:
 
 ```jsx

packages/react/src/components/Menu/Menu.mdx

@@ -50,7 +50,7 @@ where we pass `[x, x + width]` and `[y, y + height]` of the trigger button. This
 way, the `Menu` is able to automatically determine its ideal position on the
 screen (which side to open at and in which direction) while always staying
 visually attached to the trigger. Each `MenuItem` that has `children` and
-therfore a submenu uses the same approach under the hood to correctly position
+therefore a submenu uses the same approach under the hood to correctly position
 the submenu.
 
 ## Subcomponents
@@ -107,7 +107,7 @@ You can logically group multiple menu items by wrapping them inside a
 `MenuItemGroup`. This doesn't affect the visual rendering but can tremendously
 improve the experience for assistive technology users. You'll always want to use
 a `MenuItemGroup` if you have multiple
-[`MenuItemSelectable`](#menuitemselectable) that are relatd to each other.
+[`MenuItemSelectable`](#menuitemselectable) that are related to each other.
 
 ### MenuItemSelectable
 

packages/react/src/components/Menu/Menu.tsx

@@ -300,7 +300,7 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
       },
     };
 
-    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen
+    // Avoid that the Menu render incorrectly when the position is set in the right side of the screen
     if (
       actionButtonWidth &&
       actionButtonWidth < axes.x.size &&
@@ -339,7 +339,7 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
       menuAlignment === 'top-end' ||
       menuAlignment === 'top-start';
 
-    // If the tooltip is not visible in the top, switch to the bototm
+    // If the tooltip is not visible in the top, switch to the bottom
     if (
       typeof options[0] === 'number' &&
       topAlignment &&

packages/react/src/components/MenuButton/MenuButton-test.js

@@ -131,7 +131,7 @@ describe('MenuButton', () => {
       spy.mockRestore();
     });
 
-    it('warns when MenuItemRadioGoup is used in children', async () => {
+    it('warns when MenuItemRadioGroup is used in children', async () => {
       const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
       render(

packages/react/src/components/MenuButton/index.tsx

@@ -241,7 +241,7 @@ MenuButton.propTypes = {
   kind: PropTypes.oneOf(validButtonKinds),
 
   /**
-   * Provide the label to be renderd on the trigger button.
+   * Provide the label to be rendered on the trigger button.
    */
   label: PropTypes.string.isRequired,