From f97c6ec3f478e18419ebc167ec8d73222bf142e1 Mon Sep 17 00:00:00 2001 From: toyeshhm Date: Thu, 17 Sep 2026 10:13:00 -0500 Subject: [PATCH] docs: fix DURATION.infinite reference and typos in docs - snackbar: DURATION.inifinite -> DURATION.infinite (matches the exported constant) - seo guide: "should we wrapped" -> "should be wrapped" - remove doubled words ("from from", "to to") - fix spelling: below, greatly, components, necessary, positioned, every time, Location, palette, similarly, wherever, situations, each other --- documentation-site/pages/blog/drag-and-drop-list/index.mdx | 2 +- .../pages/blog/nested-overrides-playground/index.mdx | 6 +++--- documentation-site/pages/components/combobox.mdx | 2 +- documentation-site/pages/components/fixed-marker.mdx | 4 ++-- documentation-site/pages/components/location-puck.mdx | 2 +- documentation-site/pages/components/message-card.mdx | 2 +- documentation-site/pages/components/snackbar.mdx | 2 +- documentation-site/pages/components/switch.mdx | 2 +- documentation-site/pages/guides/seo.mdx | 2 +- documentation-site/pages/guides/styling.mdx | 2 +- documentation-site/pages/guides/tables.mdx | 2 +- documentation-site/pages/guides/theming.mdx | 2 +- 12 files changed, 15 insertions(+), 15 deletions(-) diff --git a/documentation-site/pages/blog/drag-and-drop-list/index.mdx b/documentation-site/pages/blog/drag-and-drop-list/index.mdx index 938a0fec0b..9ebd3134ef 100644 --- a/documentation-site/pages/blog/drag-and-drop-list/index.mdx +++ b/documentation-site/pages/blog/drag-and-drop-list/index.mdx @@ -214,7 +214,7 @@ On the other hand, we use transition: 0.3s cubic-bezier(0.2, 1, 0.1, 1); ``` -bellow to make the item fly back which gives user a nice additional feedback: +below to make the item fly back which gives user a nice additional feedback: @@ -64,7 +64,7 @@ Once you open the `Style Overrides` tab, you see the list of all available overr ## Nested Overrides -Most of our compontents represent basic UI pieces: buttons, links, inputs or tags. However, some are more complex like [Date Picker](/components/datepicker) or [Select](/components/select). They provide a rich functionality and compose other existing Base Web components. We say that they have nested components. For example, Select nests these components: +Most of our components represent basic UI pieces: buttons, links, inputs or tags. However, some are more complex like [Date Picker](/components/datepicker) or [Select](/components/select). They provide a rich functionality and compose other existing Base Web components. We say that they have nested components. For example, Select nests these components: - Icon - Spinner @@ -89,7 +89,7 @@ So what if you want to customize Tag's color and corners as a part of the multiv While this recursive structure should be logical if you fully understand the concept of overrides, it might be a head scratcher at the beginning. We also did not provide a good individualized documentation for each instance when nested overrides are needed. -This changes today! Our interactive playground now fully supports nested overrides and gets recursive when neccessary. This is a simplified playground for the Select component demonstrating the nested Tag style override: +This changes today! Our interactive playground now fully supports nested overrides and gets recursive when necessary. This is a simplified playground for the Select component demonstrating the nested Tag style override: diff --git a/documentation-site/pages/components/combobox.mdx b/documentation-site/pages/components/combobox.mdx index d9bc7eb79d..2723e3ff8d 100644 --- a/documentation-site/pages/components/combobox.mdx +++ b/documentation-site/pages/components/combobox.mdx @@ -32,7 +32,7 @@ text. Use this example as a reference if the options are known to the applicatio -Applications will often need to fetch suggestions from from a remote API. The example below shows how to make +Applications will often need to fetch suggestions from a remote API. The example below shows how to make asynchronous requests on input change to populate the listbox. diff --git a/documentation-site/pages/components/fixed-marker.mdx b/documentation-site/pages/components/fixed-marker.mdx index 0daf75afbc..ccab11b47b 100644 --- a/documentation-site/pages/components/fixed-marker.mdx +++ b/documentation-site/pages/components/fixed-marker.mdx @@ -49,7 +49,7 @@ For more information on the design principles behind the Base map markers, pleas - The `small` can only have an icon as a content. - The `mediumText` can have a text content. It adds padding to the sides. - The `mediumIcon` can have an icon as a content. Displayed as a circle. -- A fixed marker can have a label enhancer that can be poistioned at the `top`, `bottom`, `left`, `right` of the marker. +- A fixed marker can have a label enhancer that can be positioned at the `top`, `bottom`, `left`, `right` of the marker. ### Start/End Enhancer sizing @@ -135,7 +135,7 @@ A fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/r -A draggable fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. Everytime the marker is dragged, the `dragging` prop is updated and the marker position is updated. +A draggable fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. Every time the marker is dragged, the `dragging` prop is updated and the marker position is updated. diff --git a/documentation-site/pages/components/message-card.mdx b/documentation-site/pages/components/message-card.mdx index 67f25bcbc4..50965bd643 100644 --- a/documentation-site/pages/components/message-card.mdx +++ b/documentation-site/pages/components/message-card.mdx @@ -56,7 +56,7 @@ Unlike UI components that “flip” in dark mode, cards with rich illustrations -When using a color outside of the Base Web primitive color pallete, use the `backgroundColorType` prop to indicate whether the color is light or dark. MessageCard will determine the appropriate font color accordingly. +When using a color outside of the Base Web primitive color palette, use the `backgroundColorType` prop to indicate whether the color is light or dark. MessageCard will determine the appropriate font color accordingly. diff --git a/documentation-site/pages/components/snackbar.mdx b/documentation-site/pages/components/snackbar.mdx index 23f3718391..0fe927773d 100644 --- a/documentation-site/pages/components/snackbar.mdx +++ b/documentation-site/pages/components/snackbar.mdx @@ -36,7 +36,7 @@ before exiting. By default, it will choose the shortest duration. In some circumstances, you will want to not auto-hide the snackbar and wait until a task -completes. The example below shows `DURATION.inifinite` usage, how to manually dequeue a +completes. The example below shows `DURATION.infinite` usage, how to manually dequeue a snackbar, as well as demonstrates the `progress` flag that will render a spinner element. diff --git a/documentation-site/pages/components/switch.mdx b/documentation-site/pages/components/switch.mdx index aa3f70089d..dbd089989d 100644 --- a/documentation-site/pages/components/switch.mdx +++ b/documentation-site/pages/components/switch.mdx @@ -23,7 +23,7 @@ export default Layout; -Switches are used to allow users to to toggle an option on/off. +Switches are used to allow users to toggle an option on/off. Switch is used as a toggle to allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Switches are often used in product settings or as filter diff --git a/documentation-site/pages/guides/seo.mdx b/documentation-site/pages/guides/seo.mdx index 0503cf9aa6..8bcbfe5f78 100644 --- a/documentation-site/pages/guides/seo.mdx +++ b/documentation-site/pages/guides/seo.mdx @@ -106,7 +106,7 @@ export default () => ( ## Modal -Similarily to the Card component, text in the Modal should we wrapped in paragraphs too: +Similarly to the Card component, text in the Modal should be wrapped in paragraphs too: ```js import * as React from "react"; diff --git a/documentation-site/pages/guides/styling.mdx b/documentation-site/pages/guides/styling.mdx index cbfa7ed41d..03805395b6 100644 --- a/documentation-site/pages/guides/styling.mdx +++ b/documentation-site/pages/guides/styling.mdx @@ -13,7 +13,7 @@ Here is a summary of our recommendations for styling your project: - Start with [`useStyletron`](/components/use-styletron/). Apply styling directly to elements until you find a need to extract a styling pattern into a component. At this point use [`styled`](/components/styled/) to create a [styled component](https://www.styletron.org/react#styled-components) which can be reused, configured or extended. - When extending a styled component, prefer [`withStyle`](https://www.styletron.org/api-reference#withstyle) over [`$style`](https://www.styletron.org/react#style-prop) to create maintainable variations of your base component. -- When styling parts of your application, try to use values from your theme object whereever possible. The current theme is always made available in the various styling utilities exported from Base Web. +- When styling parts of your application, try to use values from your theme object wherever possible. The current theme is always made available in the various styling utilities exported from Base Web. - When customizing the look of Base Web components, first see if you can configure the theme object to achieve your desired look. If that doesn’t work, check if the component is a styled component. If it is, you can use `withStyle` to extend it. If it is not a styled component you will likely need to use the [overrides pattern](/guides/understanding-overrides/) to pass new styles through or even swap in your own component. - Remember that Base Web components are built with [Styletron](https://www.styletron.org/) styled components. These are all exported from their relevant modules and made targetable with overrides. diff --git a/documentation-site/pages/guides/tables.mdx b/documentation-site/pages/guides/tables.mdx index 36fda6a8f5..c22b0fe893 100644 --- a/documentation-site/pages/guides/tables.mdx +++ b/documentation-site/pages/guides/tables.mdx @@ -34,7 +34,7 @@ Think of this as something closer to Excel rather than a standard table. Base Web publishes two additional tables that are not quite as useful as the above, but may be appropriate -in niche situtaions. +in niche situations. First is the [`table-grid`](/components/table-grid). This table utilizes `css-grid` for layout which some developers prefer over the semantic table element. It will require a custom diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx index c455e50ec0..1c18a8eb67 100644 --- a/documentation-site/pages/guides/theming.mdx +++ b/documentation-site/pages/guides/theming.mdx @@ -186,7 +186,7 @@ const overrides = { const theme = createTheme(overrides); ``` -In this example, we first reassign our theme's accent color to a shade of magenta. Then we re-map the link colors to use our hot magenta accent color rather than the default colors. See the section on customizing colors for more information about how the various layers of color tokens map onto eachother. +In this example, we first reassign our theme's accent color to a shade of magenta. Then we re-map the link colors to use our hot magenta accent color rather than the default colors. See the section on customizing colors for more information about how the various layers of color tokens map onto each other. Next we replace some of the default icons with custom icons. And lastly, we override the `DisplayLarge` typography level to use the `Georgia` font family without affecting the font size, weight, or line height properties (or any of the other typography levels).