@atlaskit/code 15.5.1 → 15.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/code
 
+## 15.6.0
+
+### Minor Changes
+
+- [#133573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133573)
+  [`9e6563c10af4c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e6563c10af4c) -
+  Updating font styles for code component inline with the new typography system behind a feature
+  flag. If successful, these changes will be made available in a later release.
+
 ## 15.5.1
 
 ### Patch Changes

package/dist/cjs/code.js

@@ -16,6 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
 var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
 var _styles = require("./internal/theme/styles");
@@ -40,8 +41,23 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Code(_ref, ref) {
   var testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var styles = (0, _platformFeatureFlags.fg)('platform_design_system_team_code_new_typography') ? (0, _react2.css)({
+    display: 'inline',
+    padding: '2px 0.5ch',
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    borderStyle: 'none',
+    boxDecorationBreak: 'clone',
+    color: "var(--ds-text, #172B4D)",
+    font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    lineHeight: 'inherit',
+    overflow: 'auto',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var styles = (0, _react2.css)((0, _styles.getCodeStyles)());
+  (0, _react2.css)((0, _styles.getCodeStyles)());
   var children = props.children,
     _props$codeBidiWarnin = props.codeBidiWarnings,
     codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,

package/dist/es2019/code.js

@@ -7,6 +7,7 @@ import React, { forwardRef, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
@@ -23,8 +24,23 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
   testId,
   ...props
 }, ref) {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const styles = fg('platform_design_system_team_code_new_typography') ? css({
+    display: 'inline',
+    padding: '2px 0.5ch',
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    borderStyle: 'none',
+    boxDecorationBreak: 'clone',
+    color: "var(--ds-text, #172B4D)",
+    font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    lineHeight: 'inherit',
+    overflow: 'auto',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  const styles = css(getCodeStyles());
+  css(getCodeStyles());
   const {
     children,
     codeBidiWarnings = true,

package/dist/esm/code.js

@@ -10,6 +10,7 @@ import React, { forwardRef, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
@@ -25,8 +26,23 @@ import { getCodeStyles } from './internal/theme/styles';
 var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
   var testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var styles = fg('platform_design_system_team_code_new_typography') ? css({
+    display: 'inline',
+    padding: '2px 0.5ch',
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    borderStyle: 'none',
+    boxDecorationBreak: 'clone',
+    color: "var(--ds-text, #172B4D)",
+    font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    lineHeight: 'inherit',
+    overflow: 'auto',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var styles = css(getCodeStyles());
+  css(getCodeStyles());
   var children = props.children,
     _props$codeBidiWarnin = props.codeBidiWarnings,
     codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/code",
-	"version": "15.5.1",
+	"version": "15.6.0",
 	"description": "Code highlights short strings of code snippets inline with body text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,8 +28,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -44,7 +45,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.3.0",
 		"@atlaskit/visual-regression": "*",
@@ -105,5 +106,10 @@
 		"./inline": "./src/entry-points/inline.tsx",
 		"./constants": "./src/entry-points/constants.tsx"
 	},
-	"homepage": "https://atlassian.design/components/code/"
+	"homepage": "https://atlassian.design/components/code/",
+	"platform-feature-flags": {
+		"platform_design_system_team_code_new_typography": {
+			"type": "boolean"
+		}
+	}
 }