@atlaskit/page-layout 1.6.3 → 1.6.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 1.6.5
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
+## 1.6.4
+
+### Patch Changes
+
+- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 1.6.3
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -18,7 +18,7 @@ import Sidebar from './product-integration/side-navigation';
 const wrapperStyles = css({
   boxSizing: 'border-box',
   height: '100%',
-  padding: 8,
+  padding: token('space.100', '8px'),
   backgroundColor: token('color.background.neutral.subtle', 'white'),
   outlineOffset: -4,
   overflowY: 'auto',

package/__perf__/utils/product-integration/notifications-popup.tsx

@@ -13,7 +13,9 @@ const wrapperStyles = css({
   display: 'flex',
   width: 540,
   height: 'calc(100vh - 200px)',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: 18,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingLeft: 18,
 });
 

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
@@ -8,7 +8,7 @@ import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
-const Container: React.FC<CustomItemComponentProps> = (props) => {
+const Container = (props: CustomItemComponentProps) => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };

package/__perf__/utils/product-integration/sample-header.tsx

@@ -1,13 +1,11 @@
 /** @jsx jsx */
-import React from 'react';
-
 import { jsx } from '@emotion/react';
 
 import Icon from '@atlaskit/icon';
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Header } from '@atlaskit/side-navigation';
 
-const Container: React.FC<CustomItemComponentProps> = (props) => {
+const Container = (props: CustomItemComponentProps) => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };

package/dist/cjs/components/resize-control/index.js

@@ -25,6 +25,7 @@ var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });

package/dist/cjs/components/resize-control/resize-button.js

@@ -18,17 +18,17 @@ var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 /** @jsx jsx */
 var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  right: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")"),
+  bottom: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  left: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
 });
 var resizeIconButtonStyles = (0, _react.css)({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   border: 0,

package/dist/cjs/components/resize-control/shadow.js

@@ -17,6 +17,7 @@ var shadowStyles = (0, _react.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.5,
@@ -27,6 +28,7 @@ var shadowStyles = (0, _react.css)({
 });
 var draggingStyles = (0, _react.css)({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.8

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -17,10 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -45,7 +48,7 @@ var skipLinkHeadingStyles = (0, _react.css)({
   fontWeight: 600
 });
 var skipLinkListStyles = (0, _react.css)({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

package/dist/cjs/components/slots/banner-slot.js

@@ -24,7 +24,9 @@ var bannerFixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: _constants.RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: _constants.LEFT_PANEL_WIDTH
 });
 

package/dist/cjs/components/slots/internal/left-sidebar-inner.js

@@ -22,8 +22,10 @@ var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotio
 var fixedInnerStyles = (0, _react.css)({
   width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: "".concat(_constants.LEFT_PANEL_WIDTH),
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });

package/dist/cjs/components/slots/main.js

@@ -39,6 +39,7 @@ var draggingStyles = (0, _react2.css)({
  * while main remains in place.
  */
 var flyoutStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

package/dist/cjs/components/slots/right-sidebar.js

@@ -29,7 +29,9 @@ var fixedInnerStyles = (0, _react2.css)({
    */
   width: _constants.RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });

package/dist/cjs/components/slots/top-navigation.js

@@ -23,8 +23,11 @@ var topNavigationStyles = (0, _react2.css)({
 var fixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: _constants.BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: _constants.RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: _constants.LEFT_PANEL_WIDTH
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/dist/es2019/components/resize-control/index.js

@@ -19,6 +19,7 @@ const resizeControlStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });

package/dist/es2019/components/resize-control/resize-button.js

@@ -9,17 +9,17 @@ import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
 const increaseHitAreaStyles = css({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: `calc(-1 * ${"var(--ds-space-100, 8px)"})`,
+  right: `calc(-1 * ${"var(--ds-space-150, 12px)"})`,
+  bottom: `calc(-1 * ${"var(--ds-space-100, 8px)"})`,
+  left: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
 });
 const resizeIconButtonStyles = css({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   border: 0,

package/dist/es2019/components/resize-control/shadow.js

@@ -16,6 +16,7 @@ const shadowStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: `var(--ds-border, ${`linear-gradient(${direction}, ${colorStops})`})`,
   opacity: 0.5,
@@ -26,6 +27,7 @@ const shadowStyles = css({
 });
 const draggingStyles = css({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
   opacity: 0.8

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -9,10 +9,13 @@ import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const skipLinkStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -37,7 +40,7 @@ const skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 const skipLinkListStyles = css({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

package/dist/es2019/components/slots/banner-slot.js

@@ -15,7 +15,9 @@ const bannerFixedStyles = css({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/es2019/components/slots/internal/left-sidebar-inner.js

@@ -16,8 +16,10 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 const fixedInnerStyles = css({
   width: `${LEFT_SIDEBAR_WIDTH}`,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: `${LEFT_PANEL_WIDTH}`,
   transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });

package/dist/es2019/components/slots/main.js

@@ -32,6 +32,7 @@ const draggingStyles = css({
  * while main remains in place.
  */
 const flyoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
 });
 

package/dist/es2019/components/slots/right-sidebar.js

@@ -21,7 +21,9 @@ const fixedInnerStyles = css({
    */
   width: RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: `calc(${RIGHT_PANEL_WIDTH})`,
   bottom: 0
 });

package/dist/es2019/components/slots/top-navigation.js

@@ -14,8 +14,11 @@ const topNavigationStyles = css({
 const fixedStyles = css({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/dist/esm/components/resize-control/index.js

@@ -21,6 +21,7 @@ var resizeControlStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });

package/dist/esm/components/resize-control/resize-button.js

@@ -12,17 +12,17 @@ import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
 var increaseHitAreaStyles = css({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  right: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")"),
+  bottom: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  left: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
 });
 var resizeIconButtonStyles = css({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   border: 0,

package/dist/esm/components/resize-control/shadow.js

@@ -11,6 +11,7 @@ var shadowStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.5,
@@ -21,6 +22,7 @@ var shadowStyles = css({
 });
 var draggingStyles = css({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.8

package/dist/esm/components/skip-links/skip-link-components.js

@@ -13,10 +13,13 @@ import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var skipLinkStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -41,7 +44,7 @@ var skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 var skipLinkListStyles = css({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

package/dist/esm/components/slots/banner-slot.js

@@ -16,7 +16,9 @@ var bannerFixedStyles = css({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/esm/components/slots/internal/left-sidebar-inner.js

@@ -16,8 +16,10 @@ var prefersReducedMotionStyles = css(prefersReducedMotion());
 var fixedInnerStyles = css({
   width: "".concat(LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: "".concat(LEFT_PANEL_WIDTH),
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });

package/dist/esm/components/slots/main.js

@@ -32,6 +32,7 @@ var draggingStyles = css({
  * while main remains in place.
  */
 var flyoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

package/dist/esm/components/slots/right-sidebar.js

@@ -22,7 +22,9 @@ var fixedInnerStyles = css({
    */
   width: RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: "calc(".concat(RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });

package/dist/esm/components/slots/top-navigation.js

@@ -15,8 +15,11 @@ var topNavigationStyles = css({
 var fixedStyles = css({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -95,7 +95,8 @@
         "analytics-next"
       ],
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ],
       "theming": [
         "react-context"