@atlaskit/editor-plugin-help-dialog
Version:
Help Dialog plugin for @atlaskit/editor-core
63 lines (62 loc) • 2.45 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx, css } from '@emotion/react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import Heading from '@atlaskit/heading';
import CrossIcon from '@atlaskit/icon/core/cross';
import { CloseButton } from '@atlaskit/modal-dialog';
import Tooltip from '@atlaskit/tooltip';
import { header, toolbarButton } from './styles';
const toolbarFocusStyles = css({
// In Firefox/Safari, when user clicks (as suppose to press Enter) on the help quick insert item, focus ring may not be present
// Hence we manually force it
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
'button:focus:not(:focus-visible)': {
outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`,
outlineOffset: "var(--ds-space-025, 2px)"
}
});
const ModalHeader = injectIntl(({
intl: {
formatMessage
},
onClose
}) => {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("div", {
css: header
}, jsx(Heading, {
size: "large"
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.editorHelp)), onClose ? jsx("div", {
css: toolbarFocusStyles
}, jsx(Tooltip, {
content: formatMessage(messages.closeHelpDialog),
position: "top"
}, jsx(CloseButton, {
onClick: onClose,
label: formatMessage(messages.closeHelpDialog)
}))) : jsx("div", null, jsx(ToolbarButton, {
onClick: onClose,
title: formatMessage(messages.closeHelpDialog),
spacing: "compact",
iconBefore: jsx(CrossIcon, {
label: formatMessage(messages.closeHelpDialog),
color: "currentColor",
spacing: "spacious"
})
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
,
css: toolbarButton
})))
);
});
export default ModalHeader;