doc: refactors props for multiple component documentation in storybook #2370
Conversation
✅ Deploy Preview for marvelous-moxie-a6e2fe ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…om brand header component
| readOnly: { type: Boolean }, | ||
| transparent: { type: Boolean }, | ||
| ariaLabelSelected: { type: String }, | ||
| hcmLabelDisabled: { type: String }, |
There was a problem hiding this comment.
we can also add the description for these attributes here :
e.g. for hcmLabelDisabled
https://github.com/telekom/scale/blob/main/packages/components/src/components/dropdown-select/readme.md?plain=1#L17
There was a problem hiding this comment.
my suggestion is to move the userNavigation and iconNavigation that get added here outside the prop table and add them as extra text under the table.
| @@ -26,6 +29,9 @@ export default { | |||
| helperText: { type: String }, | |||
| fullWidth: { type: Boolean, default: false }, | |||
| styles: { type: String }, | |||
| selectedIndex: { type: Number }, | |||
| ariaLabelTranslation: { type: `segment button with $slottedSegments` }, | |||
There was a problem hiding this comment.
also here the prop description could help
| @@ -2,11 +2,12 @@ | |||
| export default { | |||
| name: 'scale-sidebar-nav', | |||
| props: { | |||
| ariaLabel: { type: String }, | |||
| ariaLabelSiderbarNav: { type: String }, | |||
There was a problem hiding this comment.
prop description need to be added for all of these props:
There was a problem hiding this comment.
Please update the descriptions to include the prop description from readme
| @@ -39,7 +39,6 @@ | |||
| :focusable="focusable" | |||
| :decorative="decorative" | |||
| :accessibility-title="accessibilityTitle" | |||
| :styles="styles" | |||
There was a problem hiding this comment.
add the style back here to make the storybook work
| @@ -55,7 +54,6 @@ export default { | |||
| focusable: { type: Boolean, default: false }, | |||
| decorative: { type: Boolean, default: false }, | |||
| accessibilityTitle: { type: String }, | |||
| styles: { type: String } | |||
There was a problem hiding this comment.
add the style back here to make the storybook work
| @@ -32,11 +32,12 @@ export const Template = (args, { argTypes }) => ({ | |||
| template: ` | |||
| <div :style="wrapperStyles"> | |||
| <scale-sidebar-nav | |||
| :arial-label="ariaLabel" | |||
| :arial-label-sidebar-nav="ariaLabelSiderbarNav" | |||
There was a problem hiding this comment.
please add the readme description to the props , as they exist
| preselected: { | ||
| table: { | ||
| disable: true, | ||
| }, | ||
| description: '', | ||
| control: { type: null }, | ||
| }, |
There was a problem hiding this comment.
add this again, as it helps render the component
| @@ -12,7 +12,7 @@ import TabPanel from './TabPanel.vue'; | |||
| <Meta | |||
| title="Components/Tab Navigation" | |||
| component={ScaleTabNav} | |||
| subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }} | |||
There was a problem hiding this comment.
why did you remove the tabHeader section here?
amir-ba
changed the title
…tion in storybook
…in storybook