docs: fix comment and documentation typos

change/fluentui-react-94f72e4c-ed7b-49e7-8111-7c831dbc4c43.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: fix comment and documentation typos",
+  "packageName": "@fluentui/react",
+  "email": "sshaurya914@gmail.com",
+  "dependentChangeType": "none"
+}

change/fluentui-react-charting-927623af-5538-4529-8737-3742b28131b6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: fix comment and documentation typos",
+  "packageName": "@fluentui/react-charting",
+  "email": "sshaurya914@gmail.com",
+  "dependentChangeType": "none"
+}

change/fluentui-react-charts-d19f59fe-34e3-41a3-9263-bd53b169cb1d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: fix comment and documentation typos",
+  "packageName": "@fluentui/react-charts",
+  "email": "sshaurya914@gmail.com",
+  "dependentChangeType": "none"
+}

change/fluentui-react-nav-f6c89c25-4c7a-4b5b-a99e-ebaefd4cb38e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: fix comment and documentation typos",
+  "packageName": "@fluentui/react-nav",
+  "email": "sshaurya914@gmail.com",
+  "dependentChangeType": "none"
+}

packages/charts/react-charting/src/utilities/utilities.ts

@@ -1150,7 +1150,7 @@ export function createWrapOfXLabels(wrapLabelProps: IWrapLabelProps): number | u
     maxLines = Math.max(maxLines, lineNumber + 1);
   });
   if (!showXAxisLablesTooltip) {
-    let maxHeight: number = 12; // intial value to render corretly first time
+    let maxHeight: number = 12; // initial value to render correctly first time
     const boxHeight =
       (container ?? document).querySelector(`.${CARTESIAN_XAXIS_CLASSNAME} tspan`)?.getBoundingClientRect().height ?? 0;
     if (boxHeight > maxHeight) {

packages/charts/react-charts/library/src/utilities/utilities.ts

@@ -1178,7 +1178,7 @@ export function createWrapOfXLabels(wrapLabelProps: IWrapLabelProps): number | u
     maxLines = Math.max(maxLines, lineNumber + 1);
   });
   if (!showXAxisLablesTooltip) {
-    let maxHeight: number = 12; // intial value to render corretly first time
+    let maxHeight: number = 12; // initial value to render correctly first time
     const boxHeight =
       (container ?? document).querySelector(`.${CARTESIAN_XAXIS_CLASSNAME} tspan`)?.getBoundingClientRect().height ?? 0;
     if (boxHeight > maxHeight) {

packages/react-components/react-list/library/docs/ListA11y.md

@@ -190,9 +190,9 @@ When the list supports selection, the main action of the list item is **to toggl
 
 **Spacebar** on the `ListItem` always toggles the selection.
 
-**Enter** on the `ListItem` triggers the main action, which can be changed by passing the `onClick` handler, i.e. by default it triggers selection, but this behavior can be overriden (by changing the onClick handler).
+**Enter** on the `ListItem` triggers the main action, which can be changed by passing the `onClick` handler, i.e. by default it triggers selection, but this behavior can be overridden (by changing the onClick handler).
 
-Both keys behavior can be changed by passing the `onKeyDown` handler and preventing teh default by calling `preventDefault()` on the event. Please note that the uncontrolled selection can no longer be utilized in this case and you have to take control.
+Both keys behavior can be changed by passing the `onKeyDown` handler and preventing the default by calling `preventDefault()` on the event. Please note that the uncontrolled selection can no longer be utilized in this case and you have to take control.
 
 #### Listbox / option
 

packages/react-components/react-nav/library/src/components/NavDrawer/useNavDrawerStyles.styles.ts

@@ -18,7 +18,7 @@ const useStyles = makeStyles({
     backgroundColor: navItemTokens.backgroundColor,
     alignItems: 'unset',
   },
-  // seperate style so it can be applied conditionally
+  // separate style so it can be applied conditionally
   // if size is not set, use default width from the token.
   defaultWidth: {
     width: `${navItemTokens.defaultDrawerWidth}px`,

packages/react-components/react-search/library/docs/Spec.md

@@ -131,7 +131,7 @@ Most interaction and screen reader behavior will be handled automatically by the
 
 - The `<input>` is visible and shows the placeholder or value text.
 - The component doesn't provide a built-in label, so it's important for the user to pass in appropriate attributes such as `id` (associated with a label using `htmlFor`), `aria-label`, or `aria-labelledby`.
-- The clear button is not in the tab order and should not recieve focus; otherwise, no features in the initial implementation require manipulation of focus, tab order, or key handling.
+- The clear button is not in the tab order and should not receive focus; otherwise, no features in the initial implementation require manipulation of focus, tab order, or key handling.
 - Visual states for focus and hover will be applied to `root` rather than the `<input>` itself (which is rendered without a border and only used to show the text), because the `contentBefore`, `contentAfter`, and `dismiss` slots need to visually appear to be within the input.
 - Authors using SearchBox for a top-level site search are encouraged to wrap the component in a landmark with `role="search"`
 - Keyboard users can use keyboard shortcuts to clear the value.

packages/react-components/react-toast/stories/src/Toast/DefaultToastOptions.stories.tsx

@@ -26,7 +26,7 @@ DefaultToastOptions.parameters = {
     description: {
       story: [
         'Default options for all toasts can be configured on the `Toaster`.',
-        'These options are only defaults and can be overriden using `dispatchToast',
+        'These options are only defaults and can be overridden using `dispatchToast',
       ].join('\n'),
     },
   },

packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx

@@ -76,7 +76,7 @@ Intent.parameters = {
         '- warning',
         '- error',
         '',
-        'Each intent affects the default icon in the title and its colour. These icon slots can be overriden',
+        'Each intent affects the default icon in the title and its colour. These icon slots can be overridden',
         'to render other content such as progress spinners or avatars.',
         '',
         '>intent determines the urgency of the screen reader aria-live narration.',

packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx

@@ -125,7 +125,7 @@ export class MarqueeSelectionBase extends React.Component<IMarqueeSelectionProps
     );
   }
 
-  /** Determine if the mouse event occured on a scrollbar of the target element. */
+  /** Determine if the mouse event occurred on a scrollbar of the target element. */
   private _isMouseEventOnScrollbar(ev: MouseEvent): boolean {
     const targetElement = ev.target as HTMLElement;
     const targetScrollbarWidth = targetElement.offsetWidth - targetElement.clientWidth;

packages/react/src/components/ResizeGroup/ResizeGroup.types.ts

@@ -81,7 +81,7 @@ export interface IResizeGroupProps extends React.HTMLAttributes<HTMLDivElement>,
   /**
    * Function to be performed on the data in order to increase its width. It is called in scenarios where the
    * container has more room than the previous render and we may be able to fit more content. If there are no more
-   * scaling operations to perform on teh data, it should return undefined to prevent an infinite render loop.
+   * scaling operations to perform on the data, it should return undefined to prevent an infinite render loop.
    */
   onGrowData?: (prevData: any) => any;