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

chore(tags): migrate Tag examples to storybook #987

Merged
merged 3 commits into from Jan 20, 2021

Conversation

austingreendev
Copy link
Contributor

@austingreendev austingreendev commented Jan 16, 2021

Description

This PR migrates the react-tags documentation to Storybook.

Checklist

  • πŸ‘Œ design updates are Garden Designer approved (add the
    designer as a reviewer)
  • 🌐 demo is up-to-date (yarn start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • 🀘 renders as expected with Bedrock CSS (?bedrock)
  • β™Ώ analyzed via axe and evaluated using VoiceOver
  • πŸ’‚β€β™‚οΈ includes new unit tests
  • πŸ“ tested in Chrome, Firefox, Safari, Edge, and IE11

@coveralls
Copy link

coveralls commented Jan 16, 2021

Coverage Status

Coverage remained the same at 95.727% when pulling 2b88e85 on agreen/tags-storybook into c840956 on main.

@zendesk-garden zendesk-garden temporarily deployed to staging January 16, 2021 00:41 Inactive
packages/tags/stories/examples/Advanced.tsx Outdated Show resolved Hide resolved
packages/tags/stories/examples/CustomHue.tsx Show resolved Hide resolved
>
{includeAvatar && (
<Tag.Avatar>
<img alt="" src={`images/avatar-${Math.floor(Math.random() * 70 + 1)}.png`} />
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 simplify the code (and deployment size) by selecting a single, fixed avatar.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated to a single image.

docs: {
storyDescription: `
The following examples demonstrates using the \`isRegular\` prop combined with
mixed weight content. Check out the code for details.
Copy link
Member

Choose a reason for hiding this comment

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

The text indicates that I can check out the code, but the "Show code" button is disabled.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Was able to track it down to this bug storybookjs/storybook#13362

I've updated this story as well as 2 "No code available" failures in the Avatar examples.

Copy link
Member

@jzempel jzempel left a comment

Choose a reason for hiding this comment

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

[nit] the "Advanced" story would probably read better if it were named "Truncation".

@austingreendev
Copy link
Contributor Author

Updated to "Truncation". Much better now.

@zendesk-garden zendesk-garden temporarily deployed to staging January 20, 2021 00:27 Inactive
@austingreendev austingreendev merged commit 864f04e into main Jan 20, 2021
@austingreendev austingreendev deleted the agreen/tags-storybook branch January 20, 2021 01:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

None yet

4 participants