Feature request: Improve background transition effect and swatch value output

[josefvn]

I love this Storybook addon, and I would like to make a feature request...

I'm using the background addon as follows:

storiesOf('MyComponent', module)
    .addDecorator(backgrounds([
        {
            name: 'Cape Town',
            value: 'url(cape-town.jpg) no-repeat center center',
            default: true,
        },
        { name: 'None', value: 'transparent' },
        { name: 'Light Blue', value: 'lightblue' },
        { name: 'Gray', value: 'lightgray' },
        {
            name: 'Stripey',
            value: 'repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px )',
        },
    ]))
    .add('MyComponent', () => (
        <MyComponent />
    ));

With the above, I can for set a background image, or pin stripe background image using repeating gradients as a background.

However, with the center center on background, the transition makes switching from background to background rather weird. Maybe transition should be set to background-color only, as it tries to sort of swoop into its location? Perhaps add a param to turn the transition on/off.

Another observation I have made, is that the Swatch panel shows all the CSS for the given swatch item next to the name, so in my example above, for the 'Stripey' background I can see the entire CSS snippet output next to the name, and due to it wrapping, it looks rather ugly.

Take a peek at the attached image.