@atlaskit/link-datasource 1.0.3 → 1.0.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 (34) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ui/issue-like-table/index.js +1 -1
  3. package/dist/cjs/ui/issue-like-table/render-type/date-time/index.js +6 -1
  4. package/dist/cjs/ui/issue-like-table/render-type/icon/index.js +1 -1
  5. package/dist/cjs/ui/issue-like-table/render-type/link/index.js +4 -1
  6. package/dist/cjs/ui/issue-like-table/render-type/number/index.js +8 -4
  7. package/dist/cjs/ui/issue-like-table/render-type/text/index.js +6 -1
  8. package/dist/cjs/ui/issue-like-table/render-type/user/index.js +2 -1
  9. package/dist/cjs/ui/issue-like-table/styled.js +4 -2
  10. package/dist/cjs/ui/jira-issues-modal/modal/index.js +1 -1
  11. package/dist/cjs/ui/table-footer/index.js +2 -2
  12. package/dist/es2019/ui/issue-like-table/index.js +1 -1
  13. package/dist/es2019/ui/issue-like-table/render-type/date-time/index.js +6 -1
  14. package/dist/es2019/ui/issue-like-table/render-type/icon/index.js +1 -1
  15. package/dist/es2019/ui/issue-like-table/render-type/link/index.js +5 -1
  16. package/dist/es2019/ui/issue-like-table/render-type/number/index.js +8 -4
  17. package/dist/es2019/ui/issue-like-table/render-type/text/index.js +6 -1
  18. package/dist/es2019/ui/issue-like-table/render-type/user/index.js +2 -0
  19. package/dist/es2019/ui/issue-like-table/styled.js +2 -2
  20. package/dist/es2019/ui/jira-issues-modal/modal/index.js +1 -1
  21. package/dist/es2019/ui/table-footer/index.js +2 -1
  22. package/dist/esm/ui/issue-like-table/index.js +1 -1
  23. package/dist/esm/ui/issue-like-table/render-type/date-time/index.js +6 -1
  24. package/dist/esm/ui/issue-like-table/render-type/icon/index.js +1 -1
  25. package/dist/esm/ui/issue-like-table/render-type/link/index.js +4 -1
  26. package/dist/esm/ui/issue-like-table/render-type/number/index.js +8 -4
  27. package/dist/esm/ui/issue-like-table/render-type/text/index.js +6 -1
  28. package/dist/esm/ui/issue-like-table/render-type/user/index.js +2 -1
  29. package/dist/esm/ui/issue-like-table/styled.js +2 -1
  30. package/dist/esm/ui/jira-issues-modal/modal/index.js +1 -1
  31. package/dist/esm/ui/table-footer/index.js +2 -2
  32. package/dist/types/ui/issue-like-table/styled.d.ts +1 -0
  33. package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts +1 -0
  34. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 1.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ea1fef58561`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea1fef58561) - [ux] Fixes to column styling and other minor formatting issues
8
+
3
9
  ## 1.0.3
4
10
 
5
11
  ### Patch Changes
@@ -346,7 +346,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
346
346
  tag: "span",
347
347
  testId: 'datasource-header-content'
348
348
  }, (0, _react2.jsx)(_heading.default, {
349
- level: "h400",
349
+ level: "h200",
350
350
  as: 'span'
351
351
  }, content));
352
352
  if (onVisibleColumnKeysChange && hasData) {
@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.DATETIME_TYPE_TEST_ID = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
10
  var _react = _interopRequireDefault(require("react"));
11
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
10
12
  var _reactIntlNext = require("react-intl-next");
13
+ var _styled2 = require("../../styled");
14
+ var _templateObject;
11
15
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
16
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
13
17
  var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
@@ -22,6 +26,7 @@ var timeOptions = {
22
26
  hour: '2-digit',
23
27
  minute: '2-digit'
24
28
  };
29
+ var DateTimeWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n"])), _styled2.FieldTextFontSize);
25
30
  var DateTimeRenderType = function DateTimeRenderType(_ref) {
26
31
  var value = _ref.value,
27
32
  _ref$testId = _ref.testId,
@@ -39,7 +44,7 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
39
44
  datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
40
45
  };
41
46
  var formattedString = intl.formatDate(date, options[display] || options['date']);
42
- return /*#__PURE__*/_react.default.createElement("span", {
47
+ return /*#__PURE__*/_react.default.createElement(DateTimeWrapper, {
43
48
  "data-testid": testId
44
49
  }, formattedString);
45
50
  };
@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
  var _image = _interopRequireDefault(require("@atlaskit/image"));
12
12
  var _templateObject;
13
- var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
13
+ var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: left;\n"])));
14
14
  var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
15
15
  exports.ICON_TYPE_TEST_ID = ICON_TYPE_TEST_ID;
16
16
  var IconRenderType = function IconRenderType(_ref) {
@@ -12,6 +12,7 @@ var _smartCard = require("@atlaskit/smart-card");
12
12
  var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
13
13
  var _colors = require("@atlaskit/theme/colors");
14
14
  var _typography = require("@atlaskit/theme/typography");
15
+ var _styled = require("../../styled");
15
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
17
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
18
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,7 +38,9 @@ var LinkRenderType = function LinkRenderType(_ref) {
37
38
  var anchor = (0, _react.useMemo)(function () {
38
39
  return /*#__PURE__*/_react.default.createElement(_linkUrl.default, {
39
40
  href: url,
40
- style: linkStyle,
41
+ style: _objectSpread(_objectSpread({}, linkStyle), {}, {
42
+ fontSize: _styled.FieldTextFontSize
43
+ }),
41
44
  "data-testid": testId,
42
45
  target: "_blank"
43
46
  }, text || url);
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.NUMBER_TYPE_TEST_ID = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _text = _interopRequireDefault(require("../text"));
9
10
  var NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
10
11
  exports.NUMBER_TYPE_TEST_ID = NUMBER_TYPE_TEST_ID;
11
12
  var NumberRenderType = function NumberRenderType(_ref) {
@@ -15,10 +16,13 @@ var NumberRenderType = function NumberRenderType(_ref) {
15
16
  if (typeof number !== 'number') {
16
17
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
17
18
  }
18
- var formattedNumber = Number.isInteger(number) ? number : "".concat(number.toFixed(2));
19
- return /*#__PURE__*/_react.default.createElement("span", {
20
- "data-testid": testId
21
- }, formattedNumber);
19
+ var formattedNumber = number.toLocaleString(undefined, {
20
+ maximumFractionDigits: 15
21
+ });
22
+ return /*#__PURE__*/_react.default.createElement(_text.default, {
23
+ testId: testId,
24
+ text: formattedNumber
25
+ });
22
26
  };
23
27
  var _default = NumberRenderType;
24
28
  exports.default = _default;
@@ -5,9 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.TEXT_TYPE_TEST_ID = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
8
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
11
+ var _styled2 = require("../../styled");
12
+ var _templateObject;
9
13
  var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
10
14
  exports.TEXT_TYPE_TEST_ID = TEXT_TYPE_TEST_ID;
15
+ var TextWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n"])), _styled2.FieldTextFontSize);
11
16
  var TextRenderType = function TextRenderType(_ref) {
12
17
  var text = _ref.text,
13
18
  _ref$testId = _ref.testId,
@@ -15,7 +20,7 @@ var TextRenderType = function TextRenderType(_ref) {
15
20
  if (!(text && typeof text === 'string')) {
16
21
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
17
22
  }
18
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
23
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TextWrapper, {
19
24
  "data-testid": testId
20
25
  }, text), /*#__PURE__*/_react.default.createElement("br", null));
21
26
  };
@@ -10,9 +10,10 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
13
+ var _styled2 = require("../../styled");
13
14
  var _messages = require("./messages");
14
15
  var _templateObject, _templateObject2;
15
- var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
16
+ var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: ", ";\n"])), _styled2.FieldTextFontSize);
16
17
  var AvatarWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: 5px;\n"])));
17
18
  var USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
18
19
  exports.USER_TYPE_TEST_ID = USER_TYPE_TEST_ID;
@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
7
+ exports.TableHeading = exports.Table = exports.FieldTextFontSize = exports.EmptyStateTableHeading = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
  var _templateObject, _templateObject2, _templateObject3;
12
+ var FieldTextFontSize = '14px';
13
+ exports.FieldTextFontSize = FieldTextFontSize;
12
14
  var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n"])));
13
15
  exports.Table = Table;
14
- var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n cursor: grab;\n position: relative;\n padding-block: ", ";\n line-height: ", ";\n border-bottom: 2px solid ", ";\n & [data-testid='datasource-header-content--container'] {\n margin-top: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: ", ";\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
16
+ var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n cursor: grab;\n position: relative;\n padding-block: ", ";\n line-height: ", ";\n border-bottom: 2px solid ", ";\n & [data-testid='datasource-header-content--container'] {\n margin-top: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
15
17
  exports.TableHeading = TableHeading;
16
18
  var EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n &:first-child {\n padding-left: ", ";\n }\n"])), "var(--ds-space-100, 8px)");
17
19
  exports.EmptyStateTableHeading = EmptyStateTableHeading;
@@ -344,7 +344,7 @@ var analyticsContextAttributes = {
344
344
  };
345
345
  var analyticsContextData = {
346
346
  packageName: "@atlaskit/link-datasource",
347
- packageVersion: "1.0.3",
347
+ packageVersion: "1.0.4",
348
348
  source: 'datasourceConfigModal'
349
349
  };
350
350
  var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
@@ -24,7 +24,7 @@ var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0
24
24
  var TopBorderWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n padding: ", " 0;\n border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
25
25
  var IssueCounterWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-self: center;\n color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"));
26
26
  var SyncWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N90, ")"));
27
- var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: 5px;\n"])));
27
+ var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: 5px;\n font-size: 12px;\n"])));
28
28
  var TableFooter = function TableFooter(_ref) {
29
29
  var issueCount = _ref.issueCount,
30
30
  onRefresh = _ref.onRefresh,
@@ -49,7 +49,7 @@ var TableFooter = function TableFooter(_ref) {
49
49
  "data-testid": 'issue-count-wrapper'
50
50
  }, showIssueCount && (0, _react2.jsx)(_heading.default, {
51
51
  testId: "issue-count",
52
- level: "h400"
52
+ level: "h200"
53
53
  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
54
54
  value: issueCount
55
55
  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.footerMessages.issueText, {
@@ -307,7 +307,7 @@ export const IssueLikeDataTableView = ({
307
307
  tag: "span",
308
308
  testId: 'datasource-header-content'
309
309
  }, jsx(Heading, {
310
- level: "h400",
310
+ level: "h200",
311
311
  as: 'span'
312
312
  }, content));
313
313
  if (onVisibleColumnKeysChange && hasData) {
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
+ import styled from '@emotion/styled';
2
3
  import { useIntl } from 'react-intl-next';
4
+ import { FieldTextFontSize } from '../../styled';
3
5
  export const DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
4
6
  const dateOptions = {
5
7
  month: 'short',
@@ -11,6 +13,9 @@ const timeOptions = {
11
13
  hour: '2-digit',
12
14
  minute: '2-digit'
13
15
  };
16
+ const DateTimeWrapper = styled.span`
17
+ font-size: ${FieldTextFontSize};
18
+ `;
14
19
  const DateTimeRenderType = ({
15
20
  value,
16
21
  testId = DATETIME_TYPE_TEST_ID,
@@ -30,7 +35,7 @@ const DateTimeRenderType = ({
30
35
  }
31
36
  };
32
37
  const formattedString = intl.formatDate(date, options[display] || options['date']);
33
- return /*#__PURE__*/React.createElement("span", {
38
+ return /*#__PURE__*/React.createElement(DateTimeWrapper, {
34
39
  "data-testid": testId
35
40
  }, formattedString);
36
41
  };
@@ -4,7 +4,7 @@ import Image from '@atlaskit/image';
4
4
  const IconWrapper = styled.div`
