@atlaskit/lozenge 11.14.0 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/lozenge
 
+## 12.1.0
+
+### Minor Changes
+
+- [#117377](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117377)
+  [`f6fa74e4221cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6fa74e4221cd) -
+  [ux] We are increasing the letter spacing behind a feature flag. If testing successful, this
+  change will be made available in a later release.
+
+## 12.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
+
 ## 11.14.0
 
 ### Minor Changes

package/dist/cjs/Lozenge/index.js

@@ -145,6 +145,10 @@ var textStyles = (0, _react2.css)({
   textTransform: 'uppercase',
   whiteSpace: 'nowrap'
 });
+var customLetterspacingStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 0.165
+});
 /**
  * __Lozenge__
  *
@@ -177,7 +181,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.containerSubtle],
       "data-testid": testId
     }, (0, _react2.jsx)("span", {
-      css: [textStyles, styles.text[appearanceStyle]],
+      css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
       style: {
         color: style === null || style === void 0 ? void 0 : style.color,
         // to negate paddingInline specified on Box above
@@ -198,7 +202,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     xcss: baseStylesOld,
     testId: testId
   }, (0, _react2.jsx)("span", {
-    css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
+    css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
     style: {
       color: style === null || style === void 0 ? void 0 : style.color,
       // to negate paddingInline specified on Box above

package/dist/cjs/compiled/index.compiled.css

@@ -17,6 +17,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cwg1n1a{outline-offset:-1px}
+._1dyz9vsi{letter-spacing:.165px}
 ._1e0c116y{display:inline-flex}
 ._1kz6184x{block-size:min-content}
 ._1p1dangw{text-transform:uppercase}
@@ -32,7 +33,6 @@
 ._bfhkxmjf{background-color:#f9c84e}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
-._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
 ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
 ._kqswpfqs{position:static}
 ._o5721q9c{white-space:nowrap}

package/dist/cjs/compiled/index.js

@@ -32,7 +32,8 @@ var stylesOld = {
 
 // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
 var stylesOldUnbounded = {
-  text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
+  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi"
 };
 var backgroundColorsOld = {
   bold: {
@@ -61,6 +62,7 @@ var stylesNew = {
   container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
   containerSubtle: "_1cwg1n1a",
   text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi",
   'bg.bold.default': "_bfhk1fkg",
   'bg.bold.inprogress': "_bfhk1ymo",
   'bg.bold.moved': "_bfhkxmjf",
@@ -129,7 +131,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
       },
       "data-testid": testId && "".concat(testId, "--text"),
-      className: (0, _runtime.ax)([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
+      className: (0, _runtime.ax)([stylesNew.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
     }, children));
   }
   return /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -149,7 +151,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: (0, _runtime.ax)([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
+    className: (0, _runtime.ax)([stylesOldUnbounded.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
   }, children));
 });
 Lozenge.displayName = 'Lozenge';

package/dist/es2019/Lozenge/index.js

@@ -138,6 +138,10 @@ const textStyles = css({
   textTransform: 'uppercase',
   whiteSpace: 'nowrap'
 });
+const customLetterspacingStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 0.165
+});
 /**
  * __Lozenge__
  *
@@ -168,7 +172,7 @@ const Lozenge = /*#__PURE__*/memo(({
       css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
       "data-testid": testId
     }, jsx("span", {
-      css: [textStyles, styles.text[appearanceStyle]],
+      css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
       style: {
         color: style === null || style === void 0 ? void 0 : style.color,
         // to negate paddingInline specified on Box above
@@ -189,7 +193,7 @@ const Lozenge = /*#__PURE__*/memo(({
     xcss: baseStylesOld,
     testId: testId
   }, jsx("span", {
-    css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
+    css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
     style: {
       color: style === null || style === void 0 ? void 0 : style.color,
       // to negate paddingInline specified on Box above

package/dist/es2019/compiled/index.compiled.css

@@ -17,6 +17,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cwg1n1a{outline-offset:-1px}
+._1dyz9vsi{letter-spacing:.165px}
 ._1e0c116y{display:inline-flex}
 ._1kz6184x{block-size:min-content}
 ._1p1dangw{text-transform:uppercase}
@@ -32,7 +33,6 @@
 ._bfhkxmjf{background-color:#f9c84e}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
-._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
 ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
 ._kqswpfqs{position:static}
 ._o5721q9c{white-space:nowrap}

package/dist/es2019/compiled/index.js

@@ -23,7 +23,8 @@ const stylesOld = {
 
 // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
 const stylesOldUnbounded = {
-  text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
+  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi"
 };
 const backgroundColorsOld = {
   bold: {
@@ -52,6 +53,7 @@ const stylesNew = {
   container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
   containerSubtle: "_1cwg1n1a",
   text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi",
   'bg.bold.default': "_bfhk1fkg",
   'bg.bold.inprogress': "_bfhk1ymo",
   'bg.bold.moved': "_bfhkxmjf",
@@ -116,7 +118,7 @@ const Lozenge = /*#__PURE__*/memo(({
         maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
       },
       "data-testid": testId && `${testId}--text`,
-      className: ax([stylesNew.text, stylesNew[`text.${appearanceStyle}`]])
+      className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew[`text.${appearanceStyle}`]])
     }, children));
   }
   return /*#__PURE__*/React.createElement(Box, {
@@ -136,7 +138,7 @@ const Lozenge = /*#__PURE__*/memo(({
       maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
     },
     "data-testid": testId && `${testId}--text`,
-    className: ax([stylesOldUnbounded.text, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
+    className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
   }, children));
 });
 Lozenge.displayName = 'Lozenge';

package/dist/esm/Lozenge/index.js

@@ -138,6 +138,10 @@ var textStyles = css({
   textTransform: 'uppercase',
   whiteSpace: 'nowrap'
 });
+var customLetterspacingStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 0.165
+});
 /**
  * __Lozenge__
  *
@@ -170,7 +174,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
       css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
       "data-testid": testId
     }, jsx("span", {
-      css: [textStyles, styles.text[appearanceStyle]],
+      css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
       style: {
         color: style === null || style === void 0 ? void 0 : style.color,
         // to negate paddingInline specified on Box above
@@ -191,7 +195,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
     xcss: baseStylesOld,
     testId: testId
   }, jsx("span", {
-    css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
+    css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
     style: {
       color: style === null || style === void 0 ? void 0 : style.color,
       // to negate paddingInline specified on Box above

package/dist/esm/compiled/index.compiled.css

@@ -17,6 +17,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cwg1n1a{outline-offset:-1px}
+._1dyz9vsi{letter-spacing:.165px}
 ._1e0c116y{display:inline-flex}
 ._1kz6184x{block-size:min-content}
 ._1p1dangw{text-transform:uppercase}
@@ -32,7 +33,6 @@
 ._bfhkxmjf{background-color:#f9c84e}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
-._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
 ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
 ._kqswpfqs{position:static}
 ._o5721q9c{white-space:nowrap}

package/dist/esm/compiled/index.js

@@ -23,7 +23,8 @@ var stylesOld = {
 
 // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
 var stylesOldUnbounded = {
-  text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
+  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi"
 };
 var backgroundColorsOld = {
   bold: {
@@ -52,6 +53,7 @@ var stylesNew = {
   container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
   containerSubtle: "_1cwg1n1a",
   text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
+  customLetterspacing: "_1dyz9vsi",
   'bg.bold.default': "_bfhk1fkg",
   'bg.bold.inprogress': "_bfhk1ymo",
   'bg.bold.moved': "_bfhkxmjf",
@@ -120,7 +122,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
         maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
       },
       "data-testid": testId && "".concat(testId, "--text"),
-      className: ax([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
+      className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
     }, children));
   }
   return /*#__PURE__*/React.createElement(Box, {
@@ -140,7 +142,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
       maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: ax([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
+    className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
   }, children));
 });
 Lozenge.displayName = 'Lozenge';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.14.0",
+	"version": "12.1.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,25 +39,25 @@
 	},
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/css": "^0.9.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^13.6.0",
-		"@atlaskit/theme": "^16.0.0",
-		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2",
 		"@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/ds-lib": "^3.5.0",
-		"@atlaskit/heading": "^4.3.0",
+		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/link": "*",
 		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
@@ -95,6 +95,9 @@
 		},
 		"visual-refresh_drop_5": {
 			"type": "boolean"
+		},
+		"platform-lozenge-custom-letterspacing": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/lozenge/"