@atlaskit/renderer 114.3.0 → 114.3.2

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -6,16 +6,23 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import { default as React, Fragment, useCallback, useContext, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
-import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
+const uiMediaSingleBaseStyles = css({
+  transition: 'all 0.1s linear'
+});
+const uiMediaSingleLayoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 const isMediaElement = media => {
   if (!media) {
     return false;

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -15,8 +15,9 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-const navigationStyles = css`
+const navigationStylesOld = css`
 	${sharedMultiBodiedExtensionStyles.mbeNavigation};
 	margin-left: 0 !important;
 	margin-right: 0 !important;
@@ -26,8 +27,35 @@ const navigationStyles = css`
 	}
 `;
 
+// localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
+const navigationStylesNew = css({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-margins': {
+    margin: "var(--ds-space-negative-100, -8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginLeft: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginRight: '0 !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.mbe-add-tab-button, .mbe-remove-tab': {
+    display: 'none'
+  }
+});
+
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-const containerStyles = css`
+const containerStylesOld = css`
 	${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
 	.ak-renderer-extension {
 		margin-top: 0 !important;
@@ -40,6 +68,57 @@ const containerStyles = css`
 		}
 	}
 `;
+
+// localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+const containerStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  background: 'transparent !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  'padding:': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    left: `${"var(--ds-space-100, 8px)"} !important`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    right: `${"var(--ds-space-100, 8px)"} !important`
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-padding': {
+    paddingBottom: 0
+  },
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-renderer-extension': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout="full-width"], [data-layout="wide"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.multiBodiedExtension-navigation': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      borderRight: `3px solid ${`var(--ds-border, ${N40})`} !important`
+    }
+  }
+});
 const MultiBodiedExtensionChildrenContainer = ({
   children
 }) => {
@@ -56,7 +135,7 @@ const MultiBodiedExtensionNavigation = ({
   return jsx("nav", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension-navigation",
-    css: navigationStyles,
+    css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
@@ -164,7 +243,7 @@ const MultiBodiedExtension = props => {
   return jsx("section", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--container",
-    css: [containerStyles, containerActiveFrameStyles],
+    css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex,
     "data-layout": layout

package/dist/es2019/react/nodes/panel.js

@@ -8,13 +8,155 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { PanelSharedCssClassName, panelSharedStylesWithoutPrefix } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import { fg } from '@atlaskit/platform-feature-flags';
 import EmojiItem from './emoji';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-const PanelStyled = ({
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+// 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-border-radius, 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, #DEEBFF)",
+    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, #1D7AFC)",
+      // 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',
+      /*
+      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
+      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
+      */
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&[data-panel-type="note"]': {
+      backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-discovery, #8270DB)"
+      }
+    },
+    // 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, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    },
+    // 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="warning"]': {
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-warning, #E56910)"
+      }
+    },
+    // 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="error"]': {
+      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
+      // 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, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    '&[data-panel-type="success"]': {
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.ak-editor-panel__icon': {
+        color: "var(--ds-icon-success, #22A06B)"
+      }
+    }
+  }
+});
+const panelHasNoIconStyles = css({
+  // 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
+  '&.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 panelCustomBackground = css({
+  // 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
+  '&.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)'
+    }
+  }
+});
+const PanelStyledOld = ({
   backgroundColor,
   hasIcon,
   ...props
@@ -51,6 +193,24 @@ const PanelStyled = ({
     }, props), props.children)
   );
 };
