@atlaskit/flag 15.9.4 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/flag
 
+## 16.1.0
+
+### Minor Changes
+
+- [#118326](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118326)
+  [`47ed83a62335a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47ed83a62335a) -
+  We are testing improvements behind a feature flag. Flags with default icons, and support for icons
+  with no spacing. If this fix is successful it will be available in a later release.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.9.4
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.9.4";
+var packageVersion = "16.1.0";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -13,6 +13,7 @@ var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _constants = require("./constants");
@@ -37,12 +38,21 @@ var descriptionStyles = (0, _react2.css)({
   overflow: 'auto',
   overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
 });
-var iconWrapperStyles = (0, _react2.css)({
+var oldIconWrapperStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'start',
   flexShrink: 0,
   color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
 });
+var iconWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  minWidth: '24px',
+  minHeight: '24px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
+});
 var flagStyles = (0, _primitives.xcss)({
   boxShadow: 'elevation.shadow.overlay',
   borderRadius: 'border.radius.100',
@@ -57,7 +67,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.4"
+  packageVersion: "16.1.0"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -160,6 +170,7 @@ var Flag = function Flag(props) {
   };
   var textColor = _theme.flagTextColor[appearance];
   var iconColor = _theme.flagIconColor[appearance];
+  var iconGlyph = _theme.flagIconGlyph[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
@@ -173,14 +184,15 @@ var Flag = function Flag(props) {
     padding: "space.200",
     xcss: flagStyles
   }, (0, _react2.jsx)(_primitives.Inline, {
-    alignBlock: "stretch",
+    alignBlock: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? 'start' : 'stretch',
     space: "space.200"
   }, (0, _react2.jsx)("div", {
-    css: iconWrapperStyles
+    css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? iconWrapperStyles : oldIconWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    style: (0, _defineProperty2.default)({}, CSS_VAR_ICON_COLOR, iconColor)
-  }, icon), (0, _react2.jsx)("span", {
+    style: (0, _defineProperty2.default)({}, CSS_VAR_ICON_COLOR, iconColor),
+    "data-testid": testId && "".concat(testId, "-icon-container")
+  }, icon || (iconGlyph && (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? iconGlyph : null)), (0, _react2.jsx)("span", {
     css: transitionStyles
   }, (0, _react2.jsx)(_primitives.Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM

package/dist/cjs/theme.js

@@ -1,9 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flagTextColorToken = exports.flagTextColor = exports.flagIconColor = exports.flagBackgroundColor = exports.actionTextColor = exports.actionBackgroundColor = void 0;
+exports.flagTextColorToken = exports.flagTextColor = exports.flagIconGlyph = exports.flagIconColor = exports.flagBackgroundColor = exports.actionTextColor = exports.actionBackgroundColor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _informationInfo = _interopRequireDefault(require("@atlaskit/icon/core/migration/information--info"));
+var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
 var _colors = require("@atlaskit/theme/colors");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -15,11 +21,38 @@ var flagBackgroundColor = exports.flagBackgroundColor = {
   warning: 'color.background.warning.bold'
 };
 var flagIconColor = exports.flagIconColor = {
-  error: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-  info: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-  normal: "var(--ds-icon-subtle, ".concat(_colors.N500, ")"),
-  success: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-  warning: "var(--ds-icon-warning-inverse, ".concat(_colors.N700, ")")
+  error: "var(--ds-icon-inverse, #FFFFFF)",
+  info: "var(--ds-icon-inverse, #FFFFFF)",
+  normal: "var(--ds-icon-subtle, #626F86)",
+  success: "var(--ds-icon-inverse, #FFFFFF)",
+  warning: "var(--ds-icon-warning-inverse, #172B4D)"
+};
+var flagIconGlyph = exports.flagIconGlyph = {
+  error: /*#__PURE__*/_react.default.createElement(_error.default, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-danger-bold, #C9372C)"
+  }),
+  info: /*#__PURE__*/_react.default.createElement(_informationInfo.default, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-neutral-bold, #44546F)"
+  }),
+  normal: /*#__PURE__*/_react.default.createElement(_informationInfo.default, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N500, ")"),
+    LEGACY_secondaryColor: "var(--ds-surface-overlay, #FFFFFF)"
+  }),
+  success: /*#__PURE__*/_react.default.createElement(_successCheckCircle.default, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-success-bold, #1F845A)"
+  }),
+  warning: /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-warning-inverse, ".concat(_colors.N700, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-warning-bold, #F5CD47)"
+  })
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.9.4";
+const packageVersion = "16.1.0";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -10,13 +10,14 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_APPEARANCE } from './constants';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { DismissButton, Expander } from './internal';
-import { flagBackgroundColor, flagIconColor, flagTextColor, flagTextColorToken } from './theme';
+import { flagBackgroundColor, flagIconColor, flagIconGlyph, flagTextColor, flagTextColorToken } from './theme';
 const CSS_VAR_ICON_COLOR = '--flag-icon-color';
 
 // For cases where a single word is longer than the container (e.g. filenames)
@@ -29,12 +30,21 @@ const descriptionStyles = css({
   overflow: 'auto',
   overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
 });
-const iconWrapperStyles = css({
+const oldIconWrapperStyles = css({
   display: 'flex',
   alignItems: 'start',
   flexShrink: 0,
   color: `var(${CSS_VAR_ICON_COLOR})`
 });
+const iconWrapperStyles = css({
+  display: 'flex',
+  minWidth: '24px',
+  minHeight: '24px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  color: `var(${CSS_VAR_ICON_COLOR})`
+});
 const flagStyles = xcss({
   boxShadow: 'elevation.shadow.overlay',
   borderRadius: 'border.radius.100',
@@ -49,7 +59,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.4"
+  packageVersion: "16.1.0"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -144,6 +154,7 @@ const Flag = props => {
   };
   const textColor = flagTextColor[appearance];
   const iconColor = flagIconColor[appearance];
+  const iconGlyph = flagIconGlyph[appearance];
   const isDismissable = isBold || isDismissAllowed;
   const shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
@@ -157,16 +168,17 @@ const Flag = props => {
     padding: "space.200",
     xcss: flagStyles
   }, jsx(Inline, {
-    alignBlock: "stretch",
+    alignBlock: fg('platform_ads_component_no_icon_spacing_support') ? 'start' : 'stretch',
     space: "space.200"
   }, jsx("div", {
-    css: iconWrapperStyles
+    css: fg('platform_ads_component_no_icon_spacing_support') ? iconWrapperStyles : oldIconWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     style: {
       [CSS_VAR_ICON_COLOR]: iconColor
-    }
-  }, icon), jsx("span", {
+    },
+    "data-testid": testId && `${testId}-icon-container`
+  }, icon || (iconGlyph && fg('platform_ads_component_no_icon_spacing_support') ? iconGlyph : null)), jsx("span", {
     css: transitionStyles
   }, jsx(Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM

package/dist/es2019/theme.js

@@ -1,5 +1,10 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import InformationIcon from '@atlaskit/icon/core/migration/information--info';
+import SuccessIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { B400, N0, N30A, N500, N700, N800 } from '@atlaskit/theme/colors';
 export const flagBackgroundColor = {
   error: 'color.background.danger.bold',
@@ -9,11 +14,38 @@ export const flagBackgroundColor = {
   warning: 'color.background.warning.bold'
 };
 export const flagIconColor = {
-  error: `var(--ds-icon-inverse, ${N0})`,
-  info: `var(--ds-icon-inverse, ${N0})`,
-  normal: `var(--ds-icon-subtle, ${N500})`,
-  success: `var(--ds-icon-inverse, ${N0})`,
-  warning: `var(--ds-icon-warning-inverse, ${N700})`
+  error: "var(--ds-icon-inverse, #FFFFFF)",
+  info: "var(--ds-icon-inverse, #FFFFFF)",
+  normal: "var(--ds-icon-subtle, #626F86)",
+  success: "var(--ds-icon-inverse, #FFFFFF)",
+  warning: "var(--ds-icon-warning-inverse, #172B4D)"
+};
+export const flagIconGlyph = {
+  error: /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "",
+    LEGACY_primaryColor: `var(--ds-icon-inverse, ${N0})`,
+    LEGACY_secondaryColor: "var(--ds-background-danger-bold, #C9372C)"
+  }),
+  info: /*#__PURE__*/React.createElement(InformationIcon, {
+    label: "",
+    LEGACY_primaryColor: `var(--ds-icon-inverse, ${N0})`,
+    LEGACY_secondaryColor: "var(--ds-background-neutral-bold, #44546F)"
+  }),
+  normal: /*#__PURE__*/React.createElement(InformationIcon, {
+    label: "",
+    LEGACY_primaryColor: `var(--ds-icon-subtle, ${N500})`,
+    LEGACY_secondaryColor: "var(--ds-surface-overlay, #FFFFFF)"
+  }),
+  success: /*#__PURE__*/React.createElement(SuccessIcon, {
+    label: "",
+    LEGACY_primaryColor: `var(--ds-icon-inverse, ${N0})`,
+    LEGACY_secondaryColor: "var(--ds-background-success-bold, #1F845A)"
+  }),
+  warning: /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "",
+    LEGACY_primaryColor: `var(--ds-icon-warning-inverse, ${N700})`,
+    LEGACY_secondaryColor: "var(--ds-background-warning-bold, #F5CD47)"
+  })
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.9.4";
+var packageVersion = "16.1.0";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -14,13 +14,14 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_APPEARANCE } from './constants';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { DismissButton, Expander } from './internal';
-import { flagBackgroundColor, flagIconColor, flagTextColor, flagTextColorToken } from './theme';
+import { flagBackgroundColor, flagIconColor, flagIconGlyph, flagTextColor, flagTextColorToken } from './theme';
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
 
 // For cases where a single word is longer than the container (e.g. filenames)
@@ -33,12 +34,21 @@ var descriptionStyles = css({
   overflow: 'auto',
   overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
 });
-var iconWrapperStyles = css({
+var oldIconWrapperStyles = css({
   display: 'flex',
   alignItems: 'start',
   flexShrink: 0,
   color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
 });
+var iconWrapperStyles = css({
+  display: 'flex',
+  minWidth: '24px',
+  minHeight: '24px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
+});
 var flagStyles = xcss({
   boxShadow: 'elevation.shadow.overlay',
   borderRadius: 'border.radius.100',
@@ -53,7 +63,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.4"
+  packageVersion: "16.1.0"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -156,6 +166,7 @@ var Flag = function Flag(props) {
   };
   var textColor = flagTextColor[appearance];
   var iconColor = flagIconColor[appearance];
+  var iconGlyph = flagIconGlyph[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
@@ -169,14 +180,15 @@ var Flag = function Flag(props) {
     padding: "space.200",
     xcss: flagStyles
   }, jsx(Inline, {
-    alignBlock: "stretch",
+    alignBlock: fg('platform_ads_component_no_icon_spacing_support') ? 'start' : 'stretch',
     space: "space.200"
   }, jsx("div", {
-    css: iconWrapperStyles
+    css: fg('platform_ads_component_no_icon_spacing_support') ? iconWrapperStyles : oldIconWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    style: _defineProperty({}, CSS_VAR_ICON_COLOR, iconColor)
-  }, icon), jsx("span", {
+    style: _defineProperty({}, CSS_VAR_ICON_COLOR, iconColor),
+    "data-testid": testId && "".concat(testId, "-icon-container")
+  }, icon || (iconGlyph && fg('platform_ads_component_no_icon_spacing_support') ? iconGlyph : null)), jsx("span", {
     css: transitionStyles
   }, jsx(Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM

package/dist/esm/theme.js

@@ -1,5 +1,10 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import InformationIcon from '@atlaskit/icon/core/migration/information--info';
+import SuccessIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { B400, N0, N30A, N500, N700, N800 } from '@atlaskit/theme/colors';
 export var flagBackgroundColor = {
   error: 'color.background.danger.bold',
@@ -9,11 +14,38 @@ export var flagBackgroundColor = {
   warning: 'color.background.warning.bold'
 };
 export var flagIconColor = {
-  error: "var(--ds-icon-inverse, ".concat(N0, ")"),
-  info: "var(--ds-icon-inverse, ".concat(N0, ")"),
-  normal: "var(--ds-icon-subtle, ".concat(N500, ")"),
-  success: "var(--ds-icon-inverse, ".concat(N0, ")"),
-  warning: "var(--ds-icon-warning-inverse, ".concat(N700, ")")
+  error: "var(--ds-icon-inverse, #FFFFFF)",
+  info: "var(--ds-icon-inverse, #FFFFFF)",
+  normal: "var(--ds-icon-subtle, #626F86)",
+  success: "var(--ds-icon-inverse, #FFFFFF)",
+  warning: "var(--ds-icon-warning-inverse, #172B4D)"
+};
+export var flagIconGlyph = {
+  error: /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-danger-bold, #C9372C)"
+  }),
+  info: /*#__PURE__*/React.createElement(InformationIcon, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-neutral-bold, #44546F)"
+  }),
+  normal: /*#__PURE__*/React.createElement(InformationIcon, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-subtle, ".concat(N500, ")"),
+    LEGACY_secondaryColor: "var(--ds-surface-overlay, #FFFFFF)"
+  }),
+  success: /*#__PURE__*/React.createElement(SuccessIcon, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-inverse, ".concat(N0, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-success-bold, #1F845A)"
+  }),
+  warning: /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "",
+    LEGACY_primaryColor: "var(--ds-icon-warning-inverse, ".concat(N700, ")"),
+    LEGACY_secondaryColor: "var(--ds-background-warning-bold, #F5CD47)"
+  })
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

package/dist/types/theme.d.ts

@@ -1,7 +1,9 @@
+import { type ReactElement } from 'react';
 import { type BackgroundColor } from '@atlaskit/primitives';
 import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;
+export declare const flagIconGlyph: Record<AppearanceTypes, ReactElement>;
 export declare const flagTextColor: Record<AppearanceTypes, HeadingColor>;
 export declare const flagTextColorToken: {
     error: "var(--ds-text-inverse)";

package/dist/types/types.d.ts

@@ -37,10 +37,11 @@ type AutoDismissFlagPropsWithoutId = {
     description?: ReactNode;
     /**
      * The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
-     * Your icon will receive the appropriate default color, which you can override by wrapping the
-     * icon in a containing element with CSS `color` set to your preferred icon color.
+     * Your icon will receive the appropriate default color, which you can override by setting
+     * the `color` prop on the icon to your preferred icon color.
+     * If no icon is provided, a default icon will be used based on the appearance prop.
      */
-    icon: ReactNode;
+    icon?: ReactNode;
     /**
      * The bold text shown at the top of the flag.
      */

package/dist/types-ts4.5/theme.d.ts

@@ -1,7 +1,9 @@
+import { type ReactElement } from 'react';
 import { type BackgroundColor } from '@atlaskit/primitives';
 import { type AppearanceTypes, type HeadingColor } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;
+export declare const flagIconGlyph: Record<AppearanceTypes, ReactElement>;
 export declare const flagTextColor: Record<AppearanceTypes, HeadingColor>;
 export declare const flagTextColorToken: {
     error: "var(--ds-text-inverse)";

package/dist/types-ts4.5/types.d.ts

@@ -37,10 +37,11 @@ type AutoDismissFlagPropsWithoutId = {
     description?: ReactNode;
     /**
      * The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
-     * Your icon will receive the appropriate default color, which you can override by wrapping the
-     * icon in a containing element with CSS `color` set to your preferred icon color.
+     * Your icon will receive the appropriate default color, which you can override by setting
+     * the `color` prop on the icon to your preferred icon color.
+     * If no icon is provided, a default icon will be used based on the appearance prop.
      */
-    icon: ReactNode;
+    icon?: ReactNode;
     /**
      * The bold text shown at the top of the flag.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.9.4",
+	"version": "16.1.0",
 	"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,35 +44,37 @@
 		"./types": "./src/types.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.3.0",
-		"@atlaskit/button": "^20.5.0",
-		"@atlaskit/ds-lib": "^3.5.0",
-		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.9.0",
-		"@atlaskit/motion": "^3.0.0",
-		"@atlaskit/portal": "^4.11.0",
-		"@atlaskit/primitives": "^13.5.0",
-		"@atlaskit/theme": "^16.0.0",
-		"@atlaskit/tokens": "^3.3.0",
-		"@atlaskit/visually-hidden": "^1.6.0",
+		"@atlaskit/analytics-next": "^11.0.0",
+		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/icon": "^24.1.0",
+		"@atlaskit/motion": "^5.0.0",
+		"@atlaskit/platform-feature-flags": "1.1.0",
+		"@atlaskit/portal": "^5.0.0",
+		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/visually-hidden": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/docs": "*",
-		"@atlaskit/drawer": "^9.4.0",
-		"@atlaskit/link": "^2.1.0",
-		"@atlaskit/radio": "^7.2.0",
+		"@atlaskit/drawer": "^10.0.0",
+		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/radio": "^8.0.0",
 		"@atlaskit/section-message": "*",
-		"@atlaskit/spinner": "^17.1.0",
+		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
@@ -108,5 +110,10 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/flag/"
+	"homepage": "https://atlassian.design/components/flag/",
+	"platform-feature-flags": {
+		"platform_ads_component_no_icon_spacing_support": {
+			"type": "boolean"
+		}
+	}
 }