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.

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

Blocks: New Canvas API #20723

Merged
merged 30 commits into from
Jan 24, 2023
Merged

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Jan 21, 2023

Fixes #12135

What I did

This PR changes the Canvas block to use the new of based API, while still being backwards compatible with the existing API, that is now deprecated and will be removed in 8.0.

It also changes the DocsStory block to use the new API, without being backwards compatible as it is an undocumented component.

All that's missing here is the migration docs, but they will be easier to write once #20699 lands.

How to test

See stories in published UI SB:

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@JReinhold JReinhold self-assigned this Jan 21, 2023
@JReinhold JReinhold added block: other maintenance User-facing maintenance tasks ui labels Jan 21, 2023
@JReinhold JReinhold marked this pull request as ready for review January 22, 2023 22:48
@JReinhold JReinhold requested a review from tmeasday January 22, 2023 22:48
Copy link
Member

@tmeasday tmeasday left a comment

Choose a reason for hiding this comment

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

Looks great! Couple of details to nail down, and I think maybe we crossed wires over the layout prop.

code/ui/blocks/src/blocks/Canvas.stories.tsx Show resolved Hide resolved
code/ui/blocks/src/blocks/Canvas.tsx Show resolved Hide resolved
code/ui/blocks/src/blocks/Canvas.tsx Outdated Show resolved Hide resolved
code/ui/blocks/src/blocks/Canvas.tsx Show resolved Hide resolved
code/ui/blocks/src/blocks/Canvas.tsx Outdated Show resolved Hide resolved
code/ui/blocks/src/blocks/Canvas.tsx Outdated Show resolved Hide resolved
code/ui/blocks/src/blocks/DocsStory.tsx Outdated Show resolved Hide resolved
code/ui/blocks/src/blocks/Primary.tsx Show resolved Hide resolved
code/ui/blocks/src/blocks/useOf.ts Show resolved Hide resolved
Copy link
Member

@tmeasday tmeasday left a comment

Choose a reason for hiding this comment

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

x

@JReinhold JReinhold requested a review from tmeasday January 23, 2023 09:56
Copy link
Member

@tmeasday tmeasday left a comment

Choose a reason for hiding this comment

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

LGTM, couple small final things

code/ui/blocks/src/blocks/Canvas.tsx Outdated Show resolved Hide resolved
Comment on lines +129 to +134
Children.forEach(children, (child) => {
if (layout) {
return;
}
layout = (child as ReactElement)?.props?.parameters?.layout;
});
Copy link
Member

@tmeasday tmeasday Jan 24, 2023

Choose a reason for hiding this comment

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

Suggested change
Children.forEach(children, (child) => {
if (layout) {
return;
}
layout = (child as ReactElement)?.props?.parameters?.layout;
});
const layout ??=
Children.map(children,
(child) => (child as ReactElement)?.props?.parameters?.layout
).find(Boolean);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm sorry I have to disagree here.
cleverness++, readability--

code/ui/blocks/src/components/Preview.tsx Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block: other maintenance User-facing maintenance tasks ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global layout parameter isn't applied to DocsPage canvas
2 participants