Skip to content

Commit

Permalink
ToolTip: Remove knobs in stories (#46515)
Browse files Browse the repository at this point in the history
  • Loading branch information
mirka authored Dec 21, 2022
1 parent 261e02d commit cbacc8d
Showing 1 changed file with 68 additions and 78 deletions.
146 changes: 68 additions & 78 deletions packages/components/src/tooltip/stories/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
/**
* External dependencies
*/
import styled from '@emotion/styled';
import { text, select, number } from '@storybook/addon-knobs';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
Expand All @@ -17,79 +6,80 @@ import Tooltip from '../';
export default {
title: 'Components/ToolTip',
component: Tooltip,
argTypes: {
delay: { control: 'number' },
position: {
control: {
type: 'select',
options: [
'top left',
'top center',
'top right',
'bottom left',
'bottom center',
'bottom right',
],
},
},
text: { control: 'text' },
},
parameters: {
knobs: { disable: false },
docs: { source: { state: 'open' } },
},
};

export const _default = () => {
const positionOptions = {
'top left': 'top left',
'top center ': 'top center',
'top right': 'top right',
'bottom left': 'bottom left',
'bottom center ': 'bottom center',
'bottom right': 'bottom right',
};
const tooltipText = text( 'Text', 'More information' );
const position = select( 'Position', positionOptions, 'top center' );
const delay = number( 'Delay', 700 );
return (
<>
<Tooltip text={ tooltipText } position={ position } delay={ delay }>
<div
style={ {
margin: '50px auto',
width: '200px',
padding: '20px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Hover for more information
</div>
</Tooltip>
<Tooltip text={ tooltipText } position={ position } delay={ delay }>
<div
style={ {
margin: '50px auto',
width: 'min-content',
padding: '4px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Small target
</div>
</Tooltip>
</>
);
const Template = ( args ) => {
return <Tooltip { ...args } />;
};

const Button = styled.button`
margin: 0 10px;
`;
export const Default = Template.bind( {} );
Default.args = {
text: 'More information',
children: (
<div
style={ {
margin: '50px auto',
width: '200px',
padding: '20px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Hover for more information
</div>
),
};

export const DisabledElement = () => {
const [ showMessage, toggleMessage ] = useState( false );
export const SmallTarget = Template.bind( {} );
SmallTarget.args = {
...Default.args,
children: (
<div
style={ {
margin: '50px auto',
width: 'min-content',
padding: '4px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Small target
</div>
),
};

return (
<>
<Tooltip text="Hey, I am tooltip" position="bottom center">
<Button onClick={ () => toggleMessage( ! showMessage ) }>
Hover me!
</Button>
</Tooltip>
<Tooltip text="Hey, I am tooltip" position="bottom center">
<Button
disabled
onClick={ () => toggleMessage( ! showMessage ) }
>
Hover me, but I am disabled
</Button>
</Tooltip>
<br />
{ showMessage ? <p>Hello World!</p> : null }
</>
);
export const DisabledChild = Template.bind( {} );
DisabledChild.args = {
...Default.args,
children: (
<button
disabled
onClick={ () =>
// eslint-disable-next-line no-alert
window.alert( 'This alert should not be triggered' )
}
>
Hover me, but I am disabled
</button>
),
};

1 comment on commit cbacc8d

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3750689025
📝 Reported issues:

Please sign in to comment.