5
5
  display: flex;
6
6
  align-items: center;
7
- justify-content: center;
7
+ justify-content: left;
8
8
  `;
9
9
  export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
10
10
  const IconRenderType = ({
@@ -3,6 +3,7 @@ import { Card } from '@atlaskit/smart-card';
3
3
  import LinkUrl from '@atlaskit/smart-card/link-url';
4
4
  import { N300 } from '@atlaskit/theme/colors';
5
5
  import { h300 } from '@atlaskit/theme/typography';
6
+ import { FieldTextFontSize } from '../../styled';
6
7
  const linkStyles = {
7
8
  key: {
8
9
  ...h300(),
@@ -23,7 +24,10 @@ const LinkRenderType = ({
23
24
  }, [style]);
24
25
  const anchor = useMemo(() => /*#__PURE__*/React.createElement(LinkUrl, {
25
26
  href: url,
26
- style: linkStyle,
27
+ style: {
28
+ ...linkStyle,
29
+ fontSize: FieldTextFontSize
30
+ },
27
31
  "data-testid": testId,
28
32
  target: "_blank"
29
33
  }, text || url), [linkStyle, url, text, testId]);
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import TextRenderType from '../text';
2
3
  export const NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
3
4
  const NumberRenderType = ({
4
5
  number,
@@ -7,9 +8,12 @@ const NumberRenderType = ({
7
8
  if (typeof number !== 'number') {
8
9
  return /*#__PURE__*/React.createElement(React.Fragment, null);
9
10
  }
10
- const formattedNumber = Number.isInteger(number) ? number : `${number.toFixed(2)}`;
11
- return /*#__PURE__*/React.createElement("span", {
12
- "data-testid": testId
13
- }, formattedNumber);
11
+ const formattedNumber = number.toLocaleString(undefined, {
12
+ maximumFractionDigits: 15
13
+ });
14
+ return /*#__PURE__*/React.createElement(TextRenderType, {
15
+ testId: testId,
16
+ text: formattedNumber
17
+ });
14
18
  };
15
19
  export default NumberRenderType;
@@ -1,5 +1,10 @@
1
1
  import React from 'react';
2
+ import styled from '@emotion/styled';
3
+ import { FieldTextFontSize } from '../../styled';
2
4
  export const TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
5
+ const TextWrapper = styled.span`
6
+ font-size: ${FieldTextFontSize};
7
+ `;
3
8
  const TextRenderType = ({
4
9
  text,
5
10
  testId = TEXT_TYPE_TEST_ID
@@ -7,7 +12,7 @@ const TextRenderType = ({
7
12
  if (!(text && typeof text === 'string')) {
8
13
  return /*#__PURE__*/React.createElement(React.Fragment, null);
9
14
  }
10
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
15
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextWrapper, {
11
16
  "data-testid": testId
12
17
  }, text), /*#__PURE__*/React.createElement("br", null));
13
18
  };
@@ -2,10 +2,12 @@ import React from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import { FormattedMessage } from 'react-intl-next';
4
4
  import Avatar from '@atlaskit/avatar';
5
+ import { FieldTextFontSize } from '../../styled';
5
6
  import { userTypeMessages } from './messages';
6
7
  const UserWrapper = styled.div`
