@atlaskit/page-header 10.4.10 → 10.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/page-header
 
+## 10.6.0
+
+### Minor Changes
+
+-   [#100748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100748)
+    [`ff76f4c7a63d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ff76f4c7a63d) -
+    Add support for React 18.
+
+## 10.5.0
+
+### Minor Changes
+
+-   [#100633](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100633)
+    [`9aeb04ba9d17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9aeb04ba9d17) -
+    [ux] We are testing a visual change behind a feature flag. The line height of the title changes.
+    If this change is successful it will be available in a later release.
+
 ## 10.4.10
 
 ### Patch Changes

package/dist/cjs/PageHeader/styled.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _typography = require("@atlaskit/theme/typography");
 // TODO: Remove this eslint-disable when prop names have been renamed.
@@ -24,6 +26,13 @@ var truncateStyles = (0, _react2.css)({
 var outerStyles = (0, _react2.css)({
   margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
+var titleStyles = (0, _react2.css)({
+  color: "var(--ds-text, #172B4D)",
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  letterSpacing: 'normal',
+  marginBlockStart: 0,
+  outline: 'none'
+});
 var styledTitleStyles = (0, _react2.css)({
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   marginBlockStart: 0,
@@ -90,7 +99,7 @@ var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.defaul
     id = _ref2.id,
     truncateTitle = _ref2.truncateTitle;
   return (0, _react2.jsx)("h1", {
-    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    css: [].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.page-header-tokenised-typography-styles_lj1ix') ? [titleStyles] : [h700Styles, styledTitleStyles]), [truncateTitle && truncateStyles]),
     ref: ref,
     tabIndex: -1,
     id: id

package/dist/es2019/PageHeader/styled.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { h700 } from '@atlaskit/theme/typography';
 const truncateStyles = css({
@@ -17,6 +18,13 @@ const truncateStyles = css({
 const outerStyles = css({
   margin: `${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-200, 16px)"} 0`
 });
+const titleStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  letterSpacing: 'normal',
+  marginBlockStart: 0,
+  outline: 'none'
+});
 const styledTitleStyles = css({
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   marginBlockStart: 0,
@@ -85,7 +93,7 @@ export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
   truncateTitle
 }, ref) => {
   return jsx("h1", {
-    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    css: [...(getBooleanFF('platform.design-system-team.page-header-tokenised-typography-styles_lj1ix') ? [titleStyles] : [h700Styles, styledTitleStyles]), truncateTitle && truncateStyles],
     ref: ref,
     tabIndex: -1,
     id: id

package/dist/esm/PageHeader/styled.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. The prop name concerned here is truncateTitle.
@@ -7,6 +8,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { h700 } from '@atlaskit/theme/typography';
 var truncateStyles = css({
@@ -17,6 +19,13 @@ var truncateStyles = css({
 var outerStyles = css({
   margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
 });
+var titleStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  letterSpacing: 'normal',
+  marginBlockStart: 0,
+  outline: 'none'
+});
 var styledTitleStyles = css({
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   marginBlockStart: 0,
@@ -83,7 +92,7 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
     id = _ref2.id,
     truncateTitle = _ref2.truncateTitle;
   return jsx("h1", {
-    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    css: [].concat(_toConsumableArray(getBooleanFF('platform.design-system-team.page-header-tokenised-typography-styles_lj1ix') ? [titleStyles] : [h700Styles, styledTitleStyles]), [truncateTitle && truncateStyles]),
     ref: ref,
     tabIndex: -1,
     id: id

package/dist/types/PageHeader/styled.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 /**
  * __Outer wrapper__.

package/dist/types-ts4.5/PageHeader/styled.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 /**
  * __Outer wrapper__.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-header",
-  "version": "10.4.10",
+  "version": "10.6.0",
   "description": "A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,26 +23,29 @@
     "website": {
       "name": "Page header",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
+    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.48.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",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/breadcrumbs": "^12.0.0",
+    "@atlaskit/breadcrumbs": "^12.1.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/page": "^12.3.0",
+    "@atlaskit/page": "^12.4.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
@@ -89,5 +92,10 @@
   "af:exports": {
     ".": "./src/index.tsx"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.page-header-tokenised-typography-styles_lj1ix": {
+      "type": "boolean"
+    }
+  }
 }