@atlaskit/emoji 69.2.1 → 69.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 69.3.0
+
+### Minor Changes
+
+- [#165300](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165300)
+  [`14a650aa14dfb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14a650aa14dfb) -
+  [ux] add new optional xcss prop on EmojiPlaceholder to allow custom background colors on the
+  loading skeletons for emojis. Changes the ReactionSummaryButton to use a lighter shade of grey.
+
 ## 69.2.1
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -31,7 +31,8 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     showTooltip = props.showTooltip,
     representation = props.representation,
     _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading;
+    loading = _props$loading === void 0 ? false : _props$loading,
+    xcss = props.xcss;
   var scaledWidth;
   var scaledHeight;
   if (representation && size) {
@@ -57,7 +58,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !(0, _platformFeatureFlags.fg)('cc_complexit_fe_remove_emoji_animation') && "", loading && !(0, _platformFeatureFlags.fg)('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1ruskq2v _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", _styles.placeholder]),
+    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !(0, _platformFeatureFlags.fg)('cc_complexit_fe_remove_emoji_animation') && "", loading && !(0, _platformFeatureFlags.fg)('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1ruskq2v _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", [_styles.placeholder, (0, _platformFeatureFlags.fg)('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
     title: showTooltip ? shortName : '',
     style: _objectSpread(_objectSpread({}, style), {}, {
       "--_12ncegi": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20A, ")"))

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -28,22 +28,23 @@ var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEm
   ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
   return ResourcedEmojiComponentRenderStatesEnum;
 }(ResourcedEmojiComponentRenderStatesEnum || {});
-var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
-  var emojiProvider = props.emojiProvider,
-    emojiId = props.emojiId,
-    _props$showTooltip = props.showTooltip,
-    showTooltip = _props$showTooltip === void 0 ? false : _props$showTooltip,
-    _props$customFallback = props.customFallback,
-    customFallback = _props$customFallback === void 0 ? undefined : _props$customFallback,
-    _props$fitToHeight = props.fitToHeight,
-    fitToHeight = _props$fitToHeight === void 0 ? _constants.defaultEmojiHeight : _props$fitToHeight,
-    _props$optimistic = props.optimistic,
-    optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
-    _props$optimisticImag = props.optimisticImageURL,
-    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
-    editorEmoji = props.editorEmoji,
-    onEmojiLoadSuccess = props.onEmojiLoadSuccess,
-    onEmojiLoadFail = props.onEmojiLoadFail;
+var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+    _ref$customFallback = _ref.customFallback,
+    customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
+    _ref$fitToHeight = _ref.fitToHeight,
+    fitToHeight = _ref$fitToHeight === void 0 ? _constants.defaultEmojiHeight : _ref$fitToHeight,
+    _ref$optimistic = _ref.optimistic,
+    optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
+    _ref$optimisticImageU = _ref.optimisticImageURL,
+    optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
+    editorEmoji = _ref.editorEmoji,
+    placeholderXcss = _ref.placeholderXcss,
+    onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
+    onEmojiLoadFail = _ref.onEmojiLoadFail;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -64,7 +65,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     resolvedEmojiProvider = _useState8[0],
     setResolvedEmojiProvider = _useState8[1];
   var fetchOrGetEmoji = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_emojiProvider, emojiId) {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
         reason,
         foundEmoji,
@@ -139,7 +140,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), [onEmojiLoadFail]);
   (0, _react.useEffect)(function () {
@@ -231,7 +232,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || _constants.defaultEmojiHeight,
-    loading: true
+    loading: true,
+    xcss: placeholderXcss
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/_react.default.createElement(_Emoji.default, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.2.1"
+      packageVersion: "69.3.0"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiPlaceholder.js

@@ -16,7 +16,8 @@ const EmojiPlaceholder = props => {
     size = defaultEmojiHeight,
     showTooltip,
     representation,
-    loading = false
+    loading = false,
+    xcss
   } = props;
   let scaledWidth;
   let scaledHeight;
@@ -43,7 +44,7 @@ const EmojiPlaceholder = props => {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1rus1j54 _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", placeholder]),
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1rus1j54 _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", [placeholder, fg('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     title: showTooltip ? shortName : ''

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -13,19 +13,19 @@ var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEm
   ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
   return ResourcedEmojiComponentRenderStatesEnum;
 }(ResourcedEmojiComponentRenderStatesEnum || {});
-export const ResourcedEmojiComponent = props => {
-  const {
-    emojiProvider,
-    emojiId,
-    showTooltip = false,
-    customFallback = undefined,
-    fitToHeight = defaultEmojiHeight,
-    optimistic = false,
-    optimisticImageURL = undefined,
-    editorEmoji,
-    onEmojiLoadSuccess,
-    onEmojiLoadFail
-  } = props;
+export const ResourcedEmojiComponent = ({
+  emojiProvider,
+  emojiId,
+  showTooltip = false,
+  customFallback = undefined,
+  fitToHeight = defaultEmojiHeight,
+  optimistic = false,
+  optimisticImageURL = undefined,
+  editorEmoji,
+  placeholderXcss,
+  onEmojiLoadSuccess,
+  onEmojiLoadFail
+}) => {
   const {
     shortName,
     id,
@@ -187,7 +187,8 @@ export const ResourcedEmojiComponent = props => {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || defaultEmojiHeight,
-    loading: true
+    loading: true,
+    xcss: placeholderXcss
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.2.1",
+    packageVersion: "69.3.0",
     ...attributes
   }
 });

package/dist/esm/components/common/EmojiPlaceholder.js

@@ -22,7 +22,8 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     showTooltip = props.showTooltip,
     representation = props.representation,
     _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading;
+    loading = _props$loading === void 0 ? false : _props$loading,
+    xcss = props.xcss;
   var scaledWidth;
   var scaledHeight;
   if (representation && size) {
@@ -48,7 +49,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1ruskq2v _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", placeholder]),
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkosqtm _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "", loading && !fg('cc_complexit_fe_remove_emoji_animation') && "_1kt9b3bt _cfu11ule _1cs8stnw _1ruskq2v _kfgt1osq _1mp41osq _1088zfu5 _joxl9cwz _zo24167c _evp612c5", [placeholder, fg('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
     title: showTooltip ? shortName : '',
     style: _objectSpread(_objectSpread({}, style), {}, {
       "--_12ncegi": ix("var(--ds-background-neutral, ".concat(N20A, ")"))

package/dist/esm/components/common/ResourcedEmojiComponent.js

@@ -19,22 +19,23 @@ var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEm
   ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
   return ResourcedEmojiComponentRenderStatesEnum;
 }(ResourcedEmojiComponentRenderStatesEnum || {});
-export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
-  var emojiProvider = props.emojiProvider,
-    emojiId = props.emojiId,
-    _props$showTooltip = props.showTooltip,
-    showTooltip = _props$showTooltip === void 0 ? false : _props$showTooltip,
-    _props$customFallback = props.customFallback,
-    customFallback = _props$customFallback === void 0 ? undefined : _props$customFallback,
-    _props$fitToHeight = props.fitToHeight,
-    fitToHeight = _props$fitToHeight === void 0 ? defaultEmojiHeight : _props$fitToHeight,
-    _props$optimistic = props.optimistic,
-    optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
-    _props$optimisticImag = props.optimisticImageURL,
-    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
-    editorEmoji = props.editorEmoji,
-    onEmojiLoadSuccess = props.onEmojiLoadSuccess,
-    onEmojiLoadFail = props.onEmojiLoadFail;
+export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+    _ref$customFallback = _ref.customFallback,
+    customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
+    _ref$fitToHeight = _ref.fitToHeight,
+    fitToHeight = _ref$fitToHeight === void 0 ? defaultEmojiHeight : _ref$fitToHeight,
+    _ref$optimistic = _ref.optimistic,
+    optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
+    _ref$optimisticImageU = _ref.optimisticImageURL,
+    optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
+    editorEmoji = _ref.editorEmoji,
+    placeholderXcss = _ref.placeholderXcss,
+    onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
+    onEmojiLoadFail = _ref.onEmojiLoadFail;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -55,7 +56,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     resolvedEmojiProvider = _useState8[0],
     setResolvedEmojiProvider = _useState8[1];
   var fetchOrGetEmoji = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
         reason,
         foundEmoji,
@@ -130,7 +131,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), [onEmojiLoadFail]);
   useEffect(function () {
@@ -222,7 +223,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || defaultEmojiHeight,
-    loading: true
+    loading: true,
+    xcss: placeholderXcss
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,

package/dist/esm/util/analytics/analytics.js

@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.2.1"
+      packageVersion: "69.3.0"
     }, attributes)
   };
 };

package/dist/types/components/common/EmojiPlaceholder.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiImageRepresentation } from '../../types';
 export interface Props {
     shortName: string;
@@ -6,6 +7,7 @@ export interface Props {
     showTooltip?: boolean;
     representation?: EmojiImageRepresentation;
     loading?: boolean;
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export declare const emojiPlaceholderTestId: (shortName: string) => string;
 declare const EmojiPlaceholder: (props: Props) => JSX.Element;

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
@@ -44,6 +45,10 @@ export interface BaseResourcedEmojiProps {
      * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
      */
     editorEmoji?: true;
+    /**
+     * allows custom styling to the placeholder component while the emoji is loading.
+     */
+    placeholderXcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**
@@ -59,5 +64,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadFail?: EmojiLoadFailCallback;
 }
-export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/dist/types-ts4.5/components/common/EmojiPlaceholder.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiImageRepresentation } from '../../types';
 export interface Props {
     shortName: string;
@@ -6,6 +7,7 @@ export interface Props {
     showTooltip?: boolean;
     representation?: EmojiImageRepresentation;
     loading?: boolean;
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export declare const emojiPlaceholderTestId: (shortName: string) => string;
 declare const EmojiPlaceholder: (props: Props) => JSX.Element;

package/dist/types-ts4.5/components/common/ResourcedEmojiComponent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
@@ -44,6 +45,10 @@ export interface BaseResourcedEmojiProps {
      * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
      */
     editorEmoji?: true;
+    /**
+     * allows custom styling to the placeholder component while the emoji is loading.
+     */
+    placeholderXcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**
@@ -59,5 +64,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadFail?: EmojiLoadFailCallback;
 }
-export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.2.1",
+	"version": "69.3.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,7 +50,7 @@
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -138,6 +138,9 @@
 		},
 		"cc_complexit_fe_remove_emoji_animation": {
 			"type": "boolean"
+		},
+		"platform_reactions_placeholder_custom_background": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {