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

Add foundations:elevation to storybook #66124

Merged
merged 12 commits into from
Oct 18, 2024
Merged

Add foundations:elevation to storybook #66124

merged 12 commits into from
Oct 18, 2024

Conversation

jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Oct 15, 2024 •
edited
Loading

Screenshot 2024-10-15 at 14 48 15

Related to #66122.

What?

Adds a page detailing elevation as a foundation of the overall design language.

Why?

To help guide end users about how to use elevation when working with the WordPress components package, or when creating new UIs.

Testing Instructions

  1. npm run storybook:dev
  2. Observe the new Foundations / Design language / Elevation section

Missing pieces

This PR is a draft for now. I'd welcome assistance with adding:

  1. Images – it's unclear if a Storybook addon is required for this, and where any images should be hosted.
  2. Internal links – I tried adding the links addon to create an internal link from the tokens section to the tokens page, but couldn't get it working.

@jameskoster jameskoster added [Type] Enhancement A suggestion for improvement. Storybook Storybook and its stories for components Design System Issues related to the system of combining components according to best practices. labels Oct 15, 2024
@jameskoster jameskoster requested review from a team October 15, 2024 13:52
@ciampo
Copy link
Contributor

ciampo commented Oct 16, 2024

This PR is a draft for now. I'd welcome assistance with adding:

  1. Images – it's unclear if a Storybook addon is required for this, and where any images should be hosted.
  2. Internal links – I tried adding the links addon to create an internal link from the tokens section to the tokens page, but couldn't get it working.

@mirka is this something you can help with, since you've been taking a look at other Storybook-related tasks?

tyxla
tyxla reviewed Oct 16, 2024
View reviewed changes
storybook/stories/foundations/design-language/elevation.mdx Outdated

## Tokens

Use tokens to apply elevation in your work. Please refer to the Tokens section of Storybook to learn more.
Copy link
Member

Choose a reason for hiding this comment

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

Let's make sure to add a link to the Elevation tokens page once it lands in #66122.

@ciampo
Copy link
Contributor

ciampo commented Oct 16, 2024

Re. links, does this section of the docs help?

@mirka
Copy link
Member

mirka commented Oct 16, 2024

I pushed an example for adding images: ea10ad0

@jameskoster
Copy link
Contributor Author

Thanks y'all, I added a link to the tokens section, obviously it will be broken until #66122 is merged, so let's hold off on this one until then.

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 17, 2024 •
edited
Loading

Flaky tests detected in 9e8f2e8.
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/11403553684
📝 Reported issues:

@ciampo ciampo force-pushed the add/storybook-elevation-foundation branch from 65fea22 to 879113e Compare October 18, 2024 08:17
@ciampo ciampo marked this pull request as ready for review October 18, 2024 09:06
@github-actions GitHub Actions
Copy link

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 <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

ciampo
ciampo approved these changes Oct 18, 2024
View reviewed changes
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Rebased to include the tokens page, and applied a few improvements / fixes.

Code-wise, this is LGTM 🚀

I'll leave it to @WordPress/gutenberg-design to merge it when they're happy with the contents of the page.

@jameskoster
Copy link
Contributor Author

Added an internal link from the tokens page to the foundation page. I think this is good as an initial iteration :)

@ciampo ciampo enabled auto-merge (squash) October 18, 2024 12:21
@jameskoster jameskoster disabled auto-merge October 18, 2024 12:25
@jameskoster
Copy link
Contributor Author

Disabled auto-merge. I noticed a couple of copy tweaks to make, and I'm going to add a graphic to better demonstrate the examples :)

@ciampo
Copy link
Contributor

ciampo commented Oct 18, 2024

Cool! I'll leave the merging to you :)

@jameskoster jameskoster merged commit 2196966 into trunk Oct 18, 2024
62 checks passed
@jameskoster jameskoster deleted the add/storybook-elevation-foundation branch October 18, 2024 14:09
@github-actions github-actions bot added this to the Gutenberg 19.6 milestone Oct 18, 2024
karthick-murugan pushed a commit to karthick-murugan/gutenberg that referenced this pull request Nov 13, 2024
@jameskoster @mirka
@ciampo @tyxla @karthick-murugan
Add foundations:elevation to storybook (WordPress#66124)
1bd85cd 
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tyxla tyxla tyxla left review comments

@ciampo ciampo ciampo approved these changes

Assignees
No one assigned
Labels
Design System Issues related to the system of combining components according to best practices. Storybook Storybook and its stories for components [Type] Enhancement A suggestion for improvement.
Projects
Design systems — Backlog
Status: 💫 Done
Milestone
Gutenberg 19.6
Development

Successfully merging this pull request may close these issues.
4 participants
@jameskoster @ciampo @mirka @tyxla