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: Display component's status badge in story #1230

Closed
wants to merge 11 commits into from

Conversation

RubenSibon
Copy link
Contributor

@RubenSibon RubenSibon commented May 15, 2024

Add status badges to stories to inform the reader about the lifecycle status of the component.

This PR uses the Status addon.

GitHub: https://github.com/etchteam/storybook-addon-status?tab=readme-ov-file

Known issues:

@RubenSibon RubenSibon self-assigned this May 15, 2024
@github-actions github-actions bot temporarily deployed to demo-DES-680-component-status May 17, 2024 12:59 Destroyed
Note that only background-color and color properties can be modified.
@github-actions github-actions bot temporarily deployed to demo-DES-680-component-status May 17, 2024 14:03 Destroyed
@RubenSibon RubenSibon marked this pull request as ready for review May 17, 2024 14:03
@RubenSibon RubenSibon changed the title feat: display component status badge (using Status addon) feat: Display component's status badge in story May 17, 2024
import { AmsterdamIconGallery } from "./components/AmsterdamIconGallery";

<Meta title="Docs/Assets/Icons" />
{/* Below "parameters" prop does not seem to work; see docs: https://github.com/etchteam/storybook-addon-status?tab=readme-ov-file#story-usage */}
Copy link
Contributor

Choose a reason for hiding this comment

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

If this plugin doesn't work here, and we don't want to show the statusses in the TOC anyway, isn't it easier to just make a custom element and place it in the MDX? The currect badges aren't very easy to see imo

Copy link
Contributor Author

@RubenSibon RubenSibon May 17, 2024

Choose a reason for hiding this comment

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

I updated it to show how it looks with our own Badge component to show the status, but as you can see we then need to deal with the margin above the heading EDIT: no longer true; see next comment.

The Badge addon has way more style properties which is nice, but I also could not get it to work with the docs. Maybe there is a solution, but I can't figure one out.

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 experimenting with our Badge component again. It's now added below the story's heading and absolutely positioned above it. I did that for the Icon Gallery and the Header. What do you think?

Also @VincentSmedinga

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, I think it’s fair to say that the conclusion of this experiment is that we can best implement our own status badge. We want it to appear a bit differently than what they provide anyway, and the quality isn’t up to par. Thanks, still :)

@github-actions github-actions bot temporarily deployed to demo-DES-680-component-status May 17, 2024 15:31 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-680-component-status May 17, 2024 16:11 Destroyed
@RubenSibon RubenSibon closed this May 29, 2024
@VincentSmedinga VincentSmedinga deleted the feat/DES-680-component-status branch May 29, 2024 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants