@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
55 lines (54 loc) • 1.69 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import Avatar from '@atlaskit/avatar';
const itemWrapperStyles = css({
display: 'flex',
alignItems: 'center',
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
small: {
margin: 0,
display: 'block',
color: 'currentColor'
}
});
const iconWrapperStyles = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1
});
// Adding 4px instead of 3px, since Design tokens supports space sizes in 2 multiples only Ref: https://atlassian.design/components/tokens/all-tokens
const iconWrapperMenuStyles = css({
alignSelf: 'flex-start',
marginTop: "var(--ds-space-050, 4px)"
});
const getIconSize = (context, description) => {
if (context === 'value' || !description) {
return 'xsmall';
}
return 'small';
};
export const formatOptionLabel = ({
label,
icon,
description
}, {
context
}) => {
return jsx("div", {
css: itemWrapperStyles
}, jsx("span", {
css: [iconWrapperStyles, context === 'menu' && iconWrapperMenuStyles]
}, typeof icon === 'string' ? jsx(Avatar, {
src: icon,
size: getIconSize(context, description),
appearance: "square"
}) : icon), jsx("div", {
style: {
paddingLeft: icon ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
},
"data-testid": "extension-option-label"
}, label, description && context !== 'value' && jsx("small", null, description)));
};