Change description style | Storybook | Page 1

humble gyro Dec 22, 2022, 3:52 PM

#

Hi! I'm new to storybook and I have some problems with creating Docs and Controls. I read off docs and watched different videos, but didn't find an answer.
I want to add some "markup" to description. For example, to see smth like on first screenshot.
But i got smth terrible (2nd screen)
My code:

        size: {
            options: ['small', 'medium'],
            control: 'inline-radio',
            type: 'string',
            defaultValue: { summary: 'medium' },
            description: sizeInfo
        }

export const sizeInfo = `
    The medium button
    \`
    padding: 20px;
    min-height: 64px;
    \`
            
    The small button 
    \`
    padding: 4px 16px;
    max-width: 180px;
    min-height: 50px;
    \`
`;

I tried with interfaces, with PropsTypes and nothing works

icy grotto Dec 22, 2022, 4:44 PM

#

@humble gyro please post support questions in #1035683992684478534 and not cross-post in multiple channels or DM people.

You can add a description using JSDoc style code comments https://github.com/storybookjs/design-system/blob/master/src/components/Avatar.tsx#L151

GitHub

design-system/Avatar.tsx at master · storybookjs/design-system

🗃 Storybook Design System. Contribute to storybookjs/design-system development by creating an account on GitHub.

humble gyro Dec 22, 2022, 5:47 PM

#

@icy grotto It doesn't work. I tried this one.
And even this line will work it doesn't describe how can I add link or highlight element in such comment

keen depot Dec 22, 2022, 6:46 PM

#

What are you trying to make work? What did you do, and what are you expecting to happen?

humble gyro Dec 23, 2022, 7:19 AM

#

@keen depot As I wrote in first message, I expect to get possibilities to markup description like on the first screen.
In the first message you can see code example and on the second screenshot u can see what I get.
Also, as I wrote, I tried comment like in @icy grotto message.

keen depot Dec 23, 2022, 4:24 PM

#

What does your whole codeblock for that file look like?

humble gyro Dec 26, 2022, 2:32 PM

#

import * as React from 'react';
import { viewports } from '../../constants/storybook';
import { Button, ButtonComponent, IButtonComponent } from './index';
import { ThemeProvider } from '../../utils';
import { defaultThemeConfig } from '../../defaultTheme';
// import { useArgs } from '@storybook/api';

import arrow from '../../assets/images/arrows.svg';
import { colors, colorsInfo, sizeInfo2, testString } from './constants';

#

export default {
title: 'Button',
component: ButtonComponent,
parameters: {
viewport: viewports
},
args: {
text: 'Label',
size: 'medium',
backgroundColor: 'primary-default',
textColor: 'on-primary',
hoverColor: 'primary-hovered',
disabled: false,
isLoading: false,
withPulsating: false,
rightIcon: arrow,
centerIcon: arrow,
borderRadius: 'medium',
dataLocator: 'obContinue',
mb: 12,
className: 'fixedButton',
children: <span>Test</span>
},
argTypes: {
size: {
// TODO: change after refactoring default props in the components
options: ['small', 'medium'],
control: 'inline-radio',
type: 'string',
defaultValue: { summary: 'medium' },
description: sizeInfo2
},
backgroundColor: {
options: colors,
control: 'select',
type: 'string',
defaultValue: { summary: 'primary-default' },
description: colorsInfo
// description: testString()
// description: colors
},
textColor: {
options: colors,
control: 'select',
type: 'string',
defaultValue: { summary: 'on-primary' },
description: colorsInfo
},
hoverColor: {
options: colors,
control: 'select',
type: 'string',
defaultValue: { summary: 'primary-hovered' },
description: colorsInfo
},
borderRadius: {
options: ['small', 'medium'],
control: 'inline-radio'
}
}
};

#

export const defaultButton = ({theme = defaultThemeConfig, ...args }: IButtonComponent) => {

return (
    <ThemeProvider theme={theme}>
        <Button {...args} />
    </ThemeProvider>
);

};

#Change description style