From 5b630cc0dd4e29a807fe24e15465d027eb63eff3 Mon Sep 17 00:00:00 2001
From: Laura Silva <91160746+silvalaura@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:03:51 -0500
Subject: [PATCH] docs(Select/NativeSelect): Update AdditionalContent
 CodeSandbox examples (#1170)

---
 .changeset/fix-additionalContentDocs.md       |  5 ++
 .../FormFieldContainer/FormFieldContainer.tsx |  2 +-
 .../src/pages/api/native-select.mdx           | 53 ++++++++++++++-----
 .../react-magma-docs/src/pages/api/select.mdx | 16 +++---
 4 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/fix-additionalContentDocs.md

diff --git a/.changeset/fix-additionalContentDocs.md b/.changeset/fix-additionalContentDocs.md
new file mode 100644
index 000000000..ad9648eef
--- /dev/null
+++ b/.changeset/fix-additionalContentDocs.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Select/NativeSelect): Update AdditionalContent CodeSandbox examples
diff --git a/packages/react-magma-dom/src/components/FormFieldContainer/FormFieldContainer.tsx b/packages/react-magma-dom/src/components/FormFieldContainer/FormFieldContainer.tsx
index 855ac94bf..6c5f5da0f 100644
--- a/packages/react-magma-dom/src/components/FormFieldContainer/FormFieldContainer.tsx
+++ b/packages/react-magma-dom/src/components/FormFieldContainer/FormFieldContainer.tsx
@@ -30,7 +30,7 @@ export interface FormFieldContainerBaseProps {
    */
   errorMessage?: React.ReactNode;
   /**
-   * ID of the form field.  Also used in the descrption ID.
+   * ID of the form field.  Also used in the description ID.
    */
   fieldId: string;
   /** 
diff --git a/website/react-magma-docs/src/pages/api/native-select.mdx b/website/react-magma-docs/src/pages/api/native-select.mdx
index ff2b4dae4..94fd82f45 100644
--- a/website/react-magma-docs/src/pages/api/native-select.mdx
+++ b/website/react-magma-docs/src/pages/api/native-select.mdx
@@ -22,7 +22,7 @@ import { NativeSelect } from 'react-magma-dom';
 
 export function Example() {
   return (
-    <NativeSelect labelText="Select this">
+    <NativeSelect labelText="Select this" fieldId="example-basic">
       <option>Red</option>
       <option>Green</option>
       <option>Blue</option>
@@ -47,7 +47,11 @@ export function Example() {
         <strong>Changed Value: </strong>{' '}
         <span id="changedValue">{message}</span>
       </p>
-      <NativeSelect labelText="Test value" onChange={handleChange}>
+      <NativeSelect
+        labelText="Test value"
+        onChange={handleChange}
+        fieldId="example-uncontrolled"
+      >
         <option>Choose Color</option>
         <option value="Red">Red</option>
         <option value="Green">Green</option>
@@ -65,7 +69,11 @@ import React from 'react';
 import { NativeSelect } from 'react-magma-dom';
 export function Example() {
   return (
-    <NativeSelect labelText="Test value" value="Green">
+    <NativeSelect
+      labelText="Test value"
+      value="Green"
+      fieldId="example-controlled"
+    >
       <option>Choose Color</option>
       <option value="Red">Red</option>
       <option value="Green">Green</option>
@@ -83,7 +91,7 @@ import { NativeSelect } from 'react-magma-dom';
 
 export function Example() {
   return (
-    <NativeSelect labelText="Select this" disabled>
+    <NativeSelect labelText="Select this" disabled fieldId="example-disabled">
       <option>Red</option>
       <option>Green</option>
       <option>Blue</option>
@@ -100,7 +108,11 @@ import { NativeSelect } from 'react-magma-dom';
 
 export function Example() {
   return (
-    <NativeSelect labelText="Select this" errorMessage="This is an error">
+    <NativeSelect
+      labelText="Select this"
+      errorMessage="This is an error"
+      fieldId="example-error"
+    >
       <option>Red</option>
       <option>Green</option>
       <option>Blue</option>
@@ -120,6 +132,7 @@ export function Example() {
     <NativeSelect
       labelText="Select this"
       helperMessage="Helper message appears here"
+      fieldId="example-helper"
     >
       <option>Red</option>
       <option>Green</option>
@@ -139,12 +152,16 @@ When `labelPosition` is set to `left`, the label, native select, and child eleme
 
 ```tsx
 import React from 'react';
-import { NativeSelect } from './';
-import { LabelPosition } from '../Label';
-import { Tooltip } from '../Tooltip';
-import { IconButton } from '../IconButton';
+import {
+  NativeSelect,
+  LabelPosition,
+  Tooltip,
+  IconButton,
+  ButtonSize,
+  ButtonType,
+  ButtonVariant,
+} from 'react-magma-dom';
 import { HelpIcon } from 'react-magma-icons';
-import { ButtonSize, ButtonType, ButtonVariant } from '../Button';
 
 export function Example() {
   const helpLinkLabel = 'Learn more';
@@ -156,6 +173,7 @@ export function Example() {
     <>
       <NativeSelect
         labelText="Default positioning"
+        fieldId="example-additionalContent"
         additionalContent={
           <Tooltip content={helpLinkLabel}>
             <IconButton
@@ -212,7 +230,11 @@ export function Example() {
   return (
     <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
       <CardBody>
-        <NativeSelect labelText="Select this" isInverse>
+        <NativeSelect
+          labelText="Select this"
+          isInverse
+          fieldId="example-inverse"
+        >
           <option>Red</option>
           <option>Green</option>
           <option>Blue</option>
@@ -233,7 +255,12 @@ export function Example() {
   return (
     <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
       <CardBody>
-        <NativeSelect labelText="Select this" isInverse disabled>
+        <NativeSelect
+          labelText="Select this"
+          isInverse
+          disabled
+          fieldId="example-inverseDisabled"
+        >
           <option>Red</option>
           <option>Green</option>
           <option>Blue</option>
@@ -258,6 +285,7 @@ export function Example() {
           labelText="Select this"
           isInverse
           errorMessage="This is an error"
+          fieldId="example-inverseError"
         >
           <option>Red</option>
           <option>Green</option>
@@ -283,6 +311,7 @@ export function Example() {
           labelText="Select this"
           isInverse
           helperMessage="Helper message appears here"
+          fieldId="example-inverseHelper"
         >
           <option>Red</option>
           <option>Green</option>
diff --git a/website/react-magma-docs/src/pages/api/select.mdx b/website/react-magma-docs/src/pages/api/select.mdx
index ef3962c9c..ced8eab7e 100644
--- a/website/react-magma-docs/src/pages/api/select.mdx
+++ b/website/react-magma-docs/src/pages/api/select.mdx
@@ -361,16 +361,20 @@ By default, the child element will display inline with a `Select` label on the r
 
 When `labelPosition` is set to `left`, the label, select, and child elements all display inline.
 
-If no label is required, use `visuallyHidden` and the same inline layout will persist.
+If no label is required, use `isLabelVisuallyHidden` and the same inline layout will persist.
 
 ```tsx
 import React from 'react';
-import { Select } from './';
-import { LabelPosition } from '../Label';
-import { Tooltip } from '../Tooltip';
-import { IconButton } from '../IconButton';
+import {
+  Select,
+  LabelPosition,
+  Tooltip,
+  IconButton,
+  ButtonSize,
+  ButtonType,
+  ButtonVariant,
+} from 'react-magma-dom';
 import { HelpIcon } from 'react-magma-icons';
-import { ButtonSize, ButtonType, ButtonVariant } from '../Button';
 
 export function Example() {
   const helpLinkLabel = 'Learn more';