7
8
  display: flex;
8
9
  align-items: center;
10
+ font-size: ${FieldTextFontSize};
9
11
  `;
10
12
  const AvatarWrapper = styled.div`
11
13
  margin-right: 5px;
@@ -1,5 +1,6 @@
1
1
  import styled from '@emotion/styled';
2
2
  import { N40 } from '@atlaskit/theme/colors';
3
+ export const FieldTextFontSize = '14px';
3
4
  export const Table = styled.table`
4
5
  width: 100%;
5
6
  `;
@@ -7,14 +8,13 @@ export const TableHeading = styled.th`
7
8
  cursor: grab;
8
9
  position: relative;
9
10
  padding-block: ${"var(--ds-space-100, 8px)"};
10
- line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
11
+ line-height: ${"var(--ds-font-lineHeight-300, 16px)"};
11
12
  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
12
13
  & [data-testid='datasource-header-content--container'] {
13
14
  margin-top: 0;
14
15
  overflow: hidden;
15
16
  text-overflow: ellipsis;
16
17
  white-space: nowrap;
17
- line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
18
18
  }
19
19
  `;
20
20
  export const EmptyStateTableHeading = styled(TableHeading)`
@@ -290,7 +290,7 @@ const analyticsContextAttributes = {
290
290
  };
291
291
  const analyticsContextData = {
292
292
  packageName: "@atlaskit/link-datasource",
293
- packageVersion: "1.0.3",
293
+ packageVersion: "1.0.4",
294
294
  source: 'datasourceConfigModal'
295
295
  };
296
296
  const contextData = {
@@ -34,6 +34,7 @@ const SyncWrapper = styled.div`
34
34
  `;
35
35
  const SyncTextWrapper = styled.div`
