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

Feat: Storybook: Improve component organisation - Typography - Issue #66275 #66633

Merged
merged 7 commits into from
Nov 12, 2024

Conversation

hbhalodia
Copy link
Contributor

@hbhalodia hbhalodia commented Oct 31, 2024

What?

Why?

This change is part of the larger Storybook Improvements and the shared Sitemap.

How?

Adding Categories that helps organize and group components into sections based on their role and function within the library makes our library easier to navigate and understand.

Testing Instructions

  1. Checkout to the PR.
  2. Run npm run storybook:dev.
  3. Check for the updated components with category that are changed in PR.

Testing Instructions for Keyboard

  • None

Screenshots or screencast

Screenshot 2024-10-31 at 4 25 54 PM Screenshot 2024-10-31 at 4 26 00 PM

Copy link

github-actions bot commented Oct 31, 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: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

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

@hbhalodia hbhalodia requested review from mirka and mattrwalker and removed request for ajitbohra and mirka October 31, 2024 10:56
@jameskoster jameskoster requested a review from a team October 31, 2024 11:04
@jameskoster
Copy link
Contributor

Thank you so much for the PR 🙏

This looks good to me but let's get a code review :)

@hbhalodia
Copy link
Contributor Author

Hi @jameskoster, I just have doubt, Currently if the component is marked experimental and in new sitemap, if the component is marked stable, should I change from components experimental to components? I guess it should be just to be sure.

Thank You,

@jameskoster
Copy link
Contributor

Let's defer to @WordPress/gutenberg-components, but my instinct would be to leave experimental components as experimental for now.

@hbhalodia
Copy link
Contributor Author

Let's defer to @WordPress/gutenberg-components, but my instinct would be to leave experimental components as experimental for now.

No worries, I do have asked this to @mirka, in this PR - #66635, let's see, we can revert that change anyhow in PR is not needed.

Thank You,

@hbhalodia hbhalodia changed the title Feat: Storybook: Improve component organisation - Typogrpahy - Issue #66275 Feat: Storybook: Improve component organisation - Typography - Issue #66275 Nov 1, 2024
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

Thank you, @hbhalodia 🙌

This looks good overall, there are just a few minor things to discuss and finalize before shipping.

packages/components/src/heading/stories/index.story.tsx Outdated Show resolved Hide resolved
@@ -10,7 +10,8 @@ import { Heading } from '..';

const meta: Meta< typeof Heading > = {
component: Heading,
title: 'Components (Experimental)/Heading',
title: 'Components (Experimental)/Typography/Heading',
Copy link
Member

Choose a reason for hiding this comment

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

Experimental components will fall in their own section down below, meaning they will have their own Typography directory. Is that desired? Should we consider marking the experimental components just with badges, like CustomSelectControlV2 is marked WIP?

cc @ciampo @mirka

@@ -10,7 +10,8 @@ import { Text } from '../component';

const meta: Meta< typeof Text > = {
component: Text,
title: 'Components (Experimental)/Text',
title: 'Components (Experimental)/Typography/Text',
Copy link
Member

Choose a reason for hiding this comment

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

Same as above with regards to the separate experimental category

@@ -10,7 +10,8 @@ import { Truncate } from '..';

const meta: Meta< typeof Truncate > = {
component: Truncate,
title: 'Components (Experimental)/Truncate',
title: 'Components (Experimental)/Typography/Truncate',
Copy link
Member

Choose a reason for hiding this comment

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

Same as above with regards to the separate experimental category

packages/components/src/text/stories/index.story.tsx Outdated Show resolved Hide resolved
packages/components/src/truncate/stories/index.story.tsx Outdated Show resolved Hide resolved
@tyxla tyxla added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Nov 7, 2024
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.

🚀

@mirka mirka enabled auto-merge (squash) November 12, 2024 20:12
@mirka mirka merged commit 2a3e379 into WordPress:trunk Nov 12, 2024
61 checks passed
@github-actions github-actions bot added this to the Gutenberg 19.7 milestone Nov 12, 2024
karthick-murugan pushed a commit to karthick-murugan/gutenberg that referenced this pull request Nov 13, 2024
…ordPress#66275 (WordPress#66633)

* Group the components in storybook based on sitemap provided

* Fix the experimental id for components in storybook

* Revert the unwanted changes in PR

* Add the missing folder on conflicts resolve

---------

Co-authored-by: Lena Morita <lena@jaguchi.com>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants