docs: fix irregularities and update language (carbon-design-system#9349)

* docs: fix irregularities and update language * docs: fix lint err Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Scott Strubberg <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
conradennis · Aug 2, 2021 · fc76700 · fc76700
1 parent a83021a
commit fc76700
Show file tree

Hide file tree

Showing 49 changed files with 76 additions and 71 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -774,6 +774,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "adamalston",
+      "name": "Adam Alston",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18297826?v=4",
+      "profile": "https://github.com/adamalston",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/packages/react/src/components/Breadcrumb/index.js b/packages/react/src/components/Breadcrumb/index.js
@@ -11,5 +11,5 @@ import BreadcrumbSkeleton from './Breadcrumb.Skeleton';
 
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton };
 
-// Maintain default export as Breadcrumb for backwards-compatability
+// Maintain default export as Breadcrumb for backwards-compatibility
 export default Breadcrumb;
diff --git a/packages/react/src/components/Button/Button-test.js b/packages/react/src/components/Button/Button-test.js
@@ -304,7 +304,7 @@ describe('DangerButton', () => {
 });
 
 describe('danger--primaryButton', () => {
-  describe('Renders as exptected', () => {
+  describe('Renders as expected', () => {
     const wrapper = shallow(
       <Button kind="danger--primary" className="extra-class" />
     );
@@ -320,7 +320,7 @@ describe('danger--primaryButton', () => {
 });
 
 describe('TertiaryButton', () => {
-  describe('Renders as exptected', () => {
+  describe('Renders as expected', () => {
     const wrapper = shallow(<Button kind="tertiary" className="extra-class" />);
 
     it('has the expected classes', () => {

diff --git a/packages/react/src/components/Button/button-avt.md b/packages/react/src/components/Button/button-avt.md
@@ -21,7 +21,7 @@ Each screen reader should be tested when paired with its preferred browser.
 
 ### JAWS on Edge/Chrome
 
-1. {tab} "Main fram, Button, button. To activate press SPACEBAR"
+1. {tab} "Main frame, Button, button. To activate press SPACEBAR"
 
 ### NVDA on Firefox (optional, but recommended)
 

diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/Checkbox/Checkbox.mdx
@@ -83,7 +83,7 @@ input that is being exposed to the user and is a required prop.
 ### Checkbox onChange
 
 You can use the `onChange` prop to pass in a custom function for event handling.
-This prop recieves three arguements: a boolean, the checkbox id, and the dom
+This prop receives three arguments: a boolean, the checkbox id, and the dom
 event.
 
 ```jsx

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -197,7 +197,7 @@ describe('ComboBox', () => {
       expect(findMenuNode(wrapper).length).toBe(1);
     });
 
-    it('should set `inputValue` to an empty string if a falsey-y value is given', () => {
+    it('should set `inputValue` to an empty string if a false-y value is given', () => {
       const wrapper = mount(<ComboBox {...mockProps} />);
       expect(wrapper.find('input').instance().value).toBe('');
     });

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -447,7 +447,7 @@ ComboBox.propTypes = {
 
   /**
    * Optional function to render items as custom components instead of strings.
-   * Defaults to null and is overriden by a getter
+   * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes.func,
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -39,10 +39,10 @@ and is typically used when there are a large amount of options to choose from.
 
 ## Disabled
 
-A disabled comobobox is available but should not be used as the sole means of
+A disabled combobox is available but should not be used as the sole means of
 conveying information. For example, if the user must complete a previous form
 input before moving on to the combobox, make sure to make that clear to the user
-via an error state on the previous form element in adition to disabling the next
+via an error state on the previous form element in addition to disabling the next
 element.
 
 <Preview>

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -113,11 +113,7 @@ There are four responsive
   <ModalHeader />
   <ModalBody>
     <p className="bx--modal-content__text">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis
-      quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero
-      in augue mattis, a molestie metus vestibulum. Aliquam placerat felis
-      ultrices lorem condimentum, nec ullamcorper felis porttitor.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.
     </p>
   </ModalBody>
 </ComposedModal>
@@ -217,17 +213,17 @@ With `<ComposedModal>`, you can control the buttons with the following code.
       kind="secondary"
       onClick={() => { (Run some action...) setOpen(false); }}>
       Another button
-    </Buttton>
+    </Button>
     <Button
       kind="secondary"
       onClick={() => { (Run some action...) setOpen(false); }}>
       Secondary button
-    </Buttton>
+    </Button>
     <Button
       kind="primary"
       onClick={() => { (Run some action...) setOpen(false); }}>
-      Priamry button
-    </Buttton>
+      Primary button
+    </Button>
   </ModalFooter>
 </ComposedModal>
 ```
@@ -240,7 +236,7 @@ clarity to an otherwise repetitive title and body message.
 To use this pattern with `<Modal>`, you can omit the `children` prop.
 
 ```jsx
-const modalHeadding =
+const modalHeading =
   'Are you sure you want to add the "Speech to Text" service ' +
   'to the node-test app?';
 ...
@@ -255,7 +251,7 @@ To use this pattern with `<ComposedModal>`, you can omit `<ModalBody>`.
 
 ```jsx
 <ComposedModal>
-  <ModalHeader label="Modla label">
+  <ModalHeader label="Modal label">
     <h1>
       Are you sure you want to add the "Speech to Text" service to the node-test
       app?

diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js
@@ -80,7 +80,7 @@ export default function Copy({
 
 Copy.propTypes = {
   /**
-   * Pass in content to be rendred in the underlying `<button>`
+   * Pass in content to be rendered in the underlying `<button>`
    */
   children: PropTypes.node,
 

diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -79,7 +79,7 @@ TableBatchActions.propTypes = {
 
   /**
    * Hook required to listen for when the user initiates a cancel request
-   * through this comopnent
+   * through this component
    */
   onCancel: PropTypes.func.isRequired,
 
@@ -97,7 +97,7 @@ TableBatchActions.propTypes = {
 
   /**
    * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are avabile on the `translationKeys` field for
+   * choice. Translation keys are available on the `translationKeys` field for
    * this component.
    */
   translateWithId: PropTypes.func,

diff --git a/packages/react/src/components/DataTable/TableExpandHeader.js b/packages/react/src/components/DataTable/TableExpandHeader.js
@@ -73,7 +73,7 @@ TableExpandHeader.propTypes = {
 
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
-   * attributes so that `TableExpandRow` and `TableExapndedRow` work together
+   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
 

diff --git a/packages/react/src/components/DataTable/TableExpandRow.js b/packages/react/src/components/DataTable/TableExpandRow.js
@@ -78,7 +78,7 @@ TableExpandRow.propTypes = {
 
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
-   * attributes so that `TableExpandRow` and `TableExapndedRow` work together
+   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: PropTypes.bool.isRequired,
 

diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js
@@ -172,7 +172,7 @@ TableHeader.propTypes = {
 
   /**
    * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are avabile on the `translationKeys` field for
+   * choice. Translation keys are available on the `translationKeys` field for
    * this component.
    */
   translateWithId: PropTypes.func,

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -187,7 +187,7 @@ TableToolbarSearch.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Provide an optional className for the overal container of the Search
+   * Provide an optional className for the overall container of the Search
    */
   searchContainerClass: PropTypes.string,
 

diff --git a/packages/react/src/components/DataTable/migrate-to-7.x.md b/packages/react/src/components/DataTable/migrate-to-7.x.md
@@ -23,5 +23,5 @@ import Download16 from '@carbon/icons-react/lib/download/16';
 
 ## `<TableExpandedRow>`
 
-- Now manages it's own TabelCell
+- Now manages it's own TableCell
 - Expects `colSpan` prop to determine width
diff --git a/packages/react/src/components/DataTable/state/sorting.js b/packages/react/src/components/DataTable/state/sorting.js
@@ -66,7 +66,7 @@ export const getNextSortState = (props, state, { key }) => {
  * @param {object} state.cellsById Lookup object for cells by id
  * @param {Array<string>} state.initialRowOrder Initial row order for the
  * current set of rows
- * @param {string} key The key for the given header we are derving the
+ * @param {string} key The key for the given header we are serving the
  * sorted state for
  * @param {string} sortDirection The sortState that we want to order by
  * @returns {object}

diff --git a/packages/react/src/components/DataTable/tools/filter.js b/packages/react/src/components/DataTable/tools/filter.js
@@ -6,7 +6,7 @@
  */
 
 /**
- * Default implemention of how we filter rows internally. The idea behind this
+ * Default implementation of how we filter rows internally. The idea behind this
  * implementation is to use the given list of row ids and headers to get the
  * individual cell values for a row. Then, we go through each cell value and see
  * if any of them includes the given inputValue.

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -101,7 +101,7 @@ describe('DatePicker', () => {
       expect(wrapper.props().value).toEqual('11/08/2017');
     });
 
-    it('should not initalize a calendar', () => {
+    it('should not initialize a calendar', () => {
       expect(wrapper.cal).toEqual(undefined);
     });
   });
@@ -127,7 +127,7 @@ describe('DatePicker', () => {
       ).toBe(true);
     });
 
-    it('should initalize a calendar', () => {
+    it('should initialize a calendar', () => {
       expect(wrapper.instance().cal).toBeDefined();
     });
 
@@ -206,7 +206,7 @@ describe('DatePicker', () => {
       ).toBe(true);
     });
 
-    it('should initalize a calendar', () => {
+    it('should initialize a calendar', () => {
       expect(wrapper.instance().cal).toBeDefined();
     });
 

diff --git a/packages/react/src/components/DatePicker/plugins/appendToPlugin.js b/packages/react/src/components/DatePicker/plugins/appendToPlugin.js
@@ -13,7 +13,7 @@
  */
 export default (config) => (fp) => {
   /**
-   * Adjusts the floating meun position after Flatpicker sets it.
+   * Adjusts the floating menu position after Flatpicker sets it.
    */
   const handlePreCalendarPosition = () => {
     Promise.resolve().then(() => {
@@ -43,7 +43,7 @@ export default (config) => (fp) => {
           'Floating menu container must not have `position:static`.'
         );
       }
-      // `2` for negative mergin on calendar dropdown
+      // `2` for negative margin on calendar dropdown
       calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
       calendarContainer.style.left = `${refLeft - containerLeft}px`;
     });

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -282,7 +282,7 @@ Dropdown.propTypes = {
 
   /**
    * Function to render items as custom components instead of strings.
-   * Defaults to null and is overriden by a getter
+   * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes.func,
 
@@ -312,7 +312,7 @@ Dropdown.propTypes = {
 
   /**
    * `onChange` is a utility for this controlled component to communicate to a
-   * consuming component what kind of internal state changes are occuring.
+   * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func,
 

diff --git a/packages/react/src/components/Grid/Grid.mdx b/packages/react/src/components/Grid/Grid.mdx
@@ -183,7 +183,7 @@ use the `as` prop to change this to another HTML element, or a custom component
 from your project.
 
 In the example below, we use the `as` prop on `Row` to change it from a `div` to
-a `section`. Simililarly, we use the `as` prop on `Column` to change it from a
+a `section`. Similarly, we use the `as` prop on `Column` to change it from a
 `div` to an `article`.
 
 ```jsx

diff --git a/packages/react/src/components/Icon/Icon-test.js b/packages/react/src/components/Icon/Icon-test.js
@@ -46,15 +46,15 @@ describe('Icon', () => {
       expect(wrapper.props().className).toEqual('extra-class');
     });
 
-    it('should recieve width props', () => {
+    it('should receive width props', () => {
       expect(wrapper.props().width).toEqual('20');
     });
 
-    it('should recieve height props', () => {
+    it('should receive height props', () => {
       expect(wrapper.props().height).toEqual('20');
     });
 
-    it('should recieve style props', () => {
+    it('should receive style props', () => {
       expect(wrapper.props().style).toEqual({ transition: '2s' });
     });
   });

diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -128,7 +128,7 @@ UxExample.storyName = 'UX example';
 UxExample.parameters = {
   info: {
     text: `
-        This is a full example of how to levarage the <InlineLoading /> component to create a nice user experience when submitting a form.
+        This is a full example of how to leverage the <InlineLoading /> component to create a nice user experience when submitting a form.
 
         For the full source code of this example, check out the 'story' panel below.
       `,

diff --git a/packages/react/src/components/InlineLoading/InlineLoading-test.js b/packages/react/src/components/InlineLoading/InlineLoading-test.js
@@ -22,7 +22,7 @@ describe('Loading', () => {
       expect(container.length).toEqual(1);
     });
 
-    it('shoud render a loader by default', () => {
+    it('should render a loader by default', () => {
       expect(wrapper.find(Loading).length).toEqual(1);
     });
 

diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -94,7 +94,7 @@ InlineLoading.propTypes = {
   iconDescription: PropTypes.string,
 
   /**
-   * Provide an optional handler to be inovked when <InlineLoading> is
+   * Provide an optional handler to be invoked when <InlineLoading> is
    * successful
    */
   onSuccess: PropTypes.func,

diff --git a/packages/react/src/components/Link/Link-test.js b/packages/react/src/components/Link/Link-test.js
@@ -89,7 +89,7 @@ describe('Link', () => {
   });
 
   describe('keyboard support', () => {
-    it('should recieve keyboard focus', () => {
+    it('should receive keyboard focus', () => {
       render(
         <Link href="/" className="some-class">
           A simple link

diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.js b/packages/react/src/components/ListBox/ListBoxMenuItem.js
@@ -55,7 +55,7 @@ const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem(
 
 ListBoxMenuItem.propTypes = {
   /**
-   * Specify any children nodes that hsould be rendered inside of the ListBox
+   * Specify any children nodes that should be rendered inside of the ListBox
    * Menu Item
    */
   children: PropTypes.node,
@@ -66,7 +66,7 @@ ListBoxMenuItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
 
   /**
-   * Specify whether the current menu item is "highlighed".
+   * Specify whether the current menu item is "highlighted".
    */
   isHighlighted: PropTypes.bool.isRequired,
 

diff --git a/packages/react/src/components/Loading/Loading-test.js b/packages/react/src/components/Loading/Loading-test.js
@@ -73,7 +73,7 @@ describe('Loading', () => {
       expect(loader.length).toEqual(1);
     });
 
-    it('shoud render an svg', () => {
+    it('should render an svg', () => {
       expect(svg.length).toEqual(1);
     });
 

diff --git a/packages/react/src/components/Menu/_utils.js b/packages/react/src/components/Menu/_utils.js
@@ -129,7 +129,7 @@ function elementFits(elementDimensions, position, boundaries, axis = 'x') {
  * @param {number[]} [targetBoundaries] The boundaries of the target the element should attach to: [minX, minY, maxX, maxY]
  * @param {number[]} [containerBoundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
  * @param {number} [preferredDirection=1] Which direction is preferred. Either 1 (right right) or -1 (to left)
- * @returns {object} The determined position and direction of the elemnt: { position: [x, y], direction: 1 | -1 }
+ * @returns {object} The determined position and direction of the element: { position: [x, y], direction: 1 | -1 }
  */
 export function getPosition(
   elementDimensions,