docs: fix typos throughout codebase

Author: mlaursen

.eslintignore

@@ -1,4 +1,5 @@
 packages/material-icons/src
+packages/documentation/public/tsdocs
 packages/documentation/src/components/SassDocPage
 packages/documentation/src/constants/meta
 packages/documentation/src/constants/sandboxes

packages/app-bar/src/_mixins.scss

@@ -277,7 +277,7 @@
 ///    }
 ///
 ///    .offset-by-dense-height {
-///      @include rmd-app-bar-ofset($height-type: dense-height);
+///      @include rmd-app-bar-offset($height-type: dense-height);
 ///    }
 ///
 /// @param {String} property [padding-top] - The property to apply the offset
@@ -287,19 +287,19 @@
 /// should be one of: `height`, `dense-height`, `prominent-height`,
 /// `prominent-dense-height`
 @mixin rmd-app-bar-offset($property: padding-top, $height-type: height) {
-  $valid-propertys: (
+  $valid-properties: (
     padding-top padding-bottom margin-top margin-bottom top bottom
   );
   $property: rmd-utils-validate(
-    $valid-propertys,
+    $valid-properties,
     $property,
     'app bar offset property'
   );
 
   @include rmd-app-bar-theme($property, $height-type);
 }
 
-/// Creates all the app  bar offset classnames to use. This ties in with the
+/// Creates all the app  bar offset class names to use. This ties in with the
 /// provided constants in javascript:
 ///
 /// - APP_BAR_OFFSET_CLASSNAME

packages/autocomplete/src/utils.ts

@@ -24,7 +24,7 @@ export function getResultId(id: string, index: number): string {
  *
  * @param datum - The current result datum to get a label for
  * @param labelKey - The key to extract a label from if the datum is an object
- * @param query - The current search query. This is useful if you want to
+ * @param _query - The current search query. This is useful if you want to
  * implement text "highlighting" (bold) of all the letters that match in the
  * item.
  * @returns a renderable node to display
@@ -100,7 +100,7 @@ export function getFilterFunction<O extends {} = {}>(
     default:
       if (process.env.NODE_ENV !== "production") {
         throw new Error(
-          `Invalid filter function: "${filter}". Supported values are: "fuzzy", "case-insenitive", "none", or a custom function.`
+          `Invalid filter function: "${filter}". Supported values are: "fuzzy", "case-insensitive", "none", or a custom function.`
         );
       }
 

packages/badge/src/Badge.tsx

@@ -38,7 +38,7 @@ const block = bem("rmd-badge");
 /**
  * This component is generally used for displaying notifications with a count
  * relative to another element with the `BadgeContainer` component. However, it
- * can be used by itself to display any subpplementary content if needed.
+ * can be used by itself to display any supplementary content if needed.
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   {

packages/card/src/CardTitle.tsx

@@ -21,7 +21,7 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
 const block = bem("rmd-card");
 
 /**
- * The `Cardtitle` component should normally be used within the `CardHeader` to
+ * The `CardTitle` component should normally be used within the `CardHeader` to
  * create a nicely styled `<h5>` title for your card. This can also be used
  * along with the `CardSubtitle` component within the `CardHeader` for a main
  * title and a subtitle.

packages/chip/src/_variables.scss

@@ -235,7 +235,7 @@ $rmd-chip-outline-background-color: if(
   $rmd-chip-outline-dark-background-color
 ) !default;
 
-/// The tect color to use for "outlined" themed chips.
+/// The text color to use for "outlined" themed chips.
 ///
 /// @require $rmd-theme-light
 /// @type Color

packages/documentation/src/components/AppBarTitle.tsx

@@ -13,7 +13,7 @@ import { useId } from "./IdProvider";
  * if the title becomes truncated.
  *
  * This is pretty hacky right so it isn't part of the main lib yet, but a better
- * sultion to "auto tooltip" things might be added one day.
+ * solution to "auto tooltip" things might be added one day.
  */
 export default function AppBarTitle({
   id,

packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/BackgroundWarnings.tsx

@@ -47,10 +47,10 @@ export default function BackgroundWarnings({
     return null;
   }
 
-  const isMultiplie = warnings.length > 1;
+  const isMultiple = warnings.length > 1;
   const names = `**${warnings.join("** and **")}** value${
-    isMultiplie ? "s" : ""
-  } do${isMultiplie ? "" : "es"}`;
+    isMultiple ? "s" : ""
+  } do${isMultiple ? "" : "es"}`;
 
   return (
     <Markdown disableSinglePMargin className={className}>

packages/documentation/src/components/DemoSandbox/CodePreview.tsx

@@ -71,7 +71,7 @@ export default function CodePreview({
         [styles.offset]: offset,
       })}
       lineNumbers
-      // need to make this focusable so keyboard users can scoll
+      // need to make this focusable so keyboard users can scroll
       // the page
       tabIndex={0}
     >

packages/documentation/src/components/Demos/Alert/UpdatingMessagePriority.tsx

@@ -58,7 +58,7 @@ function UpdatingMessagePriority(): ReactElement {
       window.clearTimeout(timeout);
     };
 
-    // only want to run on running chagnes
+    // only want to run on running changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [running]);