+const PanelStyledNew = ({
+  backgroundColor,
+  hasIcon,
+  ...props
+}) => {
+  const customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) : backgroundColor;
+  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, editorExperiment('nested-dnd', true) && panelNestedIconStyles]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+const PanelStyled = componentWithFG('platform_editor_emotion_refactor_renderer', PanelStyledNew, PanelStyledOld);
 PanelStyled.displayName = 'PanelStyled';
 const panelIcons = {
   info: PanelInfoIcon,

package/dist/es2019/react/nodes/table/sticky.js

@@ -13,6 +13,7 @@ import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 export const tableStickyPadding = 8;
 const modeSpecficStyles = {
   none: css({
@@ -26,6 +27,38 @@ const modeSpecficStyles = {
   })
 };
 
+// refactored based on fixedTableDivStaticStyles
+// TODO: DSP-4123 - Quality ticket
+const fixedTableDivStaticStylesNew = css({
+  zIndex: 'var(--ak-renderer-sticky-header-zindex)',
+  // 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 -- Ignored via go/DSP-18766
+  [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+    marginTop: 0,
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    tr: {
+      background: "var(--ds-surface, white)"
+    }
+  },
+  borderTop: `${tableStickyPadding}px solid ${"var(--ds-surface, white)"}`,
+  background: "var(--ds-surface-overlay, white)",
+  boxShadow: `0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  "div[data-expanded='false'] &": {
+    display: 'none'
+  },
+  // 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 -- Ignored via go/DSP-18766
+  [`& .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after, & .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before`]: {
+    top: '0px',
+    height: '100%'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    zIndex: 'var(--ak-renderer-sticky-header-zindex)'
+  }
+});
+
 // TODO: DSP-4123 - Quality ticket
 const fixedTableDivStaticStyles = (top, width, allowTableResizing) => {
   let stickyHeaderZIndex;
@@ -69,7 +102,7 @@ const fixedTableDivStaticStyles = (top, width, allowTableResizing) => {
     }
   });
 };
-const FixedTableDiv = props => {
+const FixedTableDivOld = props => {
   const {
     top,
     wrapperWidth,
@@ -90,6 +123,36 @@ const FixedTableDiv = props => {
     css: fixedTableCss
   }), props.children);
 };
+const FixedTableDivNew = props => {
+  const {
+    top,
+    wrapperWidth,
+    mode,
+    allowTableResizing
+  } = props;
+  let stickyHeaderZIndex;
+  if (allowTableResizing) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+  }
+  const attrs = {
+    mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
+    css: [fixedTableDivStaticStylesNew, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    style: {
+      '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
+      width: `${wrapperWidth}px`,
+      top: top ? `${top}px` : undefined
+    }
+  }), props.children);
+};
+const FixedTableDiv = componentWithFG('platform_editor_emotion_refactor_renderer', FixedTableDivNew, FixedTableDivOld);
 export const StickyTable = ({
   top,
   left,

package/dist/es2019/ui/Expand.js

@@ -9,7 +9,7 @@ import React, { useCallback, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { clearNextSiblingMarginTopStyle, ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, sharedExpandStyles, WidthProvider } from '@atlaskit/editor-common/ui';
-import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
@@ -17,11 +17,12 @@ import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 const titleStyles = css({
   outline: 'none',
   border: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(14),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: `${14 / 16}rem`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
   lineHeight: akEditorLineHeight,
   fontWeight: "var(--ds-font-weight-regular, 400)",
@@ -31,7 +32,92 @@ const titleStyles = css({
   padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
   textAlign: 'left'
 });
-const Container = props => {
+const containerStyles = css({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  minHeight: '25px',
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: `background 0.3s ${akEditorSwoopCubicBezier}, border-color 0.3s ${akEditorSwoopCubicBezier}`,
+  padding: "var(--ds-space-0, 0px)",
+  paddingBottom: "var(--ds-space-0, 0px)",
+  marginTop: "var(--ds-space-050, 0.25rem)",
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  'td > :not(style):first-child, td > style:first-child + *': {
+    marginTop: 0
+  }
+});
+const containerStylesExpanded = css({
+  background: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  borderColor: "var(--ds-border, #091E4224)"
+});
+const containerStylesFocused = css({
+  borderColor: "var(--ds-border-focused, #388BFF)"
+});
+const containerStylesDataNodeTypeExpand = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  marginLeft: `-${akLayoutGutterOffset}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  marginRight: `-${akLayoutGutterOffset}px`
+});
+const titleContainerStyles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  background: 'none',
+  border: 'none',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: `${14 / 16}rem`,
+  width: '100%',
+  color: "var(--ds-text-subtle, #44546F)",
+  overflow: 'hidden',
+  cursor: 'pointer',
+  padding: "var(--ds-space-100, 8px)",
+  '&:focus': {
+    outline: 0
+  }
+});
+const titleContainerStylesExpanded = css({
+  paddingBottom: "var(--ds-space-0, 0px)"
+});
+const contentContainerStyles = css({
+  paddingTop: "var(--ds-space-0, 0px)",
+  marginLeft: "var(--ds-space-050, 4px)",
+  paddingRight: "var(--ds-space-200, 16px)",
+  paddingLeft: "var(--ds-space-400, 32px)",
+  display: 'flow-root',
+  visibility: 'hidden',
+  // The follow rules inside @supports block are added as a part of ED-8893
+  // The fix is targeting mobile bridge on iOS 12 or below,
+  // We should consider remove this fix when we no longer support iOS 12
+  '@supports not (display: flow-root)': {
+    width: '100%',
+    boxSizing: 'border-box'
+  }
+});
+const contentContainerStylesExpanded = css({
+  paddingTop: "var(--ds-space-100, 8px)",
+  visibility: 'visible'
+});
+const contentContainerStylesNotExpanded = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.expand-content-wrapper, .nestedExpand-content-wrapper': {
+    /* We visually hide the content here to preserve the content during copy+paste */
+    /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
+    width: '100%',
+    display: 'block',
+    height: 0,
+    overflow: 'hidden',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    userSelect: 'none'
+  }
+});
+const ContainerOld = props => {
   const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
 
@@ -49,7 +135,15 @@ const Container = props => {
     }, props), props.children)
   );
 };
