chore: fix typos (#3530)

* chore: fix typos

* test(vrt): update visual snapshots for leyan/typos [skip ci] (#3534)

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

* Update documentation-site/pages/components/tabs-motion.mdx

Co-authored-by: Graham Murdoch <grahammurdoch8@gmail.com>

Co-authored-by: UberOpenSourceBot <33560951+UberOpenSourceBot@users.noreply.github.com>
Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>
Co-authored-by: Graham Murdoch <grahammurdoch8@gmail.com>
Co-authored-by: Gergely Nemeth <gergelyke@users.noreply.github.com>

docs/migrations/01207.md

@@ -12,7 +12,7 @@ type checked. This change also removes usage of `$ref` now that Styletron has su
 See the example below for how this change will affect your code. Type definitions of props passed to
 components created with `styled` will be moved out of the style function, and to between `styled` and
 arguments. View information of Flow Generics [here](https://flow.org/en/docs/types/generics/#toc-syntax-of-generics).
-Theme no longer needs to be explictly typed in props. The `styled` function provides that.
+Theme no longer needs to be explicitly typed in props. The `styled` function provides that.
 
 ### Props type pass as generic rather than to callback function
 
@@ -296,7 +296,7 @@ We've removed the deprecated `COLOR_STYLE_KEYS` export from the Tag component. I
 
 ## RadioGroup
 
-To be consistent accross components, we'll use `aria-label` and `aria-labelled-by` in every components.
+To be consistent across components, we'll use `aria-label` and `aria-labelled-by` in every components.
 
 ### Migrating the `RadioGroup` component
 

docs/migrations/01390.md

@@ -136,7 +136,7 @@ Brand new to Base Web is a themed wrapper of styletron's
 [useStyletron](https://www.styletron.org/react/#usestyletron-hook) hook. In addition to what the
 `styletron-react` version gives you, importing `useStyletron` from `baseui` will provide the theme.
 Doing so removes the need to import `ThemeContext` around and calling `React.useContext` to read
-values from the theme. See the example below for a consice method to style your elements.
+values from the theme. See the example below for a concise method to style your elements.
 
 ```js
 // @flow

documentation-site/components/yard/ast.ts

@@ -18,11 +18,11 @@ export function toggleOverrideSharedProps(code: string, sharedProps: string[]) {
           newParams = properties.map((prop: any) => prop.key.name);
         }
 
-        const shoudlWeAddSharedProps = newParams.every(
+        const shouldWeAddSharedProps = newParams.every(
           name => !sharedProps.includes(name),
         );
 
-        if (shoudlWeAddSharedProps) {
+        if (shouldWeAddSharedProps) {
           sharedProps.forEach(param => {
             if (!newParams.includes(param)) {
               newParams.push(param);

documentation-site/components/yard/config/progress-bar.ts

@@ -18,7 +18,7 @@ const ProgressBarConfig: TConfig = {
       value: 10,
       type: PropTypes.Number,
       description:
-        'Progess bar value attribute normalized in the 0 to 100 range.',
+        'Progress bar value attribute normalized in the 0 to 100 range.',
       stateful: true,
     },
     getProgressLabel: {

documentation-site/components/yard/type-definition.js

@@ -36,12 +36,12 @@ export function resolveFromGeneric(type) {
 }
 
 export function reduceToObj(type) {
-  const reducableKinds = ['generic', 'object', 'intersection'];
+  const reducibleKinds = ['generic', 'object', 'intersection'];
   if (type.kind === 'generic') {
-    // Only attempt to reduce generic if it has a reducable value
-    // Unreducable generics that have an identifier value, e.g. ElementConfig, are still valid
+    // Only attempt to reduce generic if it has a reducible value
+    // Unreducible generics that have an identifier value, e.g. ElementConfig, are still valid
     // so we return early to avoid the console warn below
-    return reducableKinds.includes(type.value.kind)
+    return reducibleKinds.includes(type.value.kind)
       ? reduceToObj(type.value)
       : [];
   } else if (type.kind === 'object') {

documentation-site/examples/payment-card/form.tsx

@@ -29,7 +29,7 @@ export default () => {
   }
 
   return (
-    <div className={css({display: 'flex', flexDirecton: 'row'})}>
+    <div className={css({display: 'flex'})}>
       <FormControl
         overrides={getFormOverrides('250px')}
         caption="Card number"

documentation-site/examples/popover/ref-handling.tsx

@@ -44,7 +44,7 @@ export default () => {
       >
         <CheckboxWithRef>
           Created a wrapper component that renders Checkbox and
-          passes popover's anchor props to the Chackbox's Root
+          passes popover's anchor props to the Checkbox's Root
           element.
         </CheckboxWithRef>
       </StatefulPopover>

documentation-site/pages/blog/base-web-v7/index.mdx

@@ -21,7 +21,7 @@ type checked. This change also removes usage of `$ref` now that Styletron has su
 See the example below for how this change will affect your code. Type definitions of props passed to
 components created with `styled` will be moved out of the style function, and to between `styled` and
 arguments. View information of Flow Generics [here](https://flow.org/en/docs/types/generics/#toc-syntax-of-generics).
-Theme no longer needs to be explictly typed in props. The `styled` function provides that.
+Theme no longer needs to be explicitly typed in props. The `styled` function provides that.
 
 ### Props type pass as generic rather than to callback function
 
@@ -322,7 +322,7 @@ We've removed the deprecated `COLOR_STYLE_KEYS` export from the Tag component. I
 
 ## RadioGroup
 
-To be consistent accross components, we'll use `aria-label` and `aria-labelled-by` in every components.
+To be consistent across components, we'll use `aria-label` and `aria-labelled-by` in every components.
 
 ### Migrating the `RadioGroup` component
 

documentation-site/pages/blog/base-web-v8/index.mdx

@@ -144,7 +144,7 @@ Brand new to Base Web is a themed wrapper of styletron's
 [useStyletron](https://www.styletron.org/react/#usestyletron-hook) hook. In addition to what the
 `styletron-react` version gives you, importing `useStyletron` from `baseui` will provide the theme.
 Doing so removes the need to import `ThemeContext` around and calling `React.useContext` to read
-values from the theme. See the example below for a consice method to style your elements.
+values from the theme. See the example below for a concise method to style your elements.
 
 ```js
 // @flow

documentation-site/pages/blog/base-web-v9/index.mdx

@@ -153,8 +153,8 @@ This will set the children buttons to whatever kind you have passed to `ButtonGr
 ```
 buttonPrimarySelectedText
 buttonPrimarySelectedFill
-buttonSecondaySelectedText // default selected kind
-buttonSecondaySelectedFill // default selected kind
+buttonSecondarySelectedText // default selected kind
+buttonSecondarySelectedFill // default selected kind
 buttonTertiarySelectedText
 buttonTertiarySelectedFill
 buttonMinimalSelectedText

documentation-site/pages/blog/getting-started-with-base-web/index.mdx

@@ -148,7 +148,7 @@ Our app looks almost there but the layout for those options doesn't look right.
 </Block>
 ```
 
-Alternatively, you can use the [useStyletron](/components/use-styletron/) hook to achive the same result:
+Alternatively, you can use the [useStyletron](/components/use-styletron/) hook to achieve the same result:
 
 ```js
 const [css, theme] = useStyletron();

documentation-site/pages/blog/visual-regression-testing/index.mdx

@@ -288,7 +288,7 @@ The added size to each screenshot is fairly limited. The white/black areas can b
 
 ### Flakiness
 
-Snapshot tests should be deterministic. That is, they should yield the same result if run in the same environment with the same inputs. Yet even after nailing down a consistent environment, there can be variations in the UI that lead to flakey test results. When your test runs take 5-10 minutes, you don't want to have flakey tests be the reason your tests did not pass.
+Snapshot tests should be deterministic. That is, they should yield the same result if run in the same environment with the same inputs. Yet even after nailing down a consistent environment, there can be variations in the UI that lead to flaky test results. When your test runs take 5-10 minutes, you don't want to have flaky tests be the reason your tests did not pass.
 
 Here are the two main things that produced flakiness in our snapshots:
 
@@ -316,7 +316,7 @@ When testing components that require interactions, you often need to wait for th
 await page.waitFor(250); // waits for 250ms before proceeding
 ```
 
-This should be a last resort as it will almost certainly flake at some point. When it does someone will probably just increase the wait duration- so over time these paddings accumulate. Thes can add up to make your test run unbearably slow. The preferable approach is to wait for assertions on the page to pass. Take this example from one of our interaction snapshots:
+This should be a last resort as it will almost certainly flake at some point. When it does someone will probably just increase the wait duration- so over time these paddings accumulate. These can add up to make your test run unbearably slow. The preferable approach is to wait for assertions on the page to pass. Take this example from one of our interaction snapshots:
 
 ```js
 const config = {
@@ -383,7 +383,7 @@ Base Web is used by hundreds of internal projects at Uber. When we make a change
 
 ### A New Service
 
-Moving images out of Git, speeding up test runs, investing in cross-browser testing, allowing other projects to use our tools... all of these goals point towards a more generalized service for visual snapshot testing. Essentially we want the benefits of one of the paid visual testing services, but scaleable for hundreds of projects and with the option of privacy for internal projects.
+Moving images out of Git, speeding up test runs, investing in cross-browser testing, allowing other projects to use our tools... all of these goals point towards a more generalized service for visual snapshot testing. Essentially we want the benefits of one of the paid visual testing services, but scalable for hundreds of projects and with the option of privacy for internal projects.
 
 This is likely the next step for our visual testing solution: Taking all of the logic spread out across GitHub, CI, Docker, and duck-tape utility scripts and making that easily runnable or accessible for other projects. By getting more projects onboard we also make the investment in new and improved features more valuable to the company. Ideally, the solutions we create can also be leveraged by the community, so stay tuned if you are interested in this space!
 

documentation-site/pages/blog/visual-regression-testing/metadata.json

@@ -15,6 +15,6 @@
     "Regression Testing",
     "Snapshot Testing",
     "Visual Regression Testing",
-    "Visual Snapshot Tetsing"
+    "Visual Snapshot Testing"
   ]
 }

documentation-site/pages/blog/vs-code-extension/index.mdx

@@ -105,7 +105,7 @@ There is also a command for each Base Web component to open the documentation si
 
 <BlogImage
   src={commands}
-  alt="Command pallete to quickly open Base Web documentation"
+  alt="Command palette to quickly open Base Web documentation"
   caption="Quickly open Base Web documentation"
   full
 />

documentation-site/pages/components/app-nav-bar.mdx

@@ -25,7 +25,7 @@ export default Layout;
 
 # Application navigation bar
 
-The navigation bar standartizes and creates a shared navigation experience across the applications and products.
+The navigation bar standardizes and creates a shared navigation experience across the applications and products.
 It enables users to orient and navigate different sections of applications reliably.
 
 ## Examples

documentation-site/pages/components/avatar.mdx

@@ -13,7 +13,7 @@ import SEO from '../../components/meta-seo';
 import Sizes from 'examples/avatar/sizes.js';
 import Error from 'examples/avatar/error.js';
 import Override from 'examples/avatar/override.js';
-import Initals from 'examples/avatar/initals.js';
+import Initials from 'examples/avatar/initials.js';
 
 import {Avatar} from 'baseui/avatar';
 import * as AvatarExports from 'baseui/avatar';
@@ -56,8 +56,8 @@ The Avatar component adds additional visual information about a user.
   <Error />
 </Example>
 
-<Example title="Avatar with initals" path="avatar/initals.js">
-  <Initals />
+<Example title="Avatar with initials" path="avatar/initials.js">
+  <Initials />
 </Example>
 
 <Example title="Avatar with example overrides" path="avatar/override.js">

documentation-site/pages/components/heading.mdx

@@ -35,7 +35,7 @@ It is also possible to **decouple styles from the underlying `h1`-`h6` DOM eleme
   <Basic />
 </Example>
 
-Ideally, the user will use the default styles but sometimes it might make sense to set a fixed style no matter in what context the component was placed. You can decouple styles from levels through the `styleLevel` prop. However, **the proper `h1, h2 ... h6` hiearchy always stays in place**.
+Ideally, the user will use the default styles but sometimes it might make sense to set a fixed style no matter in what context the component was placed. You can decouple styles from levels through the `styleLevel` prop. However, **the proper `h1, h2 ... h6` hierarchy always stays in place**.
 
 <Example
   title="Decouple and fix heading styles"

documentation-site/pages/components/layer.mdx

@@ -79,7 +79,7 @@ or thousands as its value. In fact, you can build your application in a way that
 level stacking contexts have the `z-index` value set to no more than `1` so the value you'd need
 to pass to the `LayersManager` will be `zIndex={1}` or `zIndex={2}`. If your application
 is build in a less structured way you'd need to pass a `zIndex` value that is equal or
-greated than the highest `z-index` value of all top level stacking contexts in your application
+greater than the highest `z-index` value of all top level stacking contexts in your application
 (**note it may be not the highest `z-index` value across your application**).
 
 <Example title="Layers with z-index" path="layer/layer-z-index.js">

documentation-site/pages/components/layout-grid.mdx

@@ -74,7 +74,7 @@ If the number passed to `span` exceeds the current number of grid columns (based
 
 In the example above, each cell has a span of 2. This causes the excess cells to wrap on our small breakpoint. Cells that wrap to a new line will still align content to the columns of the grid.
 
-Sometimes this wrapping behavior is desireable, but sometimes you want to adapt to different breakpoints by setting spans specific to each breakpoint. The layout grid handles this by exposing "responsive" props.
+Sometimes this wrapping behavior is desirable, but sometimes you want to adapt to different breakpoints by setting spans specific to each breakpoint. The layout grid handles this by exposing "responsive" props.
 
 <Example title="Responsive" path="layout-grid/responsive.js">
   <ResponsiveExample />
@@ -138,7 +138,7 @@ To appreciate this example you may need to open it in StackBlitz. The "behavior"
 
 The grid can have one of two possible behaviors: `fixed` or `fluid`. By default the grid is `fixed`- that is, once it reaches its maximum width, it will stay centered in the containing element.
 
-A fluid grid essentially ignores any maximum width. The grid will continue to expand to fill the containing element's width ad inifinitum. Note, both fluid and fixed grids still have a margin on both sides.
+A fluid grid essentially ignores any maximum width. The grid will continue to expand to fill the containing element's width ad infinitum. Note, both fluid and fixed grids still have a margin on both sides.
 
 The `behavior` prop is not responsive. This is because, below the maximum width, both `fluid` and `fixed` grids are identical.
 

documentation-site/pages/components/table-grid.mdx

@@ -49,7 +49,7 @@ with [flex-box](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Bo
 
 ## Accessibility
 
-Tables should be navigatable by keyboard. The example below includes a useful react hook to apply arrow
+Tables should be navigable by keyboard. The example below includes a useful react hook to apply arrow
 event handlers to cells.
 
 <Example

documentation-site/pages/components/tabs-motion.mdx

@@ -139,7 +139,7 @@ If you don't need to control the component yourself you can use the stateful ver
 
 The animated highlight that slides to the active tab is absolutely positioned and sized. When the active tab changes, the layout of the highlight is recalculated. This means any change in the active tab's position or size, not caused by an active tab change, could lead to the highlight having an outdated layout.
 
-To get around this potential issue we use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), which watches each tab for sizing updates and does a highlight re-layout as needed. The `ResizeObserver` has full support accross modern browsers but doesn't exist in any version of Internet Explorer. If you need this behavior in IE, We suggest using a polyfill for the `ResizeObserver` such as [this one](https://github.com/juggle/resize-observer). We do not include the polyfill by default to avoid adding a few KB to the bundle size of the Tabs component.
+To get around this potential issue we use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), which watches each tab for sizing updates and does a highlight re-layout as needed. The `ResizeObserver` has full support across modern browsers but doesn't exist in any version of Internet Explorer. If you need this behavior in IE, we suggest using a polyfill for the `ResizeObserver` such as [this one](https://github.com/juggle/resize-observer). We do not include the polyfill by default to avoid adding a few KB to the bundle size of the Tabs component.
 
 ## API
 

documentation-site/pages/components/tabs.mdx

@@ -38,7 +38,7 @@ export default Layout;
 
 <Yard placeholderHeight={102} {...tabsYardConfig} />
 
-The Tabs component is used for navigating frequently accesssed, but distinct categories.
+The Tabs component is used for navigating frequently accessed, but distinct categories.
 
 ## Accessibility
 

documentation-site/pages/components/unstable-data-table.mdx

@@ -29,7 +29,7 @@ export default Layout;
 <UnstableWarning />
 
 Displays tabular data for analysis. The component accepts strict column definitions to consistently
-render the following data types: categorical (enum), number, boolean, string, and arbirary content.
+render the following data types: categorical (enum), number, boolean, string, and arbitrary content.
 To facilitate a rich set of analysis features out-of-the-box, DataTable does not allow for overrides.
 If your application relies on rendering a custom table element, you may want to look into Base Web's
 other table options: [Table](/components/table) (uses css-flex) or [TableGrid](/components/table-grid)

documentation-site/pages/discover-more/roadmap.mdx

@@ -57,7 +57,7 @@ We will keep this list updated to give you as much time to prepare as possible.
 
 ### `baseui/phone-input`
 
-- The design will be updated to split the dial code selector into a seperate control (`CountryPicker`). Available now as [`PhoneInputNext`](https://baseweb.design/components/phone-input/#updated-phone-input-design). In v11, `PhoneInputNext` will replace the current default implementation (`PhoneInput`).
+- The design will be updated to split the dial code selector into a separate control (`CountryPicker`). Available now as [`PhoneInputNext`](https://baseweb.design/components/phone-input/#updated-phone-input-design). In v11, `PhoneInputNext` will replace the current default implementation (`PhoneInput`).
 - The `CountrySelect` component will be removed in favor of `CountryPicker`.
 
 ### `baseui/spinner`

documentation-site/pages/guides/understanding-overrides.mdx

@@ -18,7 +18,7 @@ import DndListExample from 'examples/dnd-list/overrides_short.js';
 import DndListExampleStyle from 'examples/dnd-list/overrides_style.js';
 import DndListExampleStateProps from 'examples/dnd-list/overrides_state_props.js';
 import DndListExampleSubcomponent from 'examples/dnd-list/overrides_whole_subcomponent.js';
-import SelectTagExample from 'examples/select/overriden-tag.js';
+import SelectTagExample from 'examples/select/overridden-tag.js';
 
 export default Layout;
 
@@ -239,7 +239,7 @@ We can [reference the documentation for Tag](/components/tag/#overrides) to see
 
 We have identified a nested Base Web component that is accessible via overrides. Now we can apply some nested overrides to customize things:
 
-<Example path="select/overriden-tag.js">
+<Example path="select/overridden-tag.js">
   <SelectTagExample />
 </Example>
 

packages/baseui-codemods/src/v9-theme-scale.test.js

@@ -272,7 +272,7 @@ export default Foo;"
       );
     });
 
-    it('similarly named object assignements', async () => {
+    it('similarly named object assignments', async () => {
       const content = `const $theme = {typography: {font100: {}}};`;
       expect(await transform(content)).toMatchInlineSnapshot(
         `"const $theme = {typography: {font100: {}}};"`,

packages/baseweb-vscode-extension/ext-src/coloring.ts

@@ -197,7 +197,7 @@ export default (context: vscode.ExtensionContext) => {
       while ((match = regEx.exec(text))) {
         // @ts-ignore
         const themePropVal: any = theme[themeProps[i]][match[3]];
-        // Do not decorate if the found porp key is not present in the theme object
+        // Do not decorate if the found prop key is not present in the theme object
         if (!themePropVal) {
           continue;
         }