gitstart-twenty
ba86be2c5b
* Remove the {...props} pattern and props coupling, and create an eslint rule for that
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
* Add another test to the new rule
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
---------
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { rgba } from '../theme/constants/colors';
|
|
|
|
export enum TooltipPosition {
|
|
Top = 'top',
|
|
Left = 'left',
|
|
Right = 'right',
|
|
Bottom = 'bottom',
|
|
}
|
|
|
|
const StyledAppTooltip = styled(Tooltip)`
|
|
backdrop-filter: ${({ theme }) => theme.blur.strong};
|
|
background-color: ${({ theme }) => rgba(theme.color.gray80, 0.8)};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
|
|
box-shadow: ${({ theme }) => theme.boxShadow.light};
|
|
color: ${({ theme }) => theme.grayScale.gray0};
|
|
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
|
|
max-width: 40%;
|
|
overflow: visible;
|
|
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
|
|
word-break: break-word;
|
|
|
|
z-index: ${({ theme }) => theme.lastLayerZIndex};
|
|
`;
|
|
|
|
export type AppToolipProps = {
|
|
className?: string;
|
|
anchorSelect?: string;
|
|
content?: string;
|
|
delayHide?: number;
|
|
offset?: number;
|
|
noArrow?: boolean;
|
|
isOpen?: boolean;
|
|
place?: PlacesType;
|
|
positionStrategy?: PositionStrategy;
|
|
};
|
|
|
|
export const AppTooltip = (props: AppToolipProps) => (
|
|
// eslint-disable-next-line twenty/no-spread-props
|
|
<StyledAppTooltip {...props} />
|
|
);
|