Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(ModalFooterBase): base footer component to be used by different modal footers #2437

Merged
merged 4 commits into from
Oct 9, 2024
Merged

feat(ModalFooterBase): base footer component to be used by different modal footers #2437

merged 4 commits into from
Oct 9, 2024

Conversation

YossiSaadi
Copy link
Contributor

@YossiSaadi YossiSaadi commented Sep 16, 2024 •
edited
Loading

ModalFooterBase

Illustration only:
image

  • Acts as a base component for the ModalFooter and ModalFooterWizard (can also be same component ModalFooter with a boolean flag prop)
  • Must render a primary action
  • Can render a secondary action:
    • Mandatory on Wizard footer mode (decided by the footer component)
    • Optional on Basic footer mode (passed by consumer)
  • Can render a third action:
    • Mandatory on Wizard footer mode (decided by the footer component - renders a stepper)
    • Optional on Basic footer mode (passed by consumer)

https://monday.monday.com/boards/3532715121/pulses/7360692401

@YossiSaadi YossiSaadi force-pushed the feat/yossi/modalfooterbase-component-to-act-as-a-base-for-advanced-7360692401 branch from aa9edfb to 8db9939 Compare September 22, 2024 05:40
@YossiSaadi YossiSaadi marked this pull request as ready for review September 24, 2024 07:43
@YossiSaadi YossiSaadi requested a review from a team as a code owner September 24, 2024 07:43
@YossiSaadi YossiSaadi mentioned this pull request Sep 24, 2024
Draft
talkor
talkor reviewed Sep 24, 2024
View reviewed changes
packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss Outdated
width: 100%;
padding: 20px var(--spacing-large);
flex-shrink: 0;
z-index: 1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you mean regarding the z-index?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably a leftover, removing

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx
{secondaryButton.text}
</Button>
)}
{renderAction}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if it should be children

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're rethinking everything here, but yep it can definitely be children

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok we decided to leave everything here as slots
I want to keep the "children" prop as a safe prop for an option to pass a whole different footer which gets the footer css but can pass a custom one
I'm not sure this use case would ever happen, but you can never know

@YossiSaadi YossiSaadi marked this pull request as draft September 24, 2024 15:10
@YossiSaadi YossiSaadi force-pushed the feat/yossi/modal-a11y-keep-focus-only-inside-modal-7360933300 branch from 16dc805 to c56818d Compare September 25, 2024 07:58
Base automatically changed from feat/yossi/modal-a11y-keep-focus-only-inside-modal-7360933300 to feat/yossi/new-modal-building-blocks-7359960492 September 26, 2024 06:06
@YossiSaadi YossiSaadi force-pushed the feat/yossi/modalfooterbase-component-to-act-as-a-base-for-advanced-7360692401 branch from 8db9939 to 500da09 Compare September 26, 2024 06:10
@YossiSaadi YossiSaadi marked this pull request as ready for review October 8, 2024 06:41
@YossiSaadi YossiSaadi requested a review from talkor October 8, 2024 06:41
@YossiSaadi
Merge branch 'feat/yossi/new-modal-building-blocks-7359960492' into f…
b78ceeb 
…eat/yossi/modalfooterbase-component-to-act-as-a-base-for-advanced-7360692401
talkor
talkor approved these changes Oct 9, 2024
View reviewed changes
Copy link
Member

@talkor talkor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss
.footer {
position: relative;
width: 100%;
padding: 20px var(--spacing-large);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

20 intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep
I'll guess that when design decides on the new spacing system it would be part of it
image

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx
ref: React.ForwardedRef<HTMLDivElement>
) => {
return (
<Flex
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice layout!

@YossiSaadi YossiSaadi merged commit 153d94f into feat/yossi/new-modal-building-blocks-7359960492 Oct 9, 2024
9 of 10 checks passed
@YossiSaadi YossiSaadi deleted the feat/yossi/modalfooterbase-component-to-act-as-a-base-for-advanced-7360692401 branch October 9, 2024 11:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@talkor talkor talkor approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@YossiSaadi @talkor