@atlaskit/status 5.13.24 → 5.14.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/status
 
+## 5.14.0
+
+### Minor Changes
+
+- [`5157e2c52cfcd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5157e2c52cfcd) -
+  Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
+  (Group 3)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.13.25
+
+### Patch Changes
+
+- [`cd33055ac8c87`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd33055ac8c87) -
+  Behind the platform_status_lozenge_fractional_zoom_fix experiment: centre editor status text on
+  cap height so it no longer sits ~1px high at fractional browser zoom on 1x displays, and lay out
+  status colour swatches on a fixed-column grid so they no longer wrap an extra row there.
+
 ## 5.13.24
 
 ### Patch Changes

package/dist/cjs/components/analytics.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.13.23";
+var packageVersion = "5.13.25";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/cjs/components/internal/color-palette.compiled.css

@@ -1,6 +1,8 @@
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bvidpf{padding-left:0}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bahv2br{justify-content:start}
+._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1p571b66{row-gap:var(--ds-space-050,4px)}

package/dist/cjs/components/internal/color-palette.js

@@ -11,6 +11,7 @@ require("./color-palette.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
 var _statusColors = require("../status-colors");
@@ -53,6 +54,11 @@ var getPalette = function getPalette(colorMode) {
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var colorPaletteWrapperStyles = null;
+var colorPaletteFlexStyles = null;
+
+// Grid columns fix the swatch count per row, so rounding the swatch borders to whole device
+// pixels at fractional zoom cannot wrap a swatch onto an extra row.
+var colorPaletteGridStyles = null;
 var colorPaletteRowGapStyles = null;
 var _default = exports.default = function _default(_ref3) {
   var cols = _ref3.cols,
@@ -66,6 +72,7 @@ var _default = exports.default = function _default(_ref3) {
     colorMode = _useThemeObserver.colorMode;
   var palette = getPalette(colorMode, variant);
   var resolvedCols = cols !== null && cols !== void 0 ? cols : variantToCols[variant];
+  var isGridLayout = (0, _isExperimentEnabled.isExperimentEnabled)('platform_status_lozenge_fractional_zoom_fix');
   var colorRefs = (0, _react.useRef)([]);
   (0, _react.useEffect)(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -100,9 +107,10 @@ var _default = exports.default = function _default(_ref3) {
   }, [colorRefs, palette.length]);
   return /*#__PURE__*/_react.default.createElement("ul", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
+    className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc", isGridLayout ? "_1e0c11p5 _1bahv2br" : "_1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
     style: {
-      maxWidth: resolvedCols * 32
+      gridTemplateColumns: isGridLayout ? "repeat(".concat(resolvedCols, ", max-content)") : undefined,
+      maxWidth: isGridLayout ? undefined : resolvedCols * 32
     }
   }, palette.map(function (_ref4, i) {
     var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "5.13.23";
+const packageVersion = "5.13.25";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

package/dist/es2019/components/internal/color-palette.compiled.css

@@ -1,6 +1,8 @@
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bvidpf{padding-left:0}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bahv2br{justify-content:start}
+._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1p571b66{row-gap:var(--ds-space-050,4px)}

package/dist/es2019/components/internal/color-palette.js

@@ -2,6 +2,7 @@
 import "./color-palette.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { isSwatchSelected, COLORS, PICKER_SWATCHES, SWATCH_ICON_COLOR } from '../status-colors';
@@ -34,6 +35,11 @@ const getPalette = (colorMode, variant = 'default') => {
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 const colorPaletteWrapperStyles = null;
+const colorPaletteFlexStyles = null;
+
+// Grid columns fix the swatch count per row, so rounding the swatch borders to whole device
+// pixels at fractional zoom cannot wrap a swatch onto an extra row.
+const colorPaletteGridStyles = null;
 const colorPaletteRowGapStyles = null;
 export default (({
   cols,
@@ -48,6 +54,7 @@ export default (({
   } = useThemeObserver();
   const palette = getPalette(colorMode, variant);
   const resolvedCols = cols !== null && cols !== void 0 ? cols : variantToCols[variant];
+  const isGridLayout = isExperimentEnabled('platform_status_lozenge_fractional_zoom_fix');
   const colorRefs = useRef([]);
   useEffect(() => {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -76,9 +83,10 @@ export default (({
   }, [colorRefs, palette.length]);
   return /*#__PURE__*/React.createElement("ul", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
+    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc", isGridLayout ? "_1e0c11p5 _1bahv2br" : "_1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
     style: {
-      maxWidth: resolvedCols * 32
+      gridTemplateColumns: isGridLayout ? `repeat(${resolvedCols}, max-content)` : undefined,
+      maxWidth: isGridLayout ? undefined : resolvedCols * 32
     }
   }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => /*#__PURE__*/React.createElement(Color, {
     key: colorValue,

package/dist/esm/components/analytics.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.13.23";
+var packageVersion = "5.13.25";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/esm/components/internal/color-palette.compiled.css

@@ -1,6 +1,8 @@
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19bvidpf{padding-left:0}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bahv2br{justify-content:start}
+._1e0c11p5{display:grid}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}
 ._1p571b66{row-gap:var(--ds-space-050,4px)}

package/dist/esm/components/internal/color-palette.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./color-palette.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { isSwatchSelected, COLORS, PICKER_SWATCHES, SWATCH_ICON_COLOR } from '../status-colors';
@@ -44,6 +45,11 @@ var getPalette = function getPalette(colorMode) {
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var colorPaletteWrapperStyles = null;
+var colorPaletteFlexStyles = null;
+
+// Grid columns fix the swatch count per row, so rounding the swatch borders to whole device
+// pixels at fractional zoom cannot wrap a swatch onto an extra row.
+var colorPaletteGridStyles = null;
 var colorPaletteRowGapStyles = null;
 export default (function (_ref3) {
   var cols = _ref3.cols,
@@ -57,6 +63,7 @@ export default (function (_ref3) {
     colorMode = _useThemeObserver.colorMode;
   var palette = getPalette(colorMode, variant);
   var resolvedCols = cols !== null && cols !== void 0 ? cols : variantToCols[variant];
+  var isGridLayout = isExperimentEnabled('platform_status_lozenge_fractional_zoom_fix');
   var colorRefs = useRef([]);
   useEffect(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -91,9 +98,10 @@ export default (function (_ref3) {
   }, [colorRefs, palette.length]);
   return /*#__PURE__*/React.createElement("ul", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
+    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc", isGridLayout ? "_1e0c11p5 _1bahv2br" : "_1e0c1txw _1n261g80", variant === 'extended' && "_1p571b66", className]),
     style: {
-      maxWidth: resolvedCols * 32
+      gridTemplateColumns: isGridLayout ? "repeat(".concat(resolvedCols, ", max-content)") : undefined,
+      maxWidth: isGridLayout ? undefined : resolvedCols * 32
     }
   }, palette.map(function (_ref4, i) {
     var _ref5 = _slicedToArray(_ref4, 4),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/status",
-	"version": "5.13.24",
+	"version": "5.14.0",
 	"description": "Fabric Status React Components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@atlaskit/afm-i18n-platform-elements-status": "2.270.0",
+		"@atlaskit/afm-i18n-platform-elements-status": "2.287.0",
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/lozenge": "^17.0.0",
@@ -58,8 +58,8 @@
 		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^244.0.0",
-		"@atlaskit/tokens": "^20.6.0",
+		"@atlaskit/tmp-editor-statsig": "^245.0.0",
+		"@atlaskit/tokens": "^20.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2"
 	},