@atlaskit/flag 15.3.0 → 15.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/flag
 
+## 15.4.1
+
+### Patch Changes
+
+- [#87978](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87978) [`23eb450d6c2b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/23eb450d6c2b) - Internal change only: update to use new typography system.
+
+## 15.4.0
+
+### Minor Changes
+
+- [#91526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91526) [`3f7f99daae4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f7f99daae4a) - Add support for React 18.
+
 ## 15.3.0
 
 ### Minor Changes

package/__perf__/with-flag-group.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import noop from '@atlaskit/ds-lib/noop';
 import SuccessIcon from '@atlaskit/icon/glyph/check-circle';
-import { G400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import Flag, { FlagGroup } from '../src';
@@ -14,7 +13,7 @@ export default () => (
       icon={
         <SuccessIcon
           label="Success"
-          secondaryColor={token('color.background.success.bold', G400)}
+          secondaryColor={token('color.background.success.bold')}
         />
       }
       id="success"

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 && Object.prototype.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.3.0";
+var packageVersion = "15.4.1";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _primitives = require("@atlaskit/primitives");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -22,6 +21,17 @@ var _internal = require("./internal");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+
+// For cases where a single word is longer than the container (e.g. filenames)
+var overflowWrapStyles = (0, _primitives.xcss)({
+  overflowWrap: 'anywhere'
+});
+var descriptionStyles = (0, _react2.css)({
+  maxHeight: 100,
+  // height is defined as 5 lines maximum by design
+  overflow: 'auto',
+  overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+});
 var iconWrapperStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'start',
@@ -42,7 +52,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.3.0"
+  packageVersion: "15.4.1"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -155,13 +165,11 @@ var Flag = function Flag(props) {
     space: "space.100",
     spread: "space-between"
   }, (0, _react2.jsx)(_primitives.Box, {
-    paddingBlockStart: "space.025"
-  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
+    paddingBlockStart: "space.025",
+    xcss: overflowWrapStyles
+  }, (0, _react2.jsx)(_primitives.Text, {
     color: textColor,
-    fontWeight: "semibold",
-    UNSAFE_style: {
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
-    }
+    weight: "semibold"
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -171,16 +179,12 @@ var Flag = function Flag(props) {
   }) : null), (0, _react2.jsx)(_internal.Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
-    as: "div",
-    color: textColor,
-    UNSAFE_style: {
-      maxHeight: 100,
-      // height is defined as 5 lines maximum by design
-      overflow: 'auto',
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+  }, description && (0, _react2.jsx)("div", {
+    style: {
+      color: _theme.flagTextColorToken[appearance]
     },
-    testId: testId && "".concat(testId, "-description")
+    css: descriptionStyles,
+    "data-testid": testId && "".concat(testId, "-description")
   }, description), (0, _react2.jsx)(_flagActions.default, {
     actions: actions,
     appearance: appearance,

package/dist/cjs/theme.js

@@ -24,11 +24,11 @@ var flagIconColor = exports.flagIconColor = {
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var flagTextColor = exports.flagTextColor = {
-  error: 'inverse',
-  info: 'inverse',
-  normal: 'subtle',
-  success: 'inverse',
-  warning: 'warning.inverse'
+  error: 'color.text.inverse',
+  info: 'color.text.inverse',
+  normal: 'color.text.subtle',
+  success: 'color.text.inverse',
+  warning: 'color.text.warning.inverse'
 };
 var flagTextColorToken = exports.flagTextColorToken = {
   error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),

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.3.0";
+const packageVersion = "15.4.1";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -2,16 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
-import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
+import { Inline, Stack, Box, xcss, Text } from '@atlaskit/primitives';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
+import { flagTextColor, flagBackgroundColor, flagIconColor, flagTextColorToken } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
 const CSS_VAR_ICON_COLOR = '--flag-icon-color';
+
+// For cases where a single word is longer than the container (e.g. filenames)
+const overflowWrapStyles = xcss({
+  overflowWrap: 'anywhere'
+});
+const descriptionStyles = css({
+  maxHeight: 100,
+  // height is defined as 5 lines maximum by design
+  overflow: 'auto',
+  overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+});
 const iconWrapperStyles = css({
   display: 'flex',
   alignItems: 'start',
@@ -32,7 +42,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.3.0"
+  packageVersion: "15.4.1"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -143,13 +153,11 @@ const Flag = props => {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    paddingBlockStart: "space.025"
+    paddingBlockStart: "space.025",
+    xcss: overflowWrapStyles
   }, jsx(Text, {
     color: textColor,
-    fontWeight: "semibold",
-    UNSAFE_style: {
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
-    }
+    weight: "semibold"
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -159,16 +167,12 @@ const Flag = props => {
   }) : null), jsx(Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && jsx(Text, {
-    as: "div",
-    color: textColor,
-    UNSAFE_style: {
-      maxHeight: 100,
-      // height is defined as 5 lines maximum by design
-      overflow: 'auto',
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+  }, description && jsx("div", {
+    style: {
+      color: flagTextColorToken[appearance]
     },
-    testId: testId && `${testId}-description`
+    css: descriptionStyles,
+    "data-testid": testId && `${testId}-description`
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/es2019/theme.js

@@ -18,11 +18,11 @@ export const flagIconColor = {
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const flagTextColor = {
-  error: 'inverse',
-  info: 'inverse',
-  normal: 'subtle',
-  success: 'inverse',
-  warning: 'warning.inverse'
+  error: 'color.text.inverse',
+  info: 'color.text.inverse',
+  normal: 'color.text.subtle',
+  success: 'color.text.inverse',
+  warning: 'color.text.warning.inverse'
 };
 export const flagTextColorToken = {
   error: `var(--ds-text-inverse, ${N0})`,

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.3.0";
+var packageVersion = "15.4.1";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -6,16 +6,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
-import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
+import { Inline, Stack, Box, xcss, Text } from '@atlaskit/primitives';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
+import { flagTextColor, flagBackgroundColor, flagIconColor, flagTextColorToken } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+
+// For cases where a single word is longer than the container (e.g. filenames)
+var overflowWrapStyles = xcss({
+  overflowWrap: 'anywhere'
+});
+var descriptionStyles = css({
+  maxHeight: 100,
+  // height is defined as 5 lines maximum by design
+  overflow: 'auto',
+  overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+});
 var iconWrapperStyles = css({
   display: 'flex',
   alignItems: 'start',
@@ -36,7 +46,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.3.0"
+  packageVersion: "15.4.1"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -149,13 +159,11 @@ var Flag = function Flag(props) {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    paddingBlockStart: "space.025"
+    paddingBlockStart: "space.025",
+    xcss: overflowWrapStyles
   }, jsx(Text, {
     color: textColor,
-    fontWeight: "semibold",
-    UNSAFE_style: {
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
-    }
+    weight: "semibold"
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -165,16 +173,12 @@ var Flag = function Flag(props) {
   }) : null), jsx(Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && jsx(Text, {
-    as: "div",
-    color: textColor,
-    UNSAFE_style: {
-      maxHeight: 100,
-      // height is defined as 5 lines maximum by design
-      overflow: 'auto',
-      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+  }, description && jsx("div", {
+    style: {
+      color: flagTextColorToken[appearance]
     },
-    testId: testId && "".concat(testId, "-description")
+    css: descriptionStyles,
+    "data-testid": testId && "".concat(testId, "-description")
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/esm/theme.js

@@ -18,11 +18,11 @@ export var flagIconColor = {
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export var flagTextColor = {
-  error: 'inverse',
-  info: 'inverse',
-  normal: 'subtle',
-  success: 'inverse',
-  warning: 'warning.inverse'
+  error: 'color.text.inverse',
+  info: 'color.text.inverse',
+  normal: 'color.text.subtle',
+  success: 'color.text.inverse',
+  warning: 'color.text.warning.inverse'
 };
 export var flagTextColorToken = {
   error: "var(--ds-text-inverse, ".concat(N0, ")"),

package/dist/types/theme.d.ts

@@ -1,5 +1,4 @@
-import { UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
-import { BackgroundColor } from '@atlaskit/primitives';
+import { BackgroundColor, TextProps } from '@atlaskit/primitives';
 import { AppearanceTypes } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

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

@@ -1,5 +1,4 @@
-import { UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
-import { BackgroundColor } from '@atlaskit/primitives';
+import { BackgroundColor, TextProps } from '@atlaskit/primitives';
 import { AppearanceTypes } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BackgroundColor>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.3.0",
+  "version": "15.4.1",
   "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/"
@@ -31,7 +31,8 @@
     "website": {
       "name": "Flag",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "af:exports": {
     ".": "./src/index.tsx",
@@ -45,27 +46,27 @@
     "./types": "./src/types.tsx"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.8.0",
-    "@atlaskit/ds-explorations": "^3.3.0",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.14.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
+    "@atlaskit/radio": "^6.1.3",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",