Add explanation of asterisk for required fields to example forms and documentation

apps/docs/content/components/FormControl.mdx

@@ -9,7 +9,7 @@ description: Use the form control component to display form inputs alongside lab
 import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import {PropTableValues} from '../../src/components'
 import {Label} from '@primer/react'
-import {Heading} from '@primer/react-brand'
+import {Heading, Text} from '@primer/react-brand'
 import {SearchIcon} from '@primer/octicons-react'
 import {Link} from 'gatsby'
 
@@ -83,6 +83,9 @@ An example of a typical layout composed using `FormControl`:
       paddingBottom: 3,
     }}
   >
+    <Text as="p" variant="muted" size="100">
+      All fields marked with an asterisk (*) are required
+    </Text>
     <Container
       sx={{
         display: 'grid',
@@ -229,45 +232,24 @@ Try changing the input value to to `monalisa` to show the `success` state.
 
 ```javascript live noinline
 const App = () => {
-  const [value, setValue] = React.useState()
-  const [validationState, setValidationState] = React.useState()
-
-  React.useEffect(() => {
-    const defaultHandle = 'mona lisa'
-    setValue(defaultHandle)
-    validate(defaultHandle)
-  }, [])
-
-  const validate = (inputValue) => {
-    if (/\s/g.test(inputValue)) {
-      setValidationState('error')
-    } else {
-      setValidationState('success')
-    }
-  }
+  const [value, setValue] = React.useState('mona lisa')
 
   const handleChange = (event) => {
-    event.preventDefault()
-    if (!event.target.value) {
-      setValue(undefined)
-      setValidationState(undefined)
-      return
-    }
     setValue(event.target.value)
-    validate(event.target.value)
   }
 
+  const isInvalid = /\s/g.test(value)
+
   return (
-    <FormControl validationStatus={validationState}>
+    <FormControl validationStatus={isInvalid ? 'error' : 'success'}>
       <FormControl.Label>GitHub handle</FormControl.Label>
       <TextInput onChange={handleChange} value={value} fullWidth />
-      {validationState && validationState === 'error' && (
+      {isInvalid ? (
         <FormControl.Validation>
           GitHub handles cannot contain spaces.{' '}
           {value && `Did you mean "${value.replaceAll(' ', '')}"`}
         </FormControl.Validation>
-      )}
-      {validationState && validationState === 'success' && (
+      ) : (
         <FormControl.Validation>Valid name</FormControl.Validation>
       )}
     </FormControl>
@@ -328,6 +310,8 @@ Pass the `fullWidth` prop to `FormControl` to provide additional behavior and st
 
 Pass the `required` prop to `FormControl` to provide additional behavior and state context to all `children`, rather than the input only.
 
+When marking a field as required, it is recommended to also provide a corresponding message at the start of the form informing the user that "_all fields marked with an asterisk (\*) are required_".
+
 ```jsx live
 <FormControl required>
   <FormControl.Label>Name</FormControl.Label>

packages/react/src/forms/TextInput/TextInput.module.css

@@ -83,9 +83,14 @@
 }
 
 .TextInput-wrapper--fullWidth {
+  width: 100%;
   display: flex;
 }
 
+.TextInput-wrapper:not(.TextInput-wrapper--fullWidth) {
+  width: min-content;
+}
+
 .TextInput-wrapper--monospace {
   font-family: var(--brand-fontStack-monospace);
 }

packages/react/src/forms/form.stories.tsx

@@ -50,6 +50,9 @@ export const GitHubEnterprise = args => {
             marginBottom: 32,
           }}
         >
+          <Text as="p" variant="muted" size="100">
+            All fields marked with an asterisk (*) are required
+          </Text>
           <div
             style={{
               display: 'flex',