-
Notifications
You must be signed in to change notification settings - Fork 535
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SelectPanel2: Instant selection variant #3783
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
size-limit report 📦
|
|
||
if (hidePrimaryActions && !props.children) { | ||
// nothing to render | ||
// todo: we can inform them the developer footer will render nothing |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not throwing validation errors yet. Will create a PR for all validations errors together
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me ⭐ Just left two comments/questions
{hidePrimaryActions ? null : ( | ||
<Box sx={{display: 'flex', gap: 2}}> | ||
<Button size="small" type="button" onClick={() => onCancel()}> | ||
Cancel | ||
</Button> | ||
<Button size="small" type="submit" variant="primary"> | ||
Save | ||
</Button> | ||
</Box> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Totally optional - I usually find the syntax below more readable but feel free to ignore if it doesn't resonate with you 🤗
{hidePrimaryActions ? null : ( | |
<Box sx={{display: 'flex', gap: 2}}> | |
<Button size="small" type="button" onClick={() => onCancel()}> | |
Cancel | |
</Button> | |
<Button size="small" type="submit" variant="primary"> | |
Save | |
</Button> | |
</Box> | |
)} | |
{!hidePrimaryActions && ( | |
<Box sx={{display: 'flex', gap: 2}}> | |
<Button size="small" type="button" onClick={() => onCancel()}> | |
Cancel | |
</Button> | |
<Button size="small" type="submit" variant="primary"> | |
Save | |
</Button> | |
</Box> | |
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
but feel free to ignore if it doesn't resonate with you 🤗
Firstly, thank you! I appreciate that!
because I feel the opposite 😅
I find double negatives like !hide
confusing. don't hide = so show
. There's something really clean about hide → return null
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😅 Fair enough!!
</Box> | ||
) | ||
} | ||
SelectPanel.Footer = SelectPanelFooter | ||
|
||
// @ts-ignore todo | ||
SelectPanel.SecondaryButton = props => { | ||
return <Button {...props} size="small" type="button" /> | ||
return <Button {...props} size="small" type="button" block /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just wondering why this Button
needs to be block type?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question!
So, for most cases of SelectPanel you'd see a Save and Cancel button on the right, but then also an optional secondary button on the left:
In the case of instant variant, there is no Save and Cancel. So, we'd like the secondary button to take the full width of the footer so it looks less awkward:
Without block | With block |
---|---|
Now because the footer has 2 divs inside of it - left buttons container and right buttons container, it's the left container that "flex-grows" based on variant. Inside the left container, secondary button can always take the full width (block
) available to it.
left container with flexGrow: 0 | left container with flexGrow: 1 |
---|---|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see! thanks for the explainer!
This reverts commit 3458ab8.
Thanks @pksjce for catching that! Fixed now! |
Context:
selectionVariant=single
onSubmit
and closes the menu instantlyinstant-selectpanel.mov