@atlaskit/flag 17.0.0 → 17.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/flag
 
+## 17.1.1
+
+### Patch Changes
+
+- [#129972](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129972)
+  [`b2d69a39e6687`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d69a39e6687) -
+  Update `@compiled/react` dependency for improved type checking support.
+- Updated dependencies
+
+## 17.1.0
+
+### Minor Changes
+
+- [#128153](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128153)
+  [`00925dc5af2a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00925dc5af2a6) -
+  [ux] Flag description and actions now explicitly set the font style to use typography tokens,
+  instead of relying on the CSS reset to be present. This change is behind the feature flag
+  `platform_ads_explicit_font_styles`.
+
 ## 17.0.0
 
 ### Major 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 = "17.0.0";
+var packageVersion = "17.1.1";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-actions.compiled.css

@@ -1,4 +1,5 @@
 
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._nup91zz4._nup91zz4, a._u4iq1zz4._u4iq1zz4{background:var(--bg-color)}
 ._12r21wq8._12r21wq8, a._il101wq8._il101wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._1bk69tn6._1bk69tn6, a._1wy69tn6._1wy69tn6{padding-inline-end:var(--_zkfc5e)}

package/dist/cjs/flag-actions.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("./constants");
 var _theme = require("./theme");
@@ -20,6 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; } /* eslint-disable @atlaskit/design-system/no-nested-styles */
 var buttonStyles = null;
+var fontStyles = null;
 var appearanceNormalButtonStyles = null;
 var appearanceNormalActionsContainerStyles = null;
 var FlagActions = function FlagActions(props) {
@@ -34,7 +36,7 @@ var FlagActions = function FlagActions(props) {
   }
   var isBold = appearance !== _constants.DEFAULT_APPEARANCE;
   return /*#__PURE__*/React.createElement("span", {
-    className: (0, _runtime.ax)([!isBold && "_1g4l107e _y8dn107e"])
+    className: (0, _runtime.ax)([!isBold && "_1g4l107e _y8dn107e", (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && "_11c82smr"])
   }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.100",
     shouldWrap: true,

package/dist/cjs/flag.compiled.css

@@ -1,7 +1,8 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._v5641hdc{transition:gap .3s}
-._v564z97a{transition:background-color .2s}._16jlkb7n{flex-grow:1}
+._v564z97a{transition:background-color .2s}
+._16jlkb7n{flex-grow:1}
 ._16qs8sq4{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e423f,0 0 1px #091e424f)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}

package/dist/cjs/flag.js

@@ -34,6 +34,7 @@ var styles = {
   flag: "_2rkosqtm _1reo15vq _18m915vq _v564z97a _16qs8sq4 _1pbyni7l _1bsb1osq"
 };
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+var oldDescriptionStyles = null;
 var descriptionStyles = null;
 var oldIconWrapperStyles = null;
 var iconWrapperStyles = null;
@@ -41,7 +42,7 @@ var flagWrapperStyles = null;
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.0.0"
+  packageVersion: "17.1.1"
 };
 var transitionStyles = null;
 
@@ -200,7 +201,7 @@ var Flag = function Flag(props) {
     "data-testid": testId && "".concat(testId, "-description")
     /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
     "aria-hidden": isDelayToAnnounce,
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') ? "_11c82smr _1reo1wug _18m91wug _c71l53f4 _1i4qfg65" : "_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
   }, description), /*#__PURE__*/React.createElement(_flagActions.default, {
     actions: actions,
     appearance: appearance,

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 = "17.0.0";
+const packageVersion = "17.1.1";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-actions.compiled.css

@@ -1,4 +1,5 @@
 
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._nup91zz4._nup91zz4, a._u4iq1zz4._u4iq1zz4{background:var(--bg-color)}
 ._12r21wq8._12r21wq8, a._il101wq8._il101wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._1bk61a66._1bk61a66, a._1wy61a66._1wy61a66{padding-inline-end:var(--ds-space-100,8px)!important}

package/dist/es2019/flag-actions.js

@@ -4,10 +4,12 @@ import "./flag-actions.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import Button from '@atlaskit/button/custom-theme-button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline } from '@atlaskit/primitives/compiled';
 import { DEFAULT_APPEARANCE } from './constants';
 import { actionBackgroundColor, actionTextColor } from './theme';
 const buttonStyles = null;
+const fontStyles = null;
 const appearanceNormalButtonStyles = null;
 const appearanceNormalActionsContainerStyles = null;
 const FlagActions = props => {
@@ -22,7 +24,7 @@ const FlagActions = props => {
   }
   const isBold = appearance !== DEFAULT_APPEARANCE;
   return /*#__PURE__*/React.createElement("span", {
-    className: ax([!isBold && "_1g4l107e _y8dn107e"])
+    className: ax([!isBold && "_1g4l107e _y8dn107e", fg('platform_ads_explicit_font_styles') && "_11c82smr"])
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.100",
     shouldWrap: true,

package/dist/es2019/flag.compiled.css

@@ -1,7 +1,8 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._v5641hdc{transition:gap .3s}
-._v564z97a{transition:background-color .2s}._16jlkb7n{flex-grow:1}
+._v564z97a{transition:background-color .2s}
+._16jlkb7n{flex-grow:1}
 ._16qs8sq4{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e423f,0 0 1px #091e424f)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}

package/dist/es2019/flag.js

@@ -20,6 +20,7 @@ const styles = {
   flag: "_2rkosqtm _1reo15vq _18m915vq _v564z97a _16qs8sq4 _1pbyni7l _1bsb1osq"
 };
 const CSS_VAR_ICON_COLOR = '--flag-icon-color';
+const oldDescriptionStyles = null;
 const descriptionStyles = null;
 const oldIconWrapperStyles = null;
 const iconWrapperStyles = null;
@@ -27,7 +28,7 @@ const flagWrapperStyles = null;
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.0.0"
+  packageVersion: "17.1.1"
 };
 const transitionStyles = null;
 
@@ -179,7 +180,7 @@ const Flag = props => {
     "data-testid": testId && `${testId}-description`
     /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
     "aria-hidden": isDelayToAnnounce,
-    className: ax(["_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
+    className: ax([fg('platform_ads_explicit_font_styles') ? "_11c82smr _1reo1wug _18m91wug _c71l53f4 _1i4qfg65" : "_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
   }, description), /*#__PURE__*/React.createElement(Actions, {
     actions: actions,
     appearance: appearance,

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 = "17.0.0";
+var packageVersion = "17.1.1";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-actions.compiled.css

@@ -1,4 +1,5 @@
 
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._nup91zz4._nup91zz4, a._u4iq1zz4._u4iq1zz4{background:var(--bg-color)}
 ._12r21wq8._12r21wq8, a._il101wq8._il101wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._1bk69tn6._1bk69tn6, a._1wy69tn6._1wy69tn6{padding-inline-end:var(--_zkfc5e)}

package/dist/esm/flag-actions.js

@@ -8,10 +8,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 
 import Button from '@atlaskit/button/custom-theme-button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline } from '@atlaskit/primitives/compiled';
 import { DEFAULT_APPEARANCE } from './constants';
 import { actionBackgroundColor, actionTextColor } from './theme';
 var buttonStyles = null;
+var fontStyles = null;
 var appearanceNormalButtonStyles = null;
 var appearanceNormalActionsContainerStyles = null;
 var FlagActions = function FlagActions(props) {
@@ -26,7 +28,7 @@ var FlagActions = function FlagActions(props) {
   }
   var isBold = appearance !== DEFAULT_APPEARANCE;
   return /*#__PURE__*/React.createElement("span", {
-    className: ax([!isBold && "_1g4l107e _y8dn107e"])
+    className: ax([!isBold && "_1g4l107e _y8dn107e", fg('platform_ads_explicit_font_styles') && "_11c82smr"])
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.100",
     shouldWrap: true,

package/dist/esm/flag.compiled.css

@@ -1,7 +1,8 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._v5641hdc{transition:gap .3s}
-._v564z97a{transition:background-color .2s}._16jlkb7n{flex-grow:1}
+._v564z97a{transition:background-color .2s}
+._16jlkb7n{flex-grow:1}
 ._16qs8sq4{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e423f,0 0 1px #091e424f)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}

package/dist/esm/flag.js

@@ -24,6 +24,7 @@ var styles = {
   flag: "_2rkosqtm _1reo15vq _18m915vq _v564z97a _16qs8sq4 _1pbyni7l _1bsb1osq"
 };
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+var oldDescriptionStyles = null;
 var descriptionStyles = null;
 var oldIconWrapperStyles = null;
 var iconWrapperStyles = null;
@@ -31,7 +32,7 @@ var flagWrapperStyles = null;
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.0.0"
+  packageVersion: "17.1.1"
 };
 var transitionStyles = null;
 
@@ -190,7 +191,7 @@ var Flag = function Flag(props) {
     "data-testid": testId && "".concat(testId, "-description")
     /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
     "aria-hidden": isDelayToAnnounce,
-    className: ax(["_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
+    className: ax([fg('platform_ads_explicit_font_styles') ? "_11c82smr _1reo1wug _18m91wug _c71l53f4 _1i4qfg65" : "_1reo1wug _18m91wug _c71l53f4 _1i4qfg65"])
   }, description), /*#__PURE__*/React.createElement(Actions, {
     actions: actions,
     appearance: appearance,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "17.0.0",
+	"version": "17.1.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/"
@@ -53,12 +53,12 @@
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.2"
+		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -71,7 +71,7 @@
 		"@atlaskit/drawer": "^10.0.0",
 		"@atlaskit/link": "^3.0.0",
 		"@atlaskit/radio": "^8.0.0",
-		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/ssr": "^0.4.0",
 		"@atlaskit/visual-regression": "^0.10.0",
@@ -115,6 +115,9 @@
 	"platform-feature-flags": {
 		"platform_ads_component_no_icon_spacing_support": {
 			"type": "boolean"
+		},
+		"platform_ads_explicit_font_styles": {
+			"type": "boolean"
 		}
 	}
 }