[SignInPage] Rename rememberMe slot to checkbox
#4574
Conversation
Netlify deploy preview |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
bharatkashyap
changed the title
rememberMe optional, add form slotProprememberMe optional
bharatkashyap
changed the title
rememberMe optionalrememberMe slot to checkbox
bharatkashyap
changed the title
rememberMe slot to checkboxrememberMe slot to checkbox
| emailField: { variant: 'standard', autoFocus: false }, | ||
| passwordField: { variant: 'standard' }, | ||
| submitButton: { variant: 'outlined' }, | ||
| rememberMe: { | ||
| checkbox: { |
There was a problem hiding this comment.
checkbox is more generic than rememberMe so I think it's an improvement, but could we make it more generic even as any type of content could go in this slot, such as a small disclaimer for example, or multiple checkboxes?
Not sure if something like formFooter would be a good name...
Anyway these are just some thoughts!
There was a problem hiding this comment.
Also I see we have a forgotPasswordLink slot too, so if when implementing these you saw that there's a benefit to these slots being more specific then it should be fine.
| @@ -16,17 +16,19 @@ export default function SlotPropsSignIn() { | |||
| `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`, | |||
| ) | |||
| } | |||
| slots={{ checkbox: RememberCheckbox }} | |||
There was a problem hiding this comment.
What about RememberMeCheckbox, would it be just a bit more descriptive?
| @@ -239,7 +239,7 @@ To enable deep customization beyond what is possible with custom props, the `Sig | |||
|
|
|||
| {{"demo": "SlotsSignIn.js", "iframe": true, "height": 540 }} | |||
|
|
|||
| You can use the `slotProps` prop to pass props to the underlying components of each slot: | |||
| You can use the `slotProps` prop to pass props to the underlying components of each slot, and also to `form` element: | |||
There was a problem hiding this comment.
| You can use the `slotProps` prop to pass props to the underlying components of each slot, and also to `form` element: | |
| You can use the `slotProps` prop to pass props to the underlying components of each slot, and also to the `form` element: |
| @@ -18,10 +18,10 @@ | |||
| }, | |||
| "classDescriptions": {}, | |||
| "slotDescriptions": { | |||
| "checkbox": "A custom checkbox placed in the credentials form", | |||
There was a problem hiding this comment.
If we change the name as I proposed we'd have to update the description to something more generic too.
| color: 'textSecondary', | ||
| fontSize: theme.typography.pxToRem(14), | ||
| }, | ||
| ...props?.slotProps?.typography, |
There was a problem hiding this comment.
Shouldn't we just spread this inside typography instead?
| import { FormControlLabel, Checkbox } from '@mui/material'; | ||
| import { useTheme } from '@mui/material/styles'; | ||
|
|
||
| interface RememberCheckboxProps { |
There was a problem hiding this comment.
Can't we just allow all slotProps from FormControlLabel and make sure they're passed to the component?
Breaking Change
rememberMetocheckboxto make the slot more genericcheckboxslotOther Changes
formslotPropto enable passing attributes to the containingformelements, such asnoValidate: truein case someone wants to disable the client-side form validation