[docs][base] Move styles to the bottom of demos code for FormControl (

#36579) Co-authored-by: seunexplicit <[email protected]>
mui · Apr 3, 2023 · 1f23d4c · 1f23d4c
1 parent 73e9ba1
commit 1f23d4c
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 136 deletions.
diff --git a/docs/data/base/components/form-control/BasicFormControl.js b/docs/data/base/components/form-control/BasicFormControl.js
@@ -6,25 +6,15 @@ import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 import clsx from 'clsx';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function BasicFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <Label>Name</Label>
+      <Input />
+      <HelperText />
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -109,12 +99,22 @@ const HelperText = styled((props) => {
   font-size: 0.875rem;
 `;
 
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <Label>Name</Label>
-      <Input />
-      <HelperText />
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/BasicFormControl.tsx b/docs/data/base/components/form-control/BasicFormControl.tsx
@@ -6,25 +6,15 @@ import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 import clsx from 'clsx';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function BasicFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <Label>Name</Label>
+      <Input />
+      <HelperText />
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -111,12 +101,22 @@ const HelperText = styled((props: {}) => {
   font-size: 0.875rem;
 `;
 
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <Label>Name</Label>
-      <Input />
-      <HelperText />
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -3,25 +3,18 @@ import FormControlUnstyled from '@mui/base/FormControlUnstyled';
 import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function FormControlFunctionChild() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      {({ filled, focused }) => (
+        <React.Fragment>
+          <Input className={filled ? 'filled' : ''} />
+          {filled && !focused && <OkMark>✔</OkMark>}
+        </React.Fragment>
+      )}
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -63,15 +56,22 @@ const OkMark = styled('span')`
   color: rgba(125, 200, 0, 1);
 `;
 
-export default function FormControlFunctionChild() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      {({ filled, focused }) => (
-        <React.Fragment>
-          <Input className={filled ? 'filled' : ''} />
-          {filled && !focused && <OkMark>✔</OkMark>}
-        </React.Fragment>
-      )}
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -5,25 +5,18 @@ import FormControlUnstyled, {
 import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function FormControlFunctionChild() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      {({ filled, focused }: FormControlUnstyledState) => (
+        <React.Fragment>
+          <Input className={filled ? 'filled' : ''} />
+          {filled && !focused && <OkMark>✔</OkMark>}
+        </React.Fragment>
+      )}
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -65,15 +58,22 @@ const OkMark = styled('span')`
   color: rgba(125, 200, 0, 1);
 `;
 
-export default function FormControlFunctionChild() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      {({ filled, focused }: FormControlUnstyledState) => (
-        <React.Fragment>
-          <Input className={filled ? 'filled' : ''} />
-          {filled && !focused && <OkMark>✔</OkMark>}
-        </React.Fragment>
-      )}
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/UseFormControl.js b/docs/data/base/components/form-control/UseFormControl.js
@@ -3,6 +3,15 @@ import FormControlUnstyled, {
   useFormControlUnstyledContext,
 } from '@mui/base/FormControlUnstyled';
 
+export default function UseFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <CustomInput />
+      <ControlStateDisplay />
+    </FormControlUnstyled>
+  );
+}
+
 function CustomInput() {
   const formControlContext = useFormControlUnstyledContext();
 
@@ -40,12 +49,3 @@ function ControlStateDisplay() {
     </p>
   );
 }
-
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <CustomInput />
-      <ControlStateDisplay />
-    </FormControlUnstyled>
-  );
-}
diff --git a/docs/data/base/components/form-control/UseFormControl.tsx b/docs/data/base/components/form-control/UseFormControl.tsx
@@ -3,6 +3,15 @@ import FormControlUnstyled, {
   useFormControlUnstyledContext,
 } from '@mui/base/FormControlUnstyled';
 
+export default function UseFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <CustomInput />
+      <ControlStateDisplay />
+    </FormControlUnstyled>
+  );
+}
+
 function CustomInput() {
   const formControlContext = useFormControlUnstyledContext();
 
@@ -40,12 +49,3 @@ function ControlStateDisplay() {
     </p>
   );
 }
-
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <CustomInput />
-      <ControlStateDisplay />
-    </FormControlUnstyled>
-  );
-}