From 318a2f14a82d8a4daeef6daf638bda3c34e50492 Mon Sep 17 00:00:00 2001
From: Laura Silva <91160746+silvalaura@users.noreply.github.com>
Date: Wed, 12 Jul 2023 16:09:35 -0400
Subject: [PATCH] docs: Fix typos  (#1111)

---
 .changeset/docs-typos.md                                  | 5 +++++
 website/react-magma-docs/src/pages/design/alert.mdx       | 4 ++--
 website/react-magma-docs/src/pages/design/checkboxes.mdx  | 8 ++++----
 website/react-magma-docs/src/pages/design/combobox.mdx    | 2 +-
 .../react-magma-docs/src/pages/design/indeterminate.mdx   | 2 +-
 website/react-magma-docs/src/pages/design/input.mdx       | 2 +-
 .../react-magma-docs/src/pages/design/password-input.mdx  | 2 +-
 website/react-magma-docs/src/pages/design/tag.mdx         | 2 +-
 website/react-magma-docs/src/pages/design/toast.mdx       | 2 +-
 website/react-magma-docs/src/pages/design/toggle.mdx      | 2 +-
 10 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/docs-typos.md

diff --git a/.changeset/docs-typos.md b/.changeset/docs-typos.md
new file mode 100644
index 000000000..4c0e5544d
--- /dev/null
+++ b/.changeset/docs-typos.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+Update typos
\ No newline at end of file
diff --git a/website/react-magma-docs/src/pages/design/alert.mdx b/website/react-magma-docs/src/pages/design/alert.mdx
index a468e6e8b..6f5731278 100644
--- a/website/react-magma-docs/src/pages/design/alert.mdx
+++ b/website/react-magma-docs/src/pages/design/alert.mdx
@@ -80,7 +80,7 @@ Indicates that a system process completed successfully.
 
 ### Warning
 
-Indicates that something isn't quite right, but there wasn't an error.
+Indicates that something is not quite right, but there wasn't an error.
 
 <Alert variant="warning">Umm, something's not quite right here.</Alert>
 
@@ -106,7 +106,7 @@ Inline alerts are embedded within the content of a page. They can provide the us
   <img src="../../images/alerts/inline-alert-example.png" alt="" />
 </figure>
 
-If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissable by the user and persist until the issue is fixed either by the user or the system.
+If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissible by the user and persist until the issue is fixed either by the user or the system.
 
 <figure>
   <img src="../../images/alerts/inline-alert-example-2.png" alt="" />
diff --git a/website/react-magma-docs/src/pages/design/checkboxes.mdx b/website/react-magma-docs/src/pages/design/checkboxes.mdx
index 22550233e..5af1b975a 100644
--- a/website/react-magma-docs/src/pages/design/checkboxes.mdx
+++ b/website/react-magma-docs/src/pages/design/checkboxes.mdx
@@ -10,10 +10,10 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 <PageContent componentName="checkbox" type="design">
 
 <LeadParagraph>
-  A checkbox is an input control that allows a user to select one or more options from a number of choices.
+  A checkbox is an input control that allows a user to select one or more
+  options from a number of choices.
 </LeadParagraph>
 
-
 ## Usage
 
 Use checkboxes to:
@@ -91,7 +91,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>
-            Don't use multiple colors in the same UI. Pick one and stick with
+            Do not use multiple colors in the same UI. Pick one and stick with
             it.
           </p>
         </figcaption>
@@ -106,7 +106,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>
-            If you're going to change the color, don't use a neutral color. This
+            If you are going to change the color, don't use a neutral color. This
             could be confused with a checkbox that is checked and disabled.
           </p>
         </figcaption>
diff --git a/website/react-magma-docs/src/pages/design/combobox.mdx b/website/react-magma-docs/src/pages/design/combobox.mdx
index 46f363081..ac0ee3145 100644
--- a/website/react-magma-docs/src/pages/design/combobox.mdx
+++ b/website/react-magma-docs/src/pages/design/combobox.mdx
@@ -15,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a Select, but more of a text input with some suggestions.
+The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Do not think of it like a Select, but more of a text input with some suggestions.
 
 ![](../../images/inputs/combobox-example.png)
 
diff --git a/website/react-magma-docs/src/pages/design/indeterminate.mdx b/website/react-magma-docs/src/pages/design/indeterminate.mdx
index a68b17b5d..7d685b6ae 100644
--- a/website/react-magma-docs/src/pages/design/indeterminate.mdx
+++ b/website/react-magma-docs/src/pages/design/indeterminate.mdx
@@ -15,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-Use the indeterminate state when the checkbox contains a sublist of selections, some of which are selected, and some unselected.
+Use the indeterminate state when the checkbox contains a sub list of selections, some of which are selected, and some unselected.
 
 View the <Link to="/design/checkboxes/">documentation for checkboxes</Link> for more details.
 
diff --git a/website/react-magma-docs/src/pages/design/input.mdx b/website/react-magma-docs/src/pages/design/input.mdx
index 530034331..4b3ff09e8 100644
--- a/website/react-magma-docs/src/pages/design/input.mdx
+++ b/website/react-magma-docs/src/pages/design/input.mdx
@@ -71,7 +71,7 @@ View <Link to="/api/textarea/">component API</Link> for text areas.
 
 ### Password
 
-Use this input when you want keep the user's password masked for security.
+Use this input when you want to keep the user's password masked for security.
 
 View the <Link to="/design/password-input/">password input documentation</Link> for more detail.
 
diff --git a/website/react-magma-docs/src/pages/design/password-input.mdx b/website/react-magma-docs/src/pages/design/password-input.mdx
index f95b7c33e..f54222747 100644
--- a/website/react-magma-docs/src/pages/design/password-input.mdx
+++ b/website/react-magma-docs/src/pages/design/password-input.mdx
@@ -10,7 +10,7 @@ import { Link } from 'gatsby';
 <PageContent componentName="password_input" type="design">
 
 <LeadParagraph>
-  Use the password input when you want keep the user's password masked for security.
+  Use the password input when you want to keep the user's password masked for security.
 </LeadParagraph>
 
 <figure>
diff --git a/website/react-magma-docs/src/pages/design/tag.mdx b/website/react-magma-docs/src/pages/design/tag.mdx
index 18f89c23e..c8bba9742 100644
--- a/website/react-magma-docs/src/pages/design/tag.mdx
+++ b/website/react-magma-docs/src/pages/design/tag.mdx
@@ -96,7 +96,7 @@ A leading icon may be added to the tag. This can help clarify the meaning of a t
 
 ---
 
-## Dismissable Tags
+## Dismissible Tags
 
 Tags can include a close button on the right side. Using this close button completely removes it from the UI. This can be especially useful for something like search filters. In this scenario, a tag could be used when applying a filter to a list of search results, and then dismissing the tag removes the filter.
 
diff --git a/website/react-magma-docs/src/pages/design/toast.mdx b/website/react-magma-docs/src/pages/design/toast.mdx
index ad00f0f04..1a72d558b 100644
--- a/website/react-magma-docs/src/pages/design/toast.mdx
+++ b/website/react-magma-docs/src/pages/design/toast.mdx
@@ -83,7 +83,7 @@ Avoid displaying errors or warnings with toasts, but if you have to, then these
           <p class="title title-correct">Correct</p>
           <p>
             Toasts displaying error messages or warnings should only be manually
-            dismissable.
+            dismissible.
           </p>
         </figcaption>
       </figure>
diff --git a/website/react-magma-docs/src/pages/design/toggle.mdx b/website/react-magma-docs/src/pages/design/toggle.mdx
index 0e9e91c54..804803e5c 100644
--- a/website/react-magma-docs/src/pages/design/toggle.mdx
+++ b/website/react-magma-docs/src/pages/design/toggle.mdx
@@ -13,7 +13,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-Toggle switches are a great way to adjust settings when you're simply turning something on and off. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
+Toggle switches are a great way to adjust settings when you are simply turning something on and off. The option that the switch controls, as well as the state it is in, should be made clear from the corresponding inline label.
 
 <figure>
   <div class="image-container">