-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ResizableBox: Remove knobs in stories #46774
Changes from 1 commit
74d0ac4
e2919e9
05dba41
7cd7eab
f2f6f16
4cc4395
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import type { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import ResizableBox from '..'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useState } from '@wordpress/element'; | ||
|
||
const meta: ComponentMeta< typeof ResizableBox > = { | ||
title: 'Components/ResizableBox', | ||
component: ResizableBox, | ||
argTypes: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should probably hide There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. True 👍 |
||
__experimentalShowTooltip: { control: 'boolean' }, | ||
minHeight: { control: 'number' }, | ||
minWidth: { control: 'number' }, | ||
onResizeStop: { action: 'onResizeStop' }, | ||
showHandle: { control: 'boolean' }, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do you know why are these props not shown by default in the Storybook docs? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good question. I tweaked the export so at least our first-party types are visible ✅ However, all the props coming from the upstream There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds like a plan |
||
}, | ||
parameters: { | ||
controls: { expanded: true }, | ||
docs: { source: { state: 'open' } }, | ||
}, | ||
}; | ||
export default meta; | ||
|
||
const Template: ComponentStory< typeof ResizableBox > = ( { | ||
onResizeStop, | ||
...props | ||
} ) => { | ||
const [ { height, width }, setAttributes ] = useState( { | ||
height: 200, | ||
width: 400, | ||
} ); | ||
|
||
return ( | ||
<ResizableBox | ||
{ ...props } | ||
size={ { | ||
height, | ||
width, | ||
} } | ||
onResizeStop={ ( event, direction, elt, delta ) => { | ||
onResizeStop?.( event, direction, elt, delta ); | ||
setAttributes( { | ||
height: height + delta.height, | ||
width: width + delta.width, | ||
Comment on lines
+50
to
+51
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The |
||
} ); | ||
} } | ||
/> | ||
); | ||
}; | ||
|
||
export const Default = Template.bind( {} ); | ||
Default.args = { | ||
children: ( | ||
<div | ||
style={ { | ||
background: '#eee', | ||
display: 'flex', | ||
height: '100%', | ||
width: '100%', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
} } | ||
> | ||
Resize | ||
</div> | ||
), | ||
}; | ||
|
||
/** | ||
* The `enable` prop can be used to disable resizing in specific directions. | ||
*/ | ||
export const DisabledDirections = Template.bind( {} ); | ||
DisabledDirections.args = { | ||
...Default.args, | ||
enable: { | ||
top: false, | ||
right: true, | ||
bottom: true, | ||
left: false, | ||
topRight: false, | ||
bottomRight: true, | ||
bottomLeft: false, | ||
topLeft: false, | ||
}, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tweaked the component export so we can use the TypeScript data in the Storybook props table.