React-styleguidist: Modifier to add whitespace between example components

[sapegin]

Rendering multiple variations of the same component (like a button) on a single line is a very common use case. Right now you have to add some custom styles to add whitespace between components, or use spaces — both solutions aren’t perfect.

Add a new modifier (like static or noeditor), spaced (?) that will add styles like:

// Almost pseudocode
.example > *:not(:last-child) {
  margin-right: 8px;
}

[syn228]

Is this issue still open? I would like to try contributing for the first time!

[sapegin]

Yeah, and I'd make it a bit more useful than in my initial example:

.example {
  margin: -8px;
}
.example > * {
  padding: 8px;
}

The actual code will be more complex of course ;-)

[apennell]

I'd love to give this a shot!

[sapegin]

@apennell That would be awesome!

[apennell]

FYI, I'm slowly working through this as I have time 👌

[apennell]

@sapegin I'm close! Here's a screenshot of the output:

I added the padded class to the container with the following jss:

({
  padded : {
    '& > *' : {
      marginLeft: '-8px',
      marginRight: '-8px',

      '& > *': {
        marginRight: '8px',
        marginLeft: '8px',
      },
    },
  },
});

As you can see in the screenshot, the button with the padded class is taking on a different font. Inspecting the elements, it looks like the buttons are taking font: 400 11px system-ui; from the user agent stylesheet. Adding .rsg--padded-40 > * > * to these buttons applies that larger compiled block off css (visible in the console styles section in the screenshot), which has font: inherit and applies the inherited Times font-family.

Will this be an issue, and if so, do you know how I can resolve this? Is there a better approach I could have taken? This is what I have done so far: https://github.com/apennell/react-styleguidist/commit/1c20a9c68e2698cec88fb760762e2f46dd1d72b3.

[sapegin]

Awesome work! 🦄

Try to add isolate: false to both style blocks, this should disable this big block of CSS you see.

https://react-styleguidist.js.org/docs/development.html#styles

[styleguidist-bot]

:tada: This issue has been resolved in version 10.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: