@atlaskit/page-layout 3.4.3 → 3.4.4

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 +7 -0
  2. package/dist/cjs/components/slots/slot-dimensions.js +29 -5
  3. package/dist/es2019/components/slots/slot-dimensions.js +31 -4
  4. package/dist/esm/components/slots/slot-dimensions.js +29 -5
  5. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/page-layout
2
2
 
3
+ ## 3.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`4709c6e8fcd8a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4709c6e8fcd8a) -
8
+ Bump version to remove extra html comment in style tag in React SSR
9
+
3
10
  ## 3.4.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/slots/slot-dimensions.js CHANGED
@@ -6,14 +6,38 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
10
  var _responsive = require("@atlaskit/primitives/responsive");
10
11
  var _default = exports.default = function _default(_ref) {
11
12
  var variableName = _ref.variableName,
12
13
  value = _ref.value,
13
14
  mobileValue = _ref.mobileValue;
14
- return (
15
- /*#__PURE__*/
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
17
- _react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
18
- );
15
+ if ((0, _platformFeatureFlags.fg)('platform.remove-newline-in-style-tag-in-platform-page-layout_7gts1')) {
16
+ /**
17
+ * Note don't put multiple variables in multiple lines. eg
18
+ * <style>
19
+ * {css1}
20
+ * {css2}
21
+ * </style>
22
+ *
23
+ * React will insert an empty HTML comment in between the text in SSR.
24
+ * This is not a valid tag and will break the page.
25
+ * <style>foo<!-- -->bar</style>
26
+ */
27
+ var style = ":root{--".concat(variableName, ":").concat(value, "px;}");
28
+ if (mobileValue) {
29
+ style += " ".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }");
30
+ }
31
+ return (
32
+ /*#__PURE__*/
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
34
+ _react.default.createElement("style", null, style)
35
+ );
36
+ } else {
37
+ return (
38
+ /*#__PURE__*/
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
40
+ _react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
41
+ );
42
+ }
19
43
  };
package/dist/es2019/components/slots/slot-dimensions.js CHANGED
@@ -1,10 +1,37 @@
1
1
  import React from 'react';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { UNSAFE_media } from '@atlaskit/primitives/responsive';
3
4
  export default (({
4
5
  variableName,
5
6
  value,
6
7
  mobileValue
7
- }) =>
8
- /*#__PURE__*/
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
10
- React.createElement("style", null, `:root{--${variableName}:${value}px;}`, mobileValue && `${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`));
8
+ }) => {
9
+ if (fg('platform.remove-newline-in-style-tag-in-platform-page-layout_7gts1')) {
10
+ /**
11
+ * Note don't put multiple variables in multiple lines. eg
12
+ * <style>
13
+ * {css1}
14
+ * {css2}
15
+ * </style>
16
+ *
17
+ * React will insert an empty HTML comment in between the text in SSR.
18
+ * This is not a valid tag and will break the page.
19
+ * <style>foo<!-- -->bar</style>
20
+ */
21
+ let style = `:root{--${variableName}:${value}px;}`;
22
+ if (mobileValue) {
23
+ style += ` ${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`;
24
+ }
25
+ return (
26
+ /*#__PURE__*/
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
28
+ React.createElement("style", null, style)
29
+ );
30
+ } else {
31
+ return (
32
+ /*#__PURE__*/
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
34
+ React.createElement("style", null, `:root{--${variableName}:${value}px;}`, mobileValue && `${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`)
35
+ );
36
+ }
37
+ });
package/dist/esm/components/slots/slot-dimensions.js CHANGED
@@ -1,12 +1,36 @@
1
1
  import React from 'react';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { UNSAFE_media } from '@atlaskit/primitives/responsive';
3
4
  export default (function (_ref) {
4
5
  var variableName = _ref.variableName,
5
6
  value = _ref.value,
6
7
  mobileValue = _ref.mobileValue;
7
- return (
8
- /*#__PURE__*/
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
10
- React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
11
- );
8
+ if (fg('platform.remove-newline-in-style-tag-in-platform-page-layout_7gts1')) {
9
+ /**
10
+ * Note don't put multiple variables in multiple lines. eg
11
+ * <style>
12
+ * {css1}
13
+ * {css2}
14
+ * </style>
15
+ *
16
+ * React will insert an empty HTML comment in between the text in SSR.
17
+ * This is not a valid tag and will break the page.
18
+ * <style>foo<!-- -->bar</style>
19
+ */
20
+ var style = ":root{--".concat(variableName, ":").concat(value, "px;}");
21
+ if (mobileValue) {
22
+ style += " ".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }");
23
+ }
24
+ return (
25
+ /*#__PURE__*/
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
27
+ React.createElement("style", null, style)
28
+ );
29
+ } else {
30
+ return (
31
+ /*#__PURE__*/
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
33
+ React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
34
+ );
35
+ }
12
36
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "3.4.3",
3
+ "version": "3.4.4",
4
4
  "description": "A collection of components which let you compose an application's page layout.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -66,7 +66,7 @@
66
66
  "@atlaskit/menu": "^2.6.0",
67
67
  "@atlaskit/notification-indicator": "^9.2.0",
68
68
  "@atlaskit/notification-log-client": "^6.1.0",
69
- "@atlaskit/popup": "^1.19.0",
69
+ "@atlaskit/popup": "^1.20.0",
70
70
  "@atlaskit/side-navigation": "^3.3.0",
71
71
  "@atlaskit/ssr": "*",
72
72
  "@atlaskit/toggle": "^13.2.0",
@@ -119,6 +119,9 @@
119
119
  },
120
120
  "platform.atlassian.griffin-navigation-redesign": {
121
121
  "type": "boolean"
122
+ },
123
+ "platform.remove-newline-in-style-tag-in-platform-page-layout_7gts1": {
124
+ "type": "boolean"
122
125
  }
123
126
  }
124
127
  }