-const TitleContainer = props => {
+const ContainerNew = props => {
+  return jsx("div", _extends({
+    css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+const Container = componentWithFG('platform_editor_emotion_refactor_renderer', ContainerNew, ContainerOld);
+const TitleContainerOld = props => {
   const paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
 
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
@@ -64,15 +158,31 @@ const TitleContainer = props => {
   } = props;
   return (
     // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-html-button
     jsx("button", _extends({
       type: "button",
       css: styles
     }, buttonProps), props.children)
   );
 };
+const TitleContainerNew = props => {
+  const {
+    expanded,
+    ...buttonProps
+  } = props;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/no-html-button
+    jsx("button", _extends({
+      type: "button",
+      css: [titleContainerStyles, expanded && titleContainerStylesExpanded]
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, buttonProps), props.children)
+  );
+};
+const TitleContainer = componentWithFG('platform_editor_emotion_refactor_renderer', TitleContainerNew, TitleContainerOld);
 TitleContainer.displayName = 'TitleContainerButton';
-const ContentContainer = props => {
+const ContentContainerOld = props => {
   const sharedContentStyles = sharedExpandStyles.contentStyles(props);
   const visibility = props.expanded ? 'visible' : 'hidden';
 
@@ -84,7 +194,6 @@ const ContentContainer = props => {
 		visibility: ${visibility};
 	`;
   return (
-    // eslint-disable-next-line
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", _extends({
@@ -92,6 +201,14 @@ const ContentContainer = props => {
     }, props), props.children)
   );
 };
+const ContentContainerNew = props => {
+  return jsx("div", _extends({
+    css: [contentContainerStyles, props.expanded && contentContainerStylesExpanded, !props.expanded && contentContainerStylesNotExpanded]
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+const ContentContainer = componentWithFG('platform_editor_emotion_refactor_renderer', ContentContainerNew, ContentContainerOld);
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;

package/dist/es2019/ui/Renderer/index.js

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.3.0";
+const packageVersion = "114.3.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',