@atlaskit/mobile-header 6.1.3 → 6.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/mobile-header
 
+## 6.1.4
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 6.1.3
 
 ### Patch Changes

package/dist/cjs/styled.js

@@ -11,8 +11,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("@atlaskit/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var gridSize = (0, _theme.gridSize)();
-
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
 var navLayer = _theme.layers.navigation();
@@ -38,10 +36,10 @@ var MobileNavSlider = _styled.default.div(_templateObject3 || (_templateObject3
 exports.MobileNavSlider = MobileNavSlider;
 var MobilePageHeader = _styled.default.header(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n"])), mobileHeaderHeight);
 exports.MobilePageHeader = MobilePageHeader;
-var MobilePageHeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", "px;\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), (0, _theme.themed)({
+var MobilePageHeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), (0, _theme.themed)({
   light: _theme.colors.N20,
   dark: _theme.colors.DN10
-}), mobileHeaderHeight, gridSize, function (props) {
+}), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
   return props.topOffset;
 }, layers.header);
 exports.MobilePageHeaderContent = MobilePageHeaderContent;
@@ -56,5 +54,5 @@ var FakeBlanket = _styled.default.div(_templateObject8 || (_templateObject8 = (0
 
 // use proper h1 and header styles but for mobile we don't want a top margin
 exports.FakeBlanket = FakeBlanket;
-var PageHeading = _styled.default.h1(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  margin-left: ", "px;\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), gridSize, _theme.typography.h500);
+var PageHeading = _styled.default.h1(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", _theme.typography.h500);
 exports.PageHeading = PageHeading;

package/dist/es2019/styled.js

@@ -3,9 +3,7 @@ import styled from '@emotion/styled';
 
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
-const gridSize = akGridSize();
-
+import { layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
 const navLayer = akLayers.navigation();
@@ -48,7 +46,7 @@ export const MobilePageHeaderContent = styled.div`
   box-sizing: border-box;
   display: flex;
   height: ${mobileHeaderHeight}px;
-  padding: ${gridSize}px;
+  padding: ${"var(--ds-space-100, 8px)"};
   position: fixed;
   top: ${props => props.topOffset}px;
   width: 100%;
@@ -79,7 +77,7 @@ export const FakeBlanket = styled.div`
 // use proper h1 and header styles but for mobile we don't want a top margin
 export const PageHeading = styled.h1`
   flex-grow: 1;
-  margin-left: ${gridSize}px;
+  margin-left: ${"var(--ds-space-100, 8px)"};
   ${typography.h500};
   && {
     margin-top: 0;

package/dist/esm/styled.js

@@ -5,9 +5,7 @@ import styled from '@emotion/styled';
 
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize as akGridSize, layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
-var gridSize = akGridSize();
-
+import { layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
 var navLayer = akLayers.navigation();
@@ -31,10 +29,10 @@ export var MobileNavSlider = styled.div(_templateObject3 || (_templateObject3 =
 // make space so content below doesn't slip beneath the header
 // since the content is `position: fixed`
 export var MobilePageHeader = styled.header(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", "px;\n"])), mobileHeaderHeight);
-export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", "px;\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), themed({
+export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), themed({
   light: colors.N20,
   dark: colors.DN10
-}), mobileHeaderHeight, gridSize, function (props) {
+}), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
   return props.topOffset;
 }, layers.header);
 var opacityIn = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
@@ -47,4 +45,4 @@ export var FakeBlanket = styled.div(_templateObject8 || (_templateObject8 = _tag
 });
 
 // use proper h1 and header styles but for mobile we don't want a top margin
-export var PageHeading = styled.h1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-left: ", "px;\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), gridSize, typography.h500);
+export var PageHeading = styled.h1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", typography.h500);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mobile-header",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "description": "A React component rendering a mobile header",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,9 +30,10 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/styled": "^11.0.0"
   },