@atlaskit/renderer
Version:
Renderer component
185 lines (184 loc) • 8.65 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PanelStyledEmotion = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _consts = require("@atlaskit/editor-shared-styles/consts");
var _editorPalette = require("@atlaskit/editor-palette");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _excluded = ["backgroundColor", "hasIcon"];
/**
* @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.
*/
// 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
// New custom icons are a little smaller than predefined icons.
// To fix alignment issues with custom icons, vertical alignment is updated.
var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;
var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
var blockNodesVerticalMargin = '0.75rem';
var akEditorTableCellMinWidth = 48;
var panelBaseStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel': {
borderRadius: "var(--ds-radius-small, 3px)",
margin: "".concat(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: "".concat(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: "".concat(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: "".concat(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)".concat(" 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)"
}
}
}
});
var panelHasNoIconStyles = (0, _react2.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)"
}
}
});
var panelNestedIconStyles = (0, _react2.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)"
}
});
var nestedPanelStyles = (0, _react2.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)".concat(" solid ", "var(--ds-border, #0B120E24)")
}
});
var panelCustomBackground = (0, _react2.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)'
}
}
});
var PanelStyledEmotion = exports.PanelStyledEmotion = function PanelStyledEmotion(_ref) {
var backgroundColor = _ref.backgroundColor,
hasIcon = _ref.hasIcon,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var customBackgroundColor = backgroundColor ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : undefined;
return (0, _react2.jsx)("div", (0, _extends2.default)({
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'] === _adfSchema.PanelType.CUSTOM && backgroundColor && panelCustomBackground, (0, _platformFeatureFlags.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';