@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
58 lines (57 loc) • 2 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { expandIconContainerStyle, triggerWrapperStylesWithPadding, disableBlueBorderStyles } from '@atlaskit/editor-common/styles';
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import ItalicIcon from '@atlaskit/icon/core/text-italic';
import { ToolbarType } from './types';
export const DropdownToolbarButton = ({
label,
isReducedSpacing,
isDisabled,
isSelected,
'aria-expanded': ariaExpanded,
onClick,
onKeyDown,
toolbarType,
iconBefore,
activeIconName
}) => {
const reducedSpacing = toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
return jsx(ToolbarButton
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
, {
css: disableBlueBorderStyles,
testId: 'ak-editor-selection-toolbar-format-text-button',
spacing: isReducedSpacing ? reducedSpacing : 'default',
disabled: isDisabled,
selected: isSelected,
"aria-label": label,
"aria-expanded": ariaExpanded,
"aria-haspopup": true,
title: label,
onClick: onClick,
onKeyDown: onKeyDown,
iconBefore: jsx("div", {
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
triggerWrapperStylesWithPadding,
"data-testid": activeIconName ? `editor-toolbar__${activeIconName}` : undefined
}, iconBefore ? iconBefore : jsx(ItalicIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
}), jsx("span", {
css: expandIconContainerStyle
}, jsx(ChevronDownIcon, {
label: "",
color: "currentColor",
size: "small"
})))
});
};