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

Provide new prop to add content to left area of form dialog #3587

Merged
merged 5 commits into from
Aug 9, 2024
Merged

Provide new prop to add content to left area of form dialog #3587

merged 5 commits into from
Aug 9, 2024

Conversation

ddouglasz
Copy link
Contributor

Summary

Add a new property leftAlignedFooterContentto the form dialog. This provides an additional content positioned to the left area of the form dialog footer.

Screenshots

image

@ddouglasz ddouglasz requested a review from a team as a code owner August 8, 2024 10:36
@vercel Vercel
Copy link

vercel bot commented Aug 8, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mc-app-kit-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 8, 2024 1:25pm
merchant-center-application-kit-components-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 8, 2024 1:25pm

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Aug 8, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 046d7bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages
Name Type
@commercetools-frontend/application-components Minor
@commercetools-frontend/application-shell Minor
@commercetools-frontend/codemod Minor
@commercetools-frontend/mc-scripts Minor
@commercetools-frontend/react-notifications Minor
@commercetools-applications/merchant-center-template-starter-typescript Minor
@commercetools-applications/merchant-center-template-starter Minor
@commercetools-applications/merchant-center-custom-view-template-starter-typescript Minor
@commercetools-applications/merchant-center-custom-view-template-starter Minor
@commercetools-local/playground Minor
@commercetools-local/visual-testing-app Minor
@commercetools-website/components-playground Minor
@commercetools-frontend/cypress Minor
@commercetools-backend/eslint-config-node Minor
@commercetools-backend/express Minor
@commercetools-backend/loggers Minor
@commercetools-frontend/actions-global Minor
@commercetools-frontend/application-config Minor
@commercetools-frontend/application-shell-connectors Minor
@commercetools-frontend/assets Minor
@commercetools-frontend/babel-preset-mc-app Minor
@commercetools-frontend/browser-history Minor
@commercetools-frontend/constants Minor
@commercetools-frontend/create-mc-app Minor
@commercetools-frontend/eslint-config-mc-app Minor
@commercetools-frontend/i18n Minor
@commercetools-frontend/jest-preset-mc-app Minor
@commercetools-frontend/jest-stylelint-runner Minor
@commercetools-frontend/l10n Minor
@commercetools-frontend/mc-dev-authentication Minor
@commercetools-frontend/mc-html-template Minor
@commercetools-frontend/notifications Minor
@commercetools-frontend/permissions Minor
@commercetools-frontend/sdk Minor
@commercetools-frontend/sentry Minor
@commercetools-frontend/url-utils Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@FilPob
Copy link

FilPob commented Aug 8, 2024

@ddouglasz thanks, looks perfect on the screenshot, but if you look at the Percy screenshots it looks like the buttons are nudged to the left.

@ddouglasz
Copy link
Contributor Author

ddouglasz commented Aug 8, 2024 •
edited
Loading

@ddouglasz thanks, looks perfect on the screenshot, but if you look at the Percy screenshots it looks like the buttons are nudged to the left.

@FilPob Thats true, I noticed it too, fixing it now. I will update it soon. Thanks!
Also, I think we need to have a follow-up task to update the documentation with the new prop and its display too.
Somewhere here: https://docs.commercetools.com/merchant-center-customizations/api-reference/commercetools-frontend-application-components#formdialog

FIxed here: 9a98d8f

@ddouglasz
Copy link
Contributor Author

FIxed here: 9a98d8f

@ddouglasz ddouglasz requested a review from FilPob August 8, 2024 11:56
@FilPob
Copy link

FilPob commented Aug 8, 2024

Thanks! Looks good now. And Yes we should also add a short description of the prop to the docs

misama-ct
misama-ct approved these changes Aug 8, 2024
View reviewed changes
Copy link

@misama-ct misama-ct left a comment

Choose a reason for hiding this comment

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

👍 LGTM, thanks!

emmenko
emmenko reviewed Aug 8, 2024
View reviewed changes
Copy link
Member

@emmenko emmenko left a comment

Choose a reason for hiding this comment

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

Thanks 🤗

packages/application-components/src/components/dialogs/form-dialog/form-dialog.tsx Outdated
@@ -31,6 +31,7 @@ export type TFormDialogProps = {
dataAttributesPrimaryButton?: { [key: string]: string };
getParentSelector?: () => HTMLElement;
iconLeftSecondaryButton?: ReactElement;
leftAlignedFooterContent?: ReactNode;
Copy link
Member

Choose a reason for hiding this comment

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

Can we name this simply footerContent?

It will always be left aligned to the buttons. It also gives more flexibility in case the layout changes in the future.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it's due to the iconLeftSecondaryButton existing also to be consistent. I also would like footerElement more cause we're passing a React element.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes @tdeekens that would also work. I think both names suggested cover the scope of the prop and its use case.
I could change it if you want.
Thanks!

Copy link
Member

Choose a reason for hiding this comment

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

@ddouglasz Maybe check in App Kit and UI Kit if there are similar cases and see what kind of naming we are using there.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, thank you for the suggestion. We have cases like these mostly with "content". Like the MaintenancePageLayout with a prop of bodyContent?: ReactNode;

packages/application-components/src/components/dialogs/internals/dialog-footer.tsx Outdated Show resolved Hide resolved
emmenko
emmenko reviewed Aug 8, 2024
View reviewed changes
Copy link
Member

@emmenko emmenko left a comment

Choose a reason for hiding this comment

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

Thanks!

packages/application-components/src/components/dialogs/internals/dialog-footer.tsx Outdated Show resolved Hide resolved
@ddouglasz ddouglasz merged commit d37e74e into main Aug 9, 2024
19 checks passed
@ddouglasz ddouglasz deleted the SHIELD-1363-form-dialog-add-custom-content-slot-in-the-footer branch August 9, 2024 06:20
@ct-changesets ct-changesets bot mentioned this pull request Aug 9, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tdeekens tdeekens tdeekens left review comments

@emmenko emmenko emmenko approved these changes

@FilPob FilPob FilPob approved these changes

@misama-ct misama-ct misama-ct 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.
5 participants
@ddouglasz @FilPob @emmenko @tdeekens @misama-ct