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

Document layout in Storybook #67628

Merged
merged 2 commits into from
Dec 10, 2024
Merged

Document layout in Storybook #67628

merged 2 commits into from
Dec 10, 2024

Conversation

jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Dec 5, 2024

Screenshot 2024-12-05 at 12 42 50

What?

Replicates the documentation on Layout we find in Figma on Storybook.

Why?

Continues the expansion of foundation documentation.

Testing Instructions

  1. npm run storybook:dev
  2. Navigate to the Foundations / Layout page.

Now would be a good moment to review this documentation.

In future we can expand this to include more detail. For instance we might describe compositions for section headers, layout grids, and more.

@jameskoster jameskoster added Storybook Storybook and its stories for components Design System Issues related to the system of combining components according to best practices. labels Dec 5, 2024
@jameskoster jameskoster requested review from a team December 5, 2024 12:46
@jameskoster jameskoster added the [Type] Enhancement A suggestion for improvement. label Dec 5, 2024
Copy link

github-actions bot commented Dec 5, 2024

Flaky tests detected in 03eef73.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12180031472
📝 Reported issues:

@jameskoster jameskoster requested a review from juanbuis December 5, 2024 13:15
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Not a blocker, but how much do you anticipate the static images needing to be updated throughout the life of this page?

If we do anticipate updates, it may be more maintainable to render the visuals with code (i.e. divs with CSS styles) or by Figma embed. Otherwise the person wanting to update the images would need to track you down for the source files 😄

Copy link

github-actions bot commented Dec 5, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jameskoster <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: juanbuis <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jasmussen
Copy link
Contributor

Not a blocker, but how much do you anticipate the static images needing to be updated throughout the life of this page?

Related to that, I recall early in the life of this project that we added a lot of images for documentation, which caused trouble for contributors having to pull down big PNG files in multiple versions. I wonder how we can avoid that happening again.

Copy link

@juanbuis juanbuis 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! Left one comment :)


<img src={ areas } alt="Area definition diagram" width="100%" />

1. **Sidebar** – Primary admin navigation UI including notifications and access to Command Palette. Always positioned on the left of the page (assuming LTR locale).
Copy link

Choose a reason for hiding this comment

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

Perhaps use "left-to-right language" or "left-to-right locale" to avoid the acronym?

@jameskoster
Copy link
Contributor Author

jameskoster commented Dec 6, 2024

Otherwise the person wanting to update the images would need to track you down for the source files 😄

They're SVGs, so they effectively are the source files. Unless I'm missing a beat?

Edit: They also exist in the WPDS source file, so all members of the design team should have access, or be able to easily get access.

@mirka
Copy link
Member

mirka commented Dec 9, 2024

They're SVGs, so they effectively are the source files. Unless I'm missing a beat?

Edit: They also exist in the WPDS source file, so all members of the design team should have access, or be able to easily get access.

Fair! Let's go with this and we can always revisit if we encounter maintenance issues.

@jameskoster
Copy link
Contributor Author

@mirka do you know if it's okay to merge this? I'm seeing some failing checks but they seem optional/unrelated.

@mirka
Copy link
Member

mirka commented Dec 9, 2024

@jameskoster Looks good to me 👍

@jameskoster jameskoster merged commit deb2d5d into trunk Dec 10, 2024
61 of 63 checks passed
@jameskoster jameskoster deleted the add/storybook-layout-docs branch December 10, 2024 12:40
@github-actions github-actions bot added this to the Gutenberg 19.9 milestone Dec 10, 2024
@bph bph added the [Type] Developer Documentation Documentation for developers label Dec 11, 2024
@mirka mirka removed the [Type] Enhancement A suggestion for improvement. label Dec 11, 2024
yogeshbhutkar pushed a commit to yogeshbhutkar/gutenberg that referenced this pull request Dec 18, 2024
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: juanbuis <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design System Issues related to the system of combining components according to best practices. Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers
Projects
Status: 💫 Done
Development

Successfully merging this pull request may close these issues.

5 participants