change prop name to describe where it should be used, not how it looks
This commit is contained in:
parent
1d8d338629
commit
6f4734b518
3 changed files with 11 additions and 11 deletions
|
@ -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}
|
||||||
|
|
|
@ -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.')}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue