@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
52 lines (51 loc) • 1.54 kB
JavaScript
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { N300, N500 } from '@atlaskit/theme/colors';
const labelStyles = css({
opacity: 0,
display: 'inline-flex',
width: 'max-content',
justifyContent: 'left',
position: 'absolute',
// Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-18px',
'&.inline-extension': {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-17px',
marginLeft: "var(--ds-space-150, 12px)"
},
'&.hovered': {
background: `var(--ds-background-accent-gray-subtle-pressed, ${N300})`,
color: `var(--ds-text-subtle, ${N500})`,
opacity: 1
},
borderRadius: "var(--ds-border-radius, 3px)",
lineHeight: 1
});
const textStyles = css({
fontSize: '14px',
fontWeight: 'normal',
padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
});
export const ExtensionLabel = ({
text,
extensionName,
isNodeHovered,
customContainerStyles
}) => {
const classNames = classnames('extension-title', 'extension-label', {
'inline-extension': extensionName === 'inlineExtension',
hovered: isNodeHovered
});
return jsx("div", {
style: customContainerStyles
}, jsx("span", {
"data-testid": "new-lozenge",
css: labelStyles,
className: classNames
}, jsx("span", {
css: textStyles
}, text)));
};