@atlaskit/mobile-header 7.0.9 → 7.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/styled.js +5 -4
  3. package/dist/es2019/styled.js +5 -4
  4. package/dist/esm/styled.js +5 -4
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/mobile-header
2
2
 
3
+ ## 7.0.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#142103](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142103)
8
+ [`73c6494e97b4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c6494e97b4e) -
9
+ [ux] Fixes the transparency and alignment issues. Adds an example with content
10
+ - Updated dependencies
11
+
3
12
  ## 7.0.9
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/styled.js CHANGED
@@ -8,7 +8,6 @@ exports.PageHeading = exports.MobilePageHeaderContent = exports.MobilePageHeader
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
- var _colors = require("@atlaskit/theme/colors");
12
11
  var _constants = require("@atlaskit/theme/constants");
13
12
  var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -58,7 +57,7 @@ var MobilePageHeader = exports.MobilePageHeader = _styled.default.header({
58
57
  var MobilePageHeaderContent = exports.MobilePageHeaderContent = _styled.default.div(function (props) {
59
58
  return {
60
59
  alignItems: 'center',
61
- backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
60
+ backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
62
61
  boxSizing: 'border-box',
63
62
  display: 'flex',
64
63
  height: "".concat(mobileHeaderHeight, "px"),
@@ -91,7 +90,7 @@ var opacityOut = (0, _react.keyframes)({
91
90
  // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
92
91
  // so we can't display the AK blanket underneath the navigation.
93
92
  // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
94
- var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(_colors.N100A, ")"), layers.blanket, function (p) {
93
+ var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, #091E427D)", layers.blanket, function (p) {
95
94
  return p.isOpen ? opacityIn : opacityOut;
96
95
  });
97
96
 
@@ -99,6 +98,8 @@ var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject3 ||
99
98
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
100
99
  var PageHeading = exports.PageHeading = _styled.default.h1({
101
100
  flexGrow: 1,
101
+ margin: 0,
102
102
  marginLeft: "var(--ds-space-100, 8px)",
103
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
103
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
104
+ alignSelf: 'center'
104
105
  });
package/dist/es2019/styled.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { css, keyframes } from '@emotion/react';
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import styled from '@emotion/styled';
5
- import { N100A, N20 } from '@atlaskit/theme/colors';
6
5
  import { layers as akLayers } from '@atlaskit/theme/constants';
7
6
  // @atlaskit/navigation has a specific z-index, so we need to layer the header
8
7
  // components relative to that.
@@ -54,7 +53,7 @@ export const MobilePageHeader = styled.header({
54
53
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
55
54
  export const MobilePageHeaderContent = styled.div(props => ({
56
55
  alignItems: 'center',
57
- backgroundColor: `var(--ds-background-neutral, ${N20})`,
56
+ backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
58
57
  boxSizing: 'border-box',
59
58
  display: 'flex',
60
59
  height: `${mobileHeaderHeight}px`,
@@ -87,7 +86,7 @@ const opacityOut = keyframes({
87
86
  // so we can't display the AK blanket underneath the navigation.
88
87
  // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
89
88
  export const FakeBlanket = styled.div`
90
- background: ${`var(--ds-blanket, ${N100A})`};
89
+ background: ${"var(--ds-blanket, #091E427D)"};
91
90
  bottom: 0;
92
91
  left: 0;
93
92
  position: fixed;
@@ -101,6 +100,8 @@ export const FakeBlanket = styled.div`
101
100
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
102
101
  export const PageHeading = styled.h1({
103
102
  flexGrow: 1,
103
+ margin: 0,
104
104
  marginLeft: "var(--ds-space-100, 8px)",
105
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
105
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
106
+ alignSelf: 'center'
106
107
  });
package/dist/esm/styled.js CHANGED
@@ -4,7 +4,6 @@ var _templateObject, _templateObject2, _templateObject3;
4
4
  import { css, keyframes } from '@emotion/react';
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import styled from '@emotion/styled';
7
- import { N100A, N20 } from '@atlaskit/theme/colors';
8
7
  import { layers as akLayers } from '@atlaskit/theme/constants';
9
8
  // @atlaskit/navigation has a specific z-index, so we need to layer the header
10
9
  // components relative to that.
@@ -52,7 +51,7 @@ export var MobilePageHeader = styled.header({
52
51
  export var MobilePageHeaderContent = styled.div(function (props) {
53
52
  return {
54
53
  alignItems: 'center',
55
- backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
54
+ backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
56
55
  boxSizing: 'border-box',
57
56
  display: 'flex',
58
57
  height: "".concat(mobileHeaderHeight, "px"),
@@ -85,7 +84,7 @@ var opacityOut = keyframes({
85
84
  // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
86
85
  // so we can't display the AK blanket underneath the navigation.
87
86
  // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
88
- export var FakeBlanket = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(N100A, ")"), layers.blanket, function (p) {
87
+ export var FakeBlanket = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tbackground: ", ";\n\tbottom: 0;\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 0;\n\tz-index: ", ";\n\tanimation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, #091E427D)", layers.blanket, function (p) {
89
88
  return p.isOpen ? opacityIn : opacityOut;
90
89
  });
91
90
 
@@ -93,6 +92,8 @@ export var FakeBlanket = styled.div(_templateObject3 || (_templateObject3 = _tag
93
92
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
94
93
  export var PageHeading = styled.h1({
95
94
  flexGrow: 1,
95
+ margin: 0,
96
96
  marginLeft: "var(--ds-space-100, 8px)",
97
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
97
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
98
+ alignSelf: 'center'
98
99
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/mobile-header",
3
- "version": "7.0.9",
3
+ "version": "7.0.10",
4
4
  "description": "A React component rendering a mobile header",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,9 +33,9 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@atlaskit/button": "^23.0.0",
36
- "@atlaskit/icon": "^25.4.0",
36
+ "@atlaskit/icon": "^25.6.0",
37
37
  "@atlaskit/theme": "^18.0.0",
38
- "@atlaskit/tokens": "^4.5.0",
38
+ "@atlaskit/tokens": "^4.8.0",
39
39
  "@babel/runtime": "^7.0.0",
40
40
  "@emotion/styled": "^11.0.0"
41
41
  },