36
36
  margin-right: 5px;
37
+ font-size: 12px;
37
38
  `;
38
39
  export const TableFooter = ({
39
40
  issueCount,
@@ -57,7 +58,7 @@ export const TableFooter = ({
57
58
  "data-testid": 'issue-count-wrapper'
58
59
  }, showIssueCount && jsx(Heading, {
59
60
  testId: "issue-count",
60
- level: "h400"
61
+ level: "h200"
61
62
  }, jsx(FormattedNumber, {
62
63
  value: issueCount
63
64
  }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.issueText, {
@@ -339,7 +339,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
339
339
  tag: "span",
340
340
  testId: 'datasource-header-content'
341
341
  }, jsx(Heading, {
342
- level: "h400",
342
+ level: "h200",
343
343
  as: 'span'
344
344
  }, content));
345
345
  if (onVisibleColumnKeysChange && hasData) {
@@ -1,8 +1,12 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
+ var _templateObject;
2
4
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
6
  import React from 'react';
7
+ import styled from '@emotion/styled';
5
8
  import { useIntl } from 'react-intl-next';
9
+ import { FieldTextFontSize } from '../../styled';
6
10
  export var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
7
11
  var dateOptions = {
8
12
  month: 'short',
@@ -14,6 +18,7 @@ var timeOptions = {
14
18
  hour: '2-digit',
15
19
  minute: '2-digit'
16
20
  };
21
+ var DateTimeWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: ", ";\n"])), FieldTextFontSize);
17
22
  var DateTimeRenderType = function DateTimeRenderType(_ref) {
18
23
  var value = _ref.value,
19
24
  _ref$testId = _ref.testId,
@@ -31,7 +36,7 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
31
36
  datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
32
37
  };
33
38
  var formattedString = intl.formatDate(date, options[display] || options['date']);
34
- return /*#__PURE__*/React.createElement("span", {
39
+ return /*#__PURE__*/React.createElement(DateTimeWrapper, {
35
40
  "data-testid": testId
36
41
  }, formattedString);
37
42
  };
@@ -3,7 +3,7 @@ var _templateObject;
3
3
  import React from 'react';
4
4
  import styled from '@emotion/styled';
5
5
  import Image from '@atlaskit/image';
6
- var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
6
+ var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: left;\n"])));
7
7
  export var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
8
8
  var IconRenderType = function IconRenderType(_ref) {
9
9
  var label = _ref.label,
@@ -6,6 +6,7 @@ import { Card } from '@atlaskit/smart-card';
6
6
  import LinkUrl from '@atlaskit/smart-card/link-url';
7
7
  import { N300 } from '@atlaskit/theme/colors';
8
8
  import { h300 } from '@atlaskit/theme/typography';
9
+ import { FieldTextFontSize } from '../../styled';
9
10
  var linkStyles = {
10
11
  key: _objectSpread(_objectSpread({}, h300()), {}, {
11
12
  color: "var(--ds-text-subtlest, ".concat(N300, ")"),
@@ -26,7 +27,9 @@ var LinkRenderType = function LinkRenderType(_ref) {
26
27
  var anchor = useMemo(function () {
27
28
  return /*#__PURE__*/React.createElement(LinkUrl, {
28
29
  href: url,
29
- style: linkStyle,
30
+ style: _objectSpread(_objectSpread({}, linkStyle), {}, {
31
+ fontSize: FieldTextFontSize
32
+ }),
30
33
  "data-testid": testId,
31
34
  target: "_blank"
32
35
  }, text || url);
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import TextRenderType from '../text';
2
3
  export var NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
3
4
  var NumberRenderType = function NumberRenderType(_ref) {
4
5
  var number = _ref.number,
@@ -7,9 +8,12 @@ var NumberRenderType = function NumberRenderType(_ref) {
7
8
  if (typeof number !== 'number') {
8
9
  return /*#__PURE__*/React.createElement(React.Fragment, null);
9
10
  }
10
- var formattedNumber = Number.isInteger(number) ? number : "".concat(number.toFixed(2));
11
- return /*#__PURE__*/React.createElement("span", {
12
- "data-testid": testId
13
- }, formattedNumber);
11
+ var formattedNumber = number.toLocaleString(undefined, {
12
+ maximumFractionDigits: 15
13
+ });
14
+ return /*#__PURE__*/React.createElement(TextRenderType, {
15
+ testId: testId,
16
+ text: formattedNumber
17
+ });
14
18
  };
15
19
  export default NumberRenderType;
@@ -1,5 +1,10 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ var _templateObject;
1
3
  import React from 'react';
4
+ import styled from '@emotion/styled';
5
+ import { FieldTextFontSize } from '../../styled';
2
6
  export var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
7
+ var TextWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: ", ";\n"])), FieldTextFontSize);
3
8
  var TextRenderType = function TextRenderType(_ref) {
4
9
  var text = _ref.text,
5
10
  _ref$testId = _ref.testId,
@@ -7,7 +12,7 @@ var TextRenderType = function TextRenderType(_ref) {
7
12
  if (!(text && typeof text === 'string')) {
8
13
  return /*#__PURE__*/React.createElement(React.Fragment, null);
9
14
  }
10
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
15
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextWrapper, {
11
16
  "data-testid": testId
12
17
  }, text), /*#__PURE__*/React.createElement("br", null));
13
18
  };
@@ -4,8 +4,9 @@ import React from 'react';
4
4
  import styled from '@emotion/styled';
5
5
  import { FormattedMessage } from 'react-intl-next';
6
6
  import Avatar from '@atlaskit/avatar';
7
+ import { FieldTextFontSize } from '../../styled';
7
8
  import { userTypeMessages } from './messages';
8
- var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
9
+ var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n font-size: ", ";\n"])), FieldTextFontSize);
9
10
  var AvatarWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-right: 5px;\n"])));
10
11
  export var USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
11
12
  var UserType = function UserType(_ref) {
@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject, _templateObject2, _templateObject3;
3
3
  import styled from '@emotion/styled';
4
4
  import { N40 } from '@atlaskit/theme/colors';
5
+ export var FieldTextFontSize = '14px';
5
6
  export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n"])));
6
- export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: grab;\n position: relative;\n padding-block: ", ";\n line-height: ", ";\n border-bottom: 2px solid ", ";\n & [data-testid='datasource-header-content--container'] {\n margin-top: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: ", ";\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
7
+ export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: grab;\n position: relative;\n padding-block: ", ";\n line-height: ", ";\n border-bottom: 2px solid ", ";\n & [data-testid='datasource-header-content--container'] {\n margin-top: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
7
8
  export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:first-child {\n padding-left: ", ";\n }\n"])), "var(--ds-space-100, 8px)");
@@ -334,7 +334,7 @@ var analyticsContextAttributes = {
334
334
  };
335
335
  var analyticsContextData = {
336
336
  packageName: "@atlaskit/link-datasource",
337
- packageVersion: "1.0.3",
337
+ packageVersion: "1.0.4",
338
338
  source: 'datasourceConfigModal'
339
339
  };
340
340
  var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
@@ -17,7 +17,7 @@ var FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemp
17
17
  var TopBorderWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n padding: ", " 0;\n border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
18
18
  var IssueCounterWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n align-self: center;\n color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N800, ")"));
19
19
  var SyncWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N90, ")"));
20
- var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-right: 5px;\n"])));
20
+ var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-right: 5px;\n font-size: 12px;\n"])));
21
21
  export var TableFooter = function TableFooter(_ref) {
22
22
  var issueCount = _ref.issueCount,
23
23
  onRefresh = _ref.onRefresh,
@@ -42,7 +42,7 @@ export var TableFooter = function TableFooter(_ref) {
42
42
  "data-testid": 'issue-count-wrapper'
43
43
  }, showIssueCount && jsx(Heading, {
44
44
  testId: "issue-count",
45
- level: "h400"
45
+ level: "h200"
46
46
  }, jsx(FormattedNumber, {
47
47
  value: issueCount
48
48
  }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.issueText, {
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ export declare const FieldTextFontSize = "14px";
2
3
  export declare const Table: import("@emotion/styled").StyledComponent<{
3
4
  theme?: import("@emotion/react").Theme | undefined;
4
5
  as?: import("react").ElementType<any> | undefined;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ export declare const FieldTextFontSize = "14px";
2
3
  export declare const Table: import("@emotion/styled").StyledComponent<{
3
4
  theme?: import("@emotion/react").Theme | undefined;
4
5
  as?: import("react").ElementType<any> | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"