Storybook: Fix CSS url() assets

What does this MR do and why?

Resolves the CSS url() assets instead of always rendering a 1x1 Pixel transparent placeholder png.

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. yarn storybook:start
  2. Add an background-image: url(); or background-image: image-url() in CSS (or use my patch below)
  3. http://localhost:9002/?path=/story/vue-shared-crud--default
  4. The background images should be shown

Diff:

diff --git a/app/assets/stylesheets/framework/crud.scss b/app/assets/stylesheets/framework/crud.scss
index 7fff0bc7384e..1365ee574db4 100644
--- a/app/assets/stylesheets/framework/crud.scss
+++ b/app/assets/stylesheets/framework/crud.scss
@@ -6,6 +6,11 @@ $crud-header-min-height: px-to-rem(49px);
 
 .crud-header {
   min-height: $crud-header-min-height;
+  background: url('swipemode_sprites.gif');
+}
+
+.crud-body {
+  background: image-url('emoji.png');
 }
 
 .crud-count .gl-badge {

Related to #499697 (closed)

Edited by Sascha Eggenberger

Merge request reports

Loading