Skip to content

chore(deps): upgrade Storybook and storybook-readme

Paul Gascou-Vaillancourt requested to merge upgrade-storybook into master

What does this MR do?

This upgrades Storybook from v5.3.21 to v6.1.14 and storybook-readme from v4.0.5 to v5.0.9. Those are major upgrades. Everything seems to be working as expected except for the following:

  • storybook-readme seems to be handling footers differently. It was previously possible to provide a component to be rendered as the footer, but it looks like we can only pass plain HTML now (ref). This makes the FooterPreview option irrelevant in our case as we need to render a full-blown Vue component to display examples. However, the StoryPreview option still accepts a component (ref). So I went ahead and moved all of our custom rendering into the StoryPreview option, which results in a layout that slightly different than before. Specifically, READMEs are now displayed at the bottom of the stories. I'm hoping to get rid of storybook-readme soon after this is merged (eg !1958 (closed)), so this might be acceptable? A few examples:
Before After
alert_before alert_after
badge_before badge_after
  • There seem to be new styling around stories, which resulted in visual diffs when running storyshots. I went ahead and deleted all screenshots and rebuilt them all. I believe this should be safe to do since there is no change to the components themselves, so we're only establishing a new baseline. This has the added benefit of cleaning up a few obsolete screenshots that hadn't been removed.

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Paul Gascou-Vaillancourt

Merge request reports