[docs][base-ui] Fix form submission Select demo (#40014)

mui · Dec 22, 2023 · 23ab56d · 23ab56d
1 parent 9e798d8
commit 23ab56d
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 50 deletions.
diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js
@@ -3,31 +3,30 @@ import PropTypes from 'prop-types';
 import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
-import { styled, Box } from '@mui/system';
+import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectForm() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    alert(new URLSearchParams(formData).toString());
+  };
+
   return (
-    <div>
-      <Box sx={{ mb: 2 }}>
-        <Label htmlFor="unnamed-select">Default</Label>
-        <Select defaultValue={10} id="unnamed-select">
-          <Option value={10}>Ten</Option>
-          <Option value={20}>Twenty</Option>
-          <Option value={30}>Thirty</Option>
-        </Select>
-      </Box>
-      <div>
-        <Label htmlFor="named-select">
-          With the <code>name</code> prop
-        </Label>
-        <Select defaultValue={10} id="named-select" name="demo-select">
-          <Option value={10}>Ten</Option>
-          <Option value={20}>Twenty</Option>
-          <Option value={30}>Thirty</Option>
-        </Select>
-      </div>
-    </div>
+    <form onSubmit={handleSubmit}>
+      <Label htmlFor="named-select">
+        With the <code>name</code> prop set to <code>&quot;demo-select&quot;</code>
+      </Label>
+      <Select defaultValue={10} id="named-select" name="demo-select">
+        <Option value={10}>Ten</Option>
+        <Option value={20}>Twenty</Option>
+        <Option value={30}>Thirty</Option>
+      </Select>
+      <SubmitButton sx={{ ml: 1 }} type="submit">
+        Submit
+      </SubmitButton>
+    </form>
   );
 }
 
@@ -45,9 +44,11 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0066CC',
   900: '#003A75',
 };
 
@@ -197,3 +198,36 @@ const Label = styled('label')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
+
+const SubmitButton = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+`,
+);
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -7,31 +7,30 @@ import {
 } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
-import { styled, Box } from '@mui/system';
+import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectForm() {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    alert(new URLSearchParams(formData as any).toString());
+  };
+
   return (
-    <div>
-      <Box sx={{ mb: 2 }}>
-        <Label htmlFor="unnamed-select">Default</Label>
-        <Select defaultValue={10} id="unnamed-select">
-          <Option value={10}>Ten</Option>
-          <Option value={20}>Twenty</Option>
-          <Option value={30}>Thirty</Option>
-        </Select>
-      </Box>
-      <div>
-        <Label htmlFor="named-select">
-          With the <code>name</code> prop
-        </Label>
-        <Select defaultValue={10} id="named-select" name="demo-select">
-          <Option value={10}>Ten</Option>
-          <Option value={20}>Twenty</Option>
-          <Option value={30}>Thirty</Option>
-        </Select>
-      </div>
-    </div>
+    <form onSubmit={handleSubmit}>
+      <Label htmlFor="named-select">
+        With the <code>name</code> prop set to <code>&quot;demo-select&quot;</code>
+      </Label>
+      <Select defaultValue={10} id="named-select" name="demo-select">
+        <Option value={10}>Ten</Option>
+        <Option value={20}>Twenty</Option>
+        <Option value={30}>Thirty</Option>
+      </Select>
+      <SubmitButton sx={{ ml: 1 }} type="submit">
+        Submit
+      </SubmitButton>
+    </form>
   );
 }
 
@@ -54,9 +53,11 @@ const Select = React.forwardRef(function CustomSelect<
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0066CC',
   900: '#003A75',
 };
 
@@ -207,3 +208,36 @@ const Label = styled('label')(
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
 );
+
+const SubmitButton = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+`,
+);
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx.preview b/docs/data/base/components/select/UnstyledSelectForm.tsx.preview
@@ -0,0 +1,13 @@
+<form onSubmit={handleSubmit}>
+  <Label htmlFor="named-select">
+    With the <code>name</code> prop set to <code>&quot;demo-select&quot;</code>
+  </Label>
+  <Select defaultValue={10} id="named-select" name="demo-select">
+    <Option value={10}>Ten</Option>
+    <Option value={20}>Twenty</Option>
+    <Option value={30}>Thirty</Option>
+  </Select>
+  <SubmitButton sx={{ ml: 1 }} type="submit">
+    Submit
+  </SubmitButton>
+</form>
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
@@ -38,11 +38,9 @@ The following demo shows how to create and style a Select component with several
 ### Form submission
 
 The value(s) chosen in the Select can be posted to a server using a standard HTML form.
-When the `name` prop is set, the Select will render a hidden input with the selected value.
 
 {{"demo": "UnstyledSelectForm.js"}}
 
-Note how the second Select in the demo above renders a hidden input with the name provided as a prop.
 You can customize the value of this hidden input—see the [Object values](#object-values) section for details.
 
 ### TypeScript caveat

diff --git a/docs/translations/api-docs-base/select/select.json b/docs/translations/api-docs-base/select/select.json
@@ -29,7 +29,7 @@
       "description": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props."
     },
     "name": {
-      "description": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server."
+      "description": "Name of the element. For example used by the server to identify the fields in form submits."
     },
     "onChange": { "description": "Callback fired when an option is selected." },
     "onListboxOpenChange": {

diff --git a/docs/translations/api-docs-joy/select/select.json b/docs/translations/api-docs-joy/select/select.json
@@ -35,7 +35,7 @@
       "description": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props."
     },
     "name": {
-      "description": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server."
+      "description": "Name of the element. For example used by the server to identify the fields in form submits."
     },
     "onChange": { "description": "Callback fired when an option is selected." },
     "onClose": { "description": "Triggered when focus leaves the menu and the menu should close." },

diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
@@ -310,7 +310,6 @@ Select.propTypes /* remove-proptypes */ = {
   multiple: PropTypes.bool,
   /**
    * Name of the element. For example used by the server to identify the fields in form submits.
-   * If the name is provided, the component will render a hidden input element that can be submitted to a server.
    */
   name: PropTypes.string,
   /**

diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts
@@ -71,7 +71,6 @@ export interface SelectOwnProps<OptionValue extends {}, Multiple extends boolean
   multiple?: Multiple;
   /**
    * Name of the element. For example used by the server to identify the fields in form submits.
-   * If the name is provided, the component will render a hidden input element that can be submitted to a server.
    */
   name?: string;
   /**

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -725,7 +725,6 @@ Select.propTypes /* remove-proptypes */ = {
   multiple: PropTypes.bool,
   /**
    * Name of the element. For example used by the server to identify the fields in form submits.
-   * If the name is provided, the component will render a hidden input element that can be submitted to a server.
    */
   name: PropTypes.string,
   /**

diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
@@ -125,7 +125,6 @@ export interface SelectStaticProps {
   listboxOpen?: boolean;
   /**
    * Name of the element. For example used by the server to identify the fields in form submits.
-   * If the name is provided, the component will render a hidden input element that can be submitted to a server.
    */
   name?: string;
   /**