@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
63 lines (61 loc) • 3 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 -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import { akEditorFloatingDialogZIndex, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
import { MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
// Base styles that don't depend on feature flags
const baseToolbarStyles = css({
position: 'relative',
alignItems: 'center',
boxShadow: 'none',
borderBottom: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
zIndex: akEditorFloatingDialogZIndex,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
display: 'flex',
height: 'var(--ak-editor-fullpage-toolbar-height)',
flexShrink: 0,
backgroundColor: "var(--ds-surface, #FFFFFF)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& object': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
height: '0 !important'
}
});
const flexibleIconSize = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& span svg': {
maxWidth: '100%'
}
});
// box-shadow is overriden by the mainToolbar
const mainToolbarWithKeyline = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
boxShadow: `${"var(--ds-shadow-overflow, 0px 0px 8px #1E1F2128, 0px 0px 1px #1E1F211e)"}`
});
const mainToolbarTwoLineStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
flexWrap: 'wrap',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: `calc(var(--ak-editor-fullpage-toolbar-height) * 2)`
}
});
export const MainToolbarWrapper = ({
showKeyline,
twoLineEditorToolbar,
children,
'data-testid': testId
}) => {
return jsx("div", {
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
css: [baseToolbarStyles, flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
"data-testid": testId
}, children);
};