[SignInPage] Revamp slots #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.
There was a problem hiding this comment.
Agreed, formFooter makes more sense!
Agreed, I did feel thatforgotPasswordLink and signUpLink seem hyper-specific. If we're offering the entire formFooter area as a slot, perhaps it makes sense to remove forgotPasswordLink entirely with this PR? If someone wants a forgot password link, they can simply add it in their slot component.
I would propose removing forgotPasswordLink, rememberMe and signUpLink to create this structure (including a new form slot to override the entire form):
Wdyt? Also @Janpot and @prakhargupta1
Might make sense to move this to the next release and mark that as having a lot of breaking changes for the SignInPage slots
There was a problem hiding this comment.
Moving those to "plug-in" components seems good to me if they're complex enough!
| @@ -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?
| @@ -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?
Co-authored-by: Pedro Ferreira <[email protected]> Signed-off-by: Bharat Kashyap <[email protected]>
bharatkashyap
changed the title
rememberMe slot to checkbox
New Slots Layout
Excalidraw
Breaking Change
rememberMeforgotPasswordLinkandsignUpLinkslotsOther Changes
Add an
oauthButtonslotAdd
credentialsForm,magicLinkFormandpasskeyFormslots:formelements through slot props, such asnoValidate: truein case someone wants to disable the client-side form validationCloses Provide an option for SignInPage to skip the stack with "Remember Me" and "Forgot Password" #4572
Closes Add new slot prop 'providerButton' to the SignInPage component #4584