change prop name to describe where it should be used, not how it looks

This commit is contained in:
Sean Yesmunt 2018-06-15 16:47:18 -04:00
parent 1d8d338629
commit 6f4734b518
3 changed files with 11 additions and 11 deletions

View file

@ -8,7 +8,7 @@ type Props = {
children: ?React.Node, children: ?React.Node,
icon: ?boolean, icon: ?boolean,
direction: string, direction: string,
noPadding?: boolean, onFormField?: boolean,
}; };
class ToolTip extends React.PureComponent<Props> { class ToolTip extends React.PureComponent<Props> {
@ -17,7 +17,7 @@ class ToolTip extends React.PureComponent<Props> {
}; };
render() { render() {
const { children, label, body, icon, direction, noPadding } = this.props; const { children, label, body, icon, direction, onFormField } = this.props;
const tooltipContent = children || label; const tooltipContent = children || label;
@ -30,7 +30,7 @@ class ToolTip extends React.PureComponent<Props> {
'tooltip--right': direction === 'right', 'tooltip--right': direction === 'right',
'tooltip--bottom': direction === 'bottom', 'tooltip--bottom': direction === 'bottom',
'tooltip--left': direction === 'left', 'tooltip--left': direction === 'left',
'tooltip--no-padding': noPadding 'tooltip--on-formfield': onFormField,
})} })}
> >
{tooltipContent} {tooltipContent}

View file

@ -220,7 +220,7 @@ class FilePage extends React.Component<Props> {
onChange={this.onAutoplayChange} onChange={this.onAutoplayChange}
postfix={ postfix={
<ToolTip <ToolTip
noPadding onFormField
label={__('Autoplay')} label={__('Autoplay')}
body={__('Automatically download and play free content.')} body={__('Automatically download and play free content.')}
/> />

View file

@ -4,7 +4,7 @@
} }
// When there is a label for the tooltip and not just using a button or icon // When there is a label for the tooltip and not just using a button or icon
.tooltip.tooltip--label { .tooltip--label {
font-size: 14px; font-size: 14px;
padding-left: $spacing-vertical * 1/3; padding-left: $spacing-vertical * 1/3;
@ -13,11 +13,11 @@
} }
} }
.tooltip.tooltip--no-padding { .tooltip--on-formfield {
padding: 0; padding: 0;
} }
.tooltip.tooltip--icon { .tooltip--icon {
margin-top: 5px; margin-top: 5px;
} }
@ -46,7 +46,7 @@
border-style: solid; border-style: solid;
} }
.tooltip.tooltip--top .tooltip__body { .tooltip--top .tooltip__body {
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
@ -59,7 +59,7 @@
} }
} }
.tooltip.tooltip--right .tooltip__body { .tooltip--right .tooltip__body {
margin-top: -5px; margin-top: -5px;
margin-left: 10px; margin-left: 10px;
@ -71,7 +71,7 @@
} }
} }
.tooltip.tooltip--bottom .tooltip__body { .tooltip--bottom .tooltip__body {
top: 90%; top: 90%;
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
@ -84,7 +84,7 @@
} }
} }
.tooltip.tooltip--left .tooltip__body { .tooltip--left .tooltip__body {
top: -5px; top: -5px;
right: 105%; right: 105%;