@atlaskit/renderer
Version:
Renderer component
178 lines (177 loc) • 7.92 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
/**
* Emotion branch of the `platform_editor_static_css` experiment.
* Used via `componentWithCondition` in `panel.tsx`.
*
* Cleanup: delete this file once the experiment has shipped.
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration; `jsx` is used as the JSX pragma (see @jsx jsx above) so must be a value import
import { css, jsx } from '@emotion/react';
import { PanelType } from '@atlaskit/adf-schema';
import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { fg } from '@atlaskit/platform-feature-flags';
// New custom icons are a little smaller than predefined icons.
// To fix alignment issues with custom icons, vertical alignment is updated.
const panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
const blockNodesVerticalMargin = '0.75rem';
const akEditorTableCellMinWidth = 48;
const panelBaseStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel': {
borderRadius: "var(--ds-radius-small, 3px)",
margin: `${blockNodesVerticalMargin} 0 0`,
paddingTop: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-200, 16px)",
paddingBottom: "var(--ds-space-100, 8px)",
paddingLeft: "var(--ds-space-100, 8px)",
minWidth: `${akEditorTableCellMinWidth}px`,
display: 'flex',
position: 'relative',
alignItems: 'normal',
wordBreak: 'break-word',
backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
color: 'inherit',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
flexShrink: 0,
height: "var(--ds-space-300, 24px)",
width: "var(--ds-space-300, 24px)",
boxSizing: 'content-box',
paddingRight: "var(--ds-space-100, 8px)",
textAlign: 'center',
userSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none',
MsUserSelect: 'none',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '0.1em',
color: "var(--ds-icon-information, #357DE8)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> span': {
verticalAlign: 'middle',
display: 'inline-flex'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.emoji-common-emoji-sprite': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
verticalAlign: `${panelEmojiSpriteVerticalAlignment}px`
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.emoji-common-emoji-image': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
verticalAlign: `${panelEmojiImageVerticalAlignment}px`,
// Vertical align only works for inline-block elements in Firefox
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'@-moz-document url-prefix()': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
img: {
display: 'inline-block'
}
}
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
margin: `${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"}`,
flex: '1 0 0',
minWidth: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="note"]': {
backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-discovery, #AF59E1)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
'&[data-panel-type="tip"]': {
backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-success, #6A9A23)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="warning"]': {
backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-warning, #E06C00)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="error"]': {
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="success"]': {
backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-success, #6A9A23)"
}
}
}
});
const panelHasNoIconStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="custom"]': {
paddingLeft: "var(--ds-space-150, 12px)",
paddingRight: "var(--ds-space-150, 12px)"
}
}
});
const panelNestedIconStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel__no-icon': {
paddingLeft: "var(--ds-space-150, 12px)",
paddingRight: "var(--ds-space-150, 12px)"
}
});
const nestedPanelStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content .ak-editor-panel': {
border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`
}
});
const panelCustomBackground = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="custom"]': {
backgroundColor: 'var(--ak-renderer-panel-custom-bg-color)'
}
}
});
export const PanelStyledEmotion = ({
backgroundColor,
hasIcon,
...props
}) => {
const customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
return jsx("div", _extends({
style:
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
{
'--ak-renderer-panel-custom-bg-color': customBackgroundColor
},
css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props), props.children);
};
PanelStyledEmotion.displayName = 'PanelStyledEmotion';