@atlaskit/link-datasource 3.13.0 → 3.13.1

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 (18) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/common/error-state/loading-error.js +11 -12
  3. package/dist/cjs/ui/common/error-state/modal-loading-error.js +10 -17
  4. package/dist/cjs/ui/common/error-state/no-instances.js +11 -11
  5. package/dist/cjs/ui/common/error-state/no-results.js +15 -19
  6. package/dist/cjs/ui/common/modal/count-view-smart-link/index.js +19 -15
  7. package/dist/es2019/ui/common/error-state/loading-error.js +11 -12
  8. package/dist/es2019/ui/common/error-state/modal-loading-error.js +10 -17
  9. package/dist/es2019/ui/common/error-state/no-instances.js +13 -13
  10. package/dist/es2019/ui/common/error-state/no-results.js +16 -20
  11. package/dist/es2019/ui/common/modal/count-view-smart-link/index.js +20 -16
  12. package/dist/esm/ui/common/error-state/loading-error.js +11 -12
  13. package/dist/esm/ui/common/error-state/modal-loading-error.js +10 -17
  14. package/dist/esm/ui/common/error-state/no-instances.js +13 -13
  15. package/dist/esm/ui/common/error-state/no-results.js +16 -20
  16. package/dist/esm/ui/common/modal/count-view-smart-link/index.js +20 -16
  17. package/examples-helpers/buildIssueLikeTable.tsx +2 -1
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 3.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#167375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167375)
8
+ [`ce85e442a7d6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce85e442a7d6e) -
9
+ [ux] Use atlaskit primitives for typography
10
+ - Updated dependencies
11
+
3
12
  ## 3.13.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/ui/common/error-state/loading-error.js CHANGED
@@ -9,6 +9,7 @@ var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _reactIntlNext = require("react-intl-next");
11
11
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
12
+ var _primitives = require("@atlaskit/primitives");
12
13
  var _typography = require("@atlaskit/theme/typography");
13
14
  var _analytics = require("../../../analytics");
14
15
  var _loadingErrorSvg = require("./loading-error-svg");
@@ -35,9 +36,6 @@ var errorMessageStyles = (0, _react2.css)({
35
36
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
36
37
  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
37
38
  });
38
- var errorDescriptionStyles = (0, _react2.css)({
39
- margin: 0
40
- });
41
39
  var LoadingError = exports.LoadingError = function LoadingError(_ref) {
42
40
  var onRefresh = _ref.onRefresh;
43
41
  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
@@ -47,15 +45,16 @@ var LoadingError = exports.LoadingError = function LoadingError(_ref) {
47
45
  reason: 'network'
48
46
  });
49
47
  }, [fireEvent]);
50
- return (0, _react2.jsx)("div", {
51
- css: errorContainerStyles,
52
- "data-testid": "datasource--loading-error"
53
- }, (0, _react2.jsx)(_loadingErrorSvg.LoadingErrorSVG, null), (0, _react2.jsx)("div", {
54
- css: errorMessageContainerStyles
55
- }, (0, _react2.jsx)("span", {
56
- css: errorMessageStyles
57
- }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.unableToLoadItems)), (0, _react2.jsx)("p", {
58
- css: errorDescriptionStyles
48
+ return (0, _react2.jsx)(_primitives.Box, {
49
+ xcss: errorContainerStyles,
50
+ testId: "datasource--loading-error"
51
+ }, (0, _react2.jsx)(_loadingErrorSvg.LoadingErrorSVG, null), (0, _react2.jsx)(_primitives.Box, {
52
+ xcss: errorMessageContainerStyles
53
+ }, (0, _react2.jsx)(_primitives.Inline, {
54
+ as: "span",
55
+ xcss: errorMessageStyles
56
+ }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.unableToLoadItems)), (0, _react2.jsx)(_primitives.Text, {
57
+ as: "p"
59
58
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.checkConnection)), onRefresh && (0, _react2.jsx)(_standardButton.default, {
60
59
  appearance: "primary",
61
60
  onClick: onRefresh
package/dist/cjs/ui/common/error-state/modal-loading-error.js CHANGED
@@ -7,7 +7,7 @@ exports.ModalLoadingError = void 0;
7
7
  var _react = require("react");
8
8
  var _react2 = require("@emotion/react");
9
9
  var _reactIntlNext = require("react-intl-next");
10
- var _typography = require("@atlaskit/theme/typography");
10
+ var _primitives = require("@atlaskit/primitives");
11
11
  var _analytics = require("../../../analytics");
12
12
  var _loadingErrorSvg = require("./loading-error-svg");
13
13
  var _messages = require("./messages");
@@ -29,13 +29,6 @@ var errorMessageContainerStyles = (0, _react2.css)({
29
29
  gap: "var(--ds-space-100, 8px)",
30
30
  placeItems: 'center'
31
31
  });
32
- var errorMessageStyles = (0, _react2.css)({
33
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
34
- font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
35
- });
36
- var errorDescriptionStyles = (0, _react2.css)({
37
- margin: 0
38
- });
39
32
  var ModalLoadingError = exports.ModalLoadingError = function ModalLoadingError(_ref) {
40
33
  var _ref$errorMessage = _ref.errorMessage,
41
34
  errorMessage = _ref$errorMessage === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.checkConnection) : _ref$errorMessage;
@@ -46,14 +39,14 @@ var ModalLoadingError = exports.ModalLoadingError = function ModalLoadingError(_
46
39
  reason: 'network'
47
40
  });
48
41
  }, [fireEvent]);
49
- return (0, _react2.jsx)("div", {
50
- css: errorContainerStyles,
51
- "data-testid": "datasource-modal--loading-error"
52
- }, (0, _react2.jsx)(_loadingErrorSvg.LoadingErrorSVG, null), (0, _react2.jsx)("div", {
53
- css: errorMessageContainerStyles
54
- }, (0, _react2.jsx)("span", {
55
- css: errorMessageStyles
56
- }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.unableToLoadResults)), (0, _react2.jsx)("p", {
57
- css: errorDescriptionStyles
42
+ return (0, _react2.jsx)(_primitives.Box, {
43
+ xcss: errorContainerStyles,
44
+ testId: "datasource-modal--loading-error"
45
+ }, (0, _react2.jsx)(_loadingErrorSvg.LoadingErrorSVG, null), (0, _react2.jsx)(_primitives.Box, {
46
+ xcss: errorMessageContainerStyles
47
+ }, (0, _react2.jsx)(_primitives.Text, {
48
+ size: "small"
49
+ }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.unableToLoadResults)), (0, _react2.jsx)(_primitives.Text, {
50
+ as: "p"
58
51
  }, errorMessage)));
59
52
  };
package/dist/cjs/ui/common/error-state/no-instances.js CHANGED
@@ -7,7 +7,6 @@ exports.NoInstancesView = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  var _reactIntlNext = require("react-intl-next");
9
9
  var _primitives = require("@atlaskit/primitives");
10
- var _typography = require("@atlaskit/theme/typography");
11
10
  var _noInstancesSvg = require("./no-instances-svg");
12
11
  /**
13
12
  * @jsxRuntime classic
@@ -15,13 +14,12 @@ var _noInstancesSvg = require("./no-instances-svg");
15
14
  */
16
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
16
 
18
- var titleStyles = (0, _react.css)({
19
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
20
- font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")"),
21
- marginTop: "var(--ds-space-200, 16px)"
17
+ var titleStyles = (0, _primitives.xcss)({
18
+ font: 'font.heading.small',
19
+ marginTop: 'space.200'
22
20
  });
23
- var descriptionStyles = (0, _react.css)({
24
- marginTop: "var(--ds-space-100, 8px)"
21
+ var descriptionStyles = (0, _primitives.xcss)({
22
+ marginTop: 'space.100'
25
23
  });
26
24
  var containerStyles = (0, _primitives.xcss)({
27
25
  marginTop: 'space.800'
@@ -37,9 +35,11 @@ var NoInstancesView = exports.NoInstancesView = function NoInstancesView(_ref) {
37
35
  direction: "column",
38
36
  alignItems: "center",
39
37
  xcss: containerStyles
40
- }, (0, _react.jsx)(_noInstancesSvg.NoInstancesSvg, null), (0, _react.jsx)("span", {
41
- css: titleStyles
42
- }, formatMessage(title)), (0, _react.jsx)("span", {
43
- css: descriptionStyles
38
+ }, (0, _react.jsx)(_noInstancesSvg.NoInstancesSvg, null), (0, _react.jsx)(_primitives.Inline, {
39
+ as: "span",
40
+ xcss: titleStyles
41
+ }, formatMessage(title)), (0, _react.jsx)(_primitives.Inline, {
42
+ as: "span",
43
+ xcss: descriptionStyles
44
44
  }, formatMessage(description)));
45
45
  };
package/dist/cjs/ui/common/error-state/no-results.js CHANGED
@@ -9,7 +9,7 @@ var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
10
  var _reactIntlNext = require("react-intl-next");
11
11
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
12
- var _typography = require("@atlaskit/theme/typography");
12
+ var _primitives = require("@atlaskit/primitives");
13
13
  var _analytics = require("../../../analytics");
14
14
  var _messages = require("./messages");
15
15
  /**
@@ -19,22 +19,16 @@ var _messages = require("./messages");
19
19
 
20
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
21
 
22
- var noResultsContainerStyles = (0, _react2.css)({
23
- margin: "var(--ds-space-500, 40px)".concat(" auto"),
24
- display: 'grid',
25
- gap: "var(--ds-space-300, 24px)",
22
+ var noResultsContainerStyles = (0, _primitives.xcss)({
23
+ margin: 'space.500',
24
+ gap: 'space.300',
26
25
  placeItems: 'center',
27
26
  placeSelf: 'center'
28
27
  });
29
- var noResultsMessageContainerStyles = (0, _react2.css)({
30
- display: 'grid',
31
- gap: "var(--ds-space-100, 8px)",
28
+ var noResultsMessageContainerStyles = (0, _primitives.xcss)({
29
+ gap: 'space.100',
32
30
  placeItems: 'center'
33
31
  });
34
- var noResultsMessageStyles = (0, _react2.css)({
35
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
36
- font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
37
- });
38
32
  var NoResults = exports.NoResults = function NoResults(_ref) {
39
33
  var onRefresh = _ref.onRefresh;
40
34
  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
@@ -42,9 +36,9 @@ var NoResults = exports.NoResults = function NoResults(_ref) {
42
36
  (0, _react.useEffect)(function () {
43
37
  fireEvent('ui.emptyResult.shown.datasource', {});
44
38
  }, [fireEvent]);
45
- return (0, _react2.jsx)("div", {
46
- css: noResultsContainerStyles,
47
- "data-testid": "datasource-modal--no-results"
39
+ return (0, _react2.jsx)(_primitives.Grid, {
40
+ xcss: noResultsContainerStyles,
41
+ testId: "datasource-modal--no-results"
48
42
  }, (0, _react2.jsx)("svg", {
49
43
  width: "131",
50
44
  height: "120",
@@ -170,10 +164,12 @@ var NoResults = exports.NoResults = function NoResults(_ref) {
170
164
  width: "130.927",
171
165
  height: "120",
172
166
  fill: "white"
173
- })))), (0, _react2.jsx)("div", {
174
- css: noResultsMessageContainerStyles
175
- }, (0, _react2.jsx)("span", {
176
- css: noResultsMessageStyles
167
+ })))), (0, _react2.jsx)(_primitives.Grid, {
168
+ xcss: noResultsMessageContainerStyles
169
+ }, (0, _react2.jsx)(_primitives.Text, {
170
+ as: "span",
171
+ size: "large",
172
+ weight: "bold"
177
173
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.noResultsFound)), onRefresh && (0, _react2.jsx)(_standardButton.default, {
178
174
  appearance: "primary",
179
175
  onClick: onRefresh
package/dist/cjs/ui/common/modal/count-view-smart-link/index.js CHANGED
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.SmartLink = exports.SmartCardPlaceholder = void 0;
8
8
  var _react = require("@emotion/react");
9
9
  var _reactIntlNext = require("react-intl-next");
10
- var _colors = require("@atlaskit/theme/colors");
10
+ var _primitives = require("@atlaskit/primitives");
11
11
  var _link = _interopRequireDefault(require("../../../issue-like-table/render-type/link"));
12
12
  /**
13
13
  * @jsxRuntime classic
@@ -15,29 +15,33 @@ var _link = _interopRequireDefault(require("../../../issue-like-table/render-typ
15
15
  */
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
17
 
18
- var placeholderSmartLinkStyles = (0, _react.css)({
19
- backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
18
+ var placeholderSmartLinkStyles = (0, _primitives.xcss)({
19
+ backgroundColor: 'elevation.surface.raised',
20
20
  borderRadius: "var(--ds-border-radius-200, 3px)",
21
- boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
22
- color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
23
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
21
+ color: 'color.text.brand',
22
+ paddingTop: 'space.0',
23
+ paddingBottom: 'space.0',
24
+ paddingLeft: 'space.025',
25
+ paddingRight: 'space.025',
26
+ boxShadow: 'elevation.shadow.raised'
24
27
  });
25
- var smartLinkContainerStyles = (0, _react.css)({
26
- paddingLeft: "var(--ds-space-025, 2px)"
28
+ var smartLinkContainerStyles = (0, _primitives.xcss)({
29
+ paddingLeft: 'space.025'
27
30
  });
28
31
  var SmartCardPlaceholder = exports.SmartCardPlaceholder = function SmartCardPlaceholder(_ref) {
29
32
  var placeholderText = _ref.placeholderText;
30
- return (0, _react.jsx)("div", {
31
- css: smartLinkContainerStyles
32
- }, (0, _react.jsx)("span", {
33
- "data-testid": "datasource-modal--smart-card-placeholder",
34
- css: placeholderSmartLinkStyles
33
+ return (0, _react.jsx)(_primitives.Box, {
34
+ xcss: smartLinkContainerStyles
35
+ }, (0, _react.jsx)(_primitives.Box, {
36
+ as: "span",
37
+ testId: "datasource-modal--smart-card-placeholder",
38
+ xcss: placeholderSmartLinkStyles
35
39
  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, placeholderText)));
36
40
  };
37
41
  var SmartLink = exports.SmartLink = function SmartLink(_ref2) {
38
42
  var url = _ref2.url;
39
- return (0, _react.jsx)("div", {
40
- css: smartLinkContainerStyles
43
+ return (0, _react.jsx)(_primitives.Box, {
44
+ xcss: smartLinkContainerStyles
41
45
  }, (0, _react.jsx)(_link.default, {
42
46
  url: url
43
47
  }));
package/dist/es2019/ui/common/error-state/loading-error.js CHANGED
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
10
  import Button from '@atlaskit/button/standard-button';
11
+ import { Box, Inline, Text } from '@atlaskit/primitives';
11
12
  import { fontFallback } from '@atlaskit/theme/typography';
12
13
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
13
14
  import { LoadingErrorSVG } from './loading-error-svg';
@@ -27,9 +28,6 @@ const errorMessageStyles = css({
27
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
28
29
  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
29
30
  });
30
- const errorDescriptionStyles = css({
31
- margin: 0
32
- });
33
31
  export const LoadingError = ({
34
32
  onRefresh
35
33
  }) => {
@@ -41,15 +39,16 @@ export const LoadingError = ({
41
39
  reason: 'network'
42
40
  });
43
41
  }, [fireEvent]);
44
- return jsx("div", {
45
- css: errorContainerStyles,
46
- "data-testid": "datasource--loading-error"
47
- }, jsx(LoadingErrorSVG, null), jsx("div", {
48
- css: errorMessageContainerStyles
49
- }, jsx("span", {
50
- css: errorMessageStyles
51
- }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx("p", {
52
- css: errorDescriptionStyles
42
+ return jsx(Box, {
43
+ xcss: errorContainerStyles,
44
+ testId: "datasource--loading-error"
45
+ }, jsx(LoadingErrorSVG, null), jsx(Box, {
46
+ xcss: errorMessageContainerStyles
47
+ }, jsx(Inline, {
48
+ as: "span",
49
+ xcss: errorMessageStyles
50
+ }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
51
+ as: "p"
53
52
  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
54
53
  appearance: "primary",
55
54
  onClick: onRefresh
package/dist/es2019/ui/common/error-state/modal-loading-error.js CHANGED
@@ -7,7 +7,7 @@ import { useEffect } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
- import { fontFallback } from '@atlaskit/theme/typography';
10
+ import { Box, Text } from '@atlaskit/primitives';
11
11
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
12
12
  import { LoadingErrorSVG } from './loading-error-svg';
13
13
  import { loadingErrorMessages } from './messages';
@@ -22,13 +22,6 @@ const errorMessageContainerStyles = css({
22
22
  gap: "var(--ds-space-100, 8px)",
23
23
  placeItems: 'center'
24
24
  });
25
- const errorMessageStyles = css({
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
27
- font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
28
- });
29
- const errorDescriptionStyles = css({
30
- margin: 0
31
- });
32
25
  export const ModalLoadingError = ({
33
26
  errorMessage = jsx(FormattedMessage, loadingErrorMessages.checkConnection)
34
27
  }) => {
@@ -40,14 +33,14 @@ export const ModalLoadingError = ({
40
33
  reason: 'network'
41
34
  });
42
35
  }, [fireEvent]);
43
- return jsx("div", {
44
- css: errorContainerStyles,
45
- "data-testid": "datasource-modal--loading-error"
46
- }, jsx(LoadingErrorSVG, null), jsx("div", {
47
- css: errorMessageContainerStyles
48
- }, jsx("span", {
49
- css: errorMessageStyles
50
- }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
51
- css: errorDescriptionStyles
36
+ return jsx(Box, {
37
+ xcss: errorContainerStyles,
38
+ testId: "datasource-modal--loading-error"
39
+ }, jsx(LoadingErrorSVG, null), jsx(Box, {
40
+ xcss: errorMessageContainerStyles
41
+ }, jsx(Text, {
42
+ size: "small"
43
+ }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx(Text, {
44
+ as: "p"
52
45
  }, errorMessage)));
53
46
  };
package/dist/es2019/ui/common/error-state/no-instances.js CHANGED
@@ -3,18 +3,16 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { css, jsx } from '@emotion/react';
6
+ import { jsx } from '@emotion/react';
7
7
  import { useIntl } from 'react-intl-next';
8
- import { Flex, xcss } from '@atlaskit/primitives';
9
- import { fontFallback } from '@atlaskit/theme/typography';
8
+ import { Flex, Inline, xcss } from '@atlaskit/primitives';
10
9
  import { NoInstancesSvg } from './no-instances-svg';
11
- const titleStyles = css({
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
13
- font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
14
- marginTop: "var(--ds-space-200, 16px)"
10
+ const titleStyles = xcss({
11
+ font: 'font.heading.small',
12
+ marginTop: 'space.200'
15
13
  });
16
- const descriptionStyles = css({
17
- marginTop: "var(--ds-space-100, 8px)"
14
+ const descriptionStyles = xcss({
15
+ marginTop: 'space.100'
18
16
  });
19
17
  const containerStyles = xcss({
20
18
  marginTop: 'space.800'
@@ -32,9 +30,11 @@ export const NoInstancesView = ({
32
30
  direction: "column",
33
31
  alignItems: "center",
34
32
  xcss: containerStyles
35
- }, jsx(NoInstancesSvg, null), jsx("span", {
36
- css: titleStyles
37
- }, formatMessage(title)), jsx("span", {
38
- css: descriptionStyles
33
+ }, jsx(NoInstancesSvg, null), jsx(Inline, {
34
+ as: "span",
35
+ xcss: titleStyles
36
+ }, formatMessage(title)), jsx(Inline, {
37
+ as: "span",
38
+ xcss: descriptionStyles
39
39
  }, formatMessage(description)));
40
40
  };
package/dist/es2019/ui/common/error-state/no-results.js CHANGED
@@ -5,28 +5,22 @@
5
5
  import { useEffect } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { css, jsx } from '@emotion/react';
8
+ import { jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
10
  import Button from '@atlaskit/button/standard-button';
11
- import { fontFallback } from '@atlaskit/theme/typography';
11
+ import { Grid, Text, xcss } from '@atlaskit/primitives';
12
12
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
13
13
  import { loadingErrorMessages } from './messages';
14
- const noResultsContainerStyles = css({
15
- margin: `${"var(--ds-space-500, 40px)"} auto`,
16
- display: 'grid',
17
- gap: "var(--ds-space-300, 24px)",
14
+ const noResultsContainerStyles = xcss({
15
+ margin: 'space.500',
16
+ gap: 'space.300',
18
17
  placeItems: 'center',
19
18
  placeSelf: 'center'
20
19
  });
21
- const noResultsMessageContainerStyles = css({
22
- display: 'grid',
23
- gap: "var(--ds-space-100, 8px)",
20
+ const noResultsMessageContainerStyles = xcss({
21
+ gap: 'space.100',
24
22
  placeItems: 'center'
25
23
  });
26
- const noResultsMessageStyles = css({
27
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
28
- font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
29
- });
30
24
  export const NoResults = ({
31
25
  onRefresh
32
26
  }) => {
@@ -36,9 +30,9 @@ export const NoResults = ({
36
30
  useEffect(() => {
37
31
  fireEvent('ui.emptyResult.shown.datasource', {});
38
32
  }, [fireEvent]);
39
- return jsx("div", {
40
- css: noResultsContainerStyles,
41
- "data-testid": "datasource-modal--no-results"
33
+ return jsx(Grid, {
34
+ xcss: noResultsContainerStyles,
35
+ testId: "datasource-modal--no-results"
42
36
  }, jsx("svg", {
43
37
  width: "131",
44
38
  height: "120",
@@ -164,10 +158,12 @@ export const NoResults = ({
164
158
  width: "130.927",
165
159
  height: "120",
166
160
  fill: "white"
167
- })))), jsx("div", {
168
- css: noResultsMessageContainerStyles
169
- }, jsx("span", {
170
- css: noResultsMessageStyles
161
+ })))), jsx(Grid, {
162
+ xcss: noResultsMessageContainerStyles
163
+ }, jsx(Text, {
164
+ as: "span",
165
+ size: "large",
166
+ weight: "bold"
171
167
  }, jsx(FormattedMessage, loadingErrorMessages.noResultsFound)), onRefresh && jsx(Button, {
172
168
  appearance: "primary",
173
169
  onClick: onRefresh
package/dist/es2019/ui/common/modal/count-view-smart-link/index.js CHANGED
@@ -3,32 +3,36 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { css, jsx } from '@emotion/react';
6
+ import { jsx } from '@emotion/react';
7
7
  import { FormattedMessage } from 'react-intl-next';
8
- import { B400, N0 } from '@atlaskit/theme/colors';
8
+ import { Box, xcss } from '@atlaskit/primitives';
9
9
  import LinkRenderType from '../../../issue-like-table/render-type/link';
10
- const placeholderSmartLinkStyles = css({
11
- backgroundColor: `var(--ds-surface-raised, ${N0})`,
10
+ const placeholderSmartLinkStyles = xcss({
11
+ backgroundColor: 'elevation.surface.raised',
12
12
  borderRadius: "var(--ds-border-radius-200, 3px)",
13
- boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
14
- color: `var(--ds-text-brand, ${B400})`,
15
- padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-025, 2px)"}`
13
+ color: 'color.text.brand',
14
+ paddingTop: 'space.0',
15
+ paddingBottom: 'space.0',
16
+ paddingLeft: 'space.025',
17
+ paddingRight: 'space.025',
18
+ boxShadow: 'elevation.shadow.raised'
16
19
  });
17
- const smartLinkContainerStyles = css({
18
- paddingLeft: "var(--ds-space-025, 2px)"
20
+ const smartLinkContainerStyles = xcss({
21
+ paddingLeft: 'space.025'
19
22
  });
20
23
  export const SmartCardPlaceholder = ({
21
24
  placeholderText
22
- }) => jsx("div", {
23
- css: smartLinkContainerStyles
24
- }, jsx("span", {
25
- "data-testid": `datasource-modal--smart-card-placeholder`,
26
- css: placeholderSmartLinkStyles
25
+ }) => jsx(Box, {
26
+ xcss: smartLinkContainerStyles
27
+ }, jsx(Box, {
28
+ as: "span",
29
+ testId: "datasource-modal--smart-card-placeholder",
30
+ xcss: placeholderSmartLinkStyles
27
31
  }, jsx(FormattedMessage, placeholderText)));
28
32
  export const SmartLink = ({
29
33
  url
30
- }) => jsx("div", {
31
- css: smartLinkContainerStyles
34
+ }) => jsx(Box, {
35
+ xcss: smartLinkContainerStyles
32
36
  }, jsx(LinkRenderType, {
33
37
  url: url
34
38
  }));
package/dist/esm/ui/common/error-state/loading-error.js CHANGED
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
10
  import Button from '@atlaskit/button/standard-button';
11
+ import { Box, Inline, Text } from '@atlaskit/primitives';
11
12
  import { fontFallback } from '@atlaskit/theme/typography';
12
13
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
13
14
  import { LoadingErrorSVG } from './loading-error-svg';
@@ -27,9 +28,6 @@ var errorMessageStyles = css({
27
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
28
29
  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
29
30
  });
30
- var errorDescriptionStyles = css({
31
- margin: 0
32
- });
33
31
  export var LoadingError = function LoadingError(_ref) {
34
32
  var onRefresh = _ref.onRefresh;
35
33
  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -39,15 +37,16 @@ export var LoadingError = function LoadingError(_ref) {
39
37
  reason: 'network'
40
38
  });
41
39
  }, [fireEvent]);
42
- return jsx("div", {
43
- css: errorContainerStyles,
44
- "data-testid": "datasource--loading-error"
45
- }, jsx(LoadingErrorSVG, null), jsx("div", {
46
- css: errorMessageContainerStyles
47
- }, jsx("span", {
48
- css: errorMessageStyles
49
- }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx("p", {
50
- css: errorDescriptionStyles
40
+ return jsx(Box, {
41
+ xcss: errorContainerStyles,
42
+ testId: "datasource--loading-error"
43
+ }, jsx(LoadingErrorSVG, null), jsx(Box, {
44
+ xcss: errorMessageContainerStyles
45
+ }, jsx(Inline, {
46
+ as: "span",
47
+ xcss: errorMessageStyles
48
+ }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
49
+ as: "p"
51
50
  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
52
51
  appearance: "primary",
53
52
  onClick: onRefresh
package/dist/esm/ui/common/error-state/modal-loading-error.js CHANGED
@@ -7,7 +7,7 @@ import { useEffect } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
- import { fontFallback } from '@atlaskit/theme/typography';
10
+ import { Box, Text } from '@atlaskit/primitives';
11
11
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
12
12
  import { LoadingErrorSVG } from './loading-error-svg';
13
13
  import { loadingErrorMessages } from './messages';
@@ -22,13 +22,6 @@ var errorMessageContainerStyles = css({
22
22
  gap: "var(--ds-space-100, 8px)",
23
23
  placeItems: 'center'
24
24
  });
25
- var errorMessageStyles = css({
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
27
- font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
28
- });
29
- var errorDescriptionStyles = css({
30
- margin: 0
31
- });
32
25
  export var ModalLoadingError = function ModalLoadingError(_ref) {
33
26
  var _ref$errorMessage = _ref.errorMessage,
34
27
  errorMessage = _ref$errorMessage === void 0 ? jsx(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
@@ -39,14 +32,14 @@ export var ModalLoadingError = function ModalLoadingError(_ref) {
39
32
  reason: 'network'
40
33
  });
41
34
  }, [fireEvent]);
42
- return jsx("div", {
43
- css: errorContainerStyles,
44
- "data-testid": "datasource-modal--loading-error"
45
- }, jsx(LoadingErrorSVG, null), jsx("div", {
46
- css: errorMessageContainerStyles
47
- }, jsx("span", {
48
- css: errorMessageStyles
49
- }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
50
- css: errorDescriptionStyles
35
+ return jsx(Box, {
36
+ xcss: errorContainerStyles,
37
+ testId: "datasource-modal--loading-error"
38
+ }, jsx(LoadingErrorSVG, null), jsx(Box, {
39
+ xcss: errorMessageContainerStyles
40
+ }, jsx(Text, {
41
+ size: "small"
42
+ }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx(Text, {
43
+ as: "p"
51
44
  }, errorMessage)));
52
45
  };
package/dist/esm/ui/common/error-state/no-instances.js CHANGED
@@ -3,18 +3,16 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { css, jsx } from '@emotion/react';
6
+ import { jsx } from '@emotion/react';
7
7
  import { useIntl } from 'react-intl-next';
8
- import { Flex, xcss } from '@atlaskit/primitives';
9
- import { fontFallback } from '@atlaskit/theme/typography';
8
+ import { Flex, Inline, xcss } from '@atlaskit/primitives';
10
9
  import { NoInstancesSvg } from './no-instances-svg';
11
- var titleStyles = css({
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
13
- font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")"),
14
- marginTop: "var(--ds-space-200, 16px)"
10
+ var titleStyles = xcss({
11
+ font: 'font.heading.small',
12
+ marginTop: 'space.200'
15
13
  });
16
- var descriptionStyles = css({
17
- marginTop: "var(--ds-space-100, 8px)"
14
+ var descriptionStyles = xcss({
15
+ marginTop: 'space.100'
18
16
  });
19
17
  var containerStyles = xcss({
20
18
  marginTop: 'space.800'
@@ -30,9 +28,11 @@ export var NoInstancesView = function NoInstancesView(_ref) {
30
28
  direction: "column",
31
29
  alignItems: "center",
32
30
  xcss: containerStyles
33
- }, jsx(NoInstancesSvg, null), jsx("span", {
34
- css: titleStyles
35
- }, formatMessage(title)), jsx("span", {
36
- css: descriptionStyles
31
+ }, jsx(NoInstancesSvg, null), jsx(Inline, {
32
+ as: "span",
33
+ xcss: titleStyles
34
+ }, formatMessage(title)), jsx(Inline, {
35
+ as: "span",
36
+ xcss: descriptionStyles
37
37
  }, formatMessage(description)));
38
38
  };
package/dist/esm/ui/common/error-state/no-results.js CHANGED
@@ -5,28 +5,22 @@
5
5
  import { useEffect } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { css, jsx } from '@emotion/react';
8
+ import { jsx } from '@emotion/react';
9
9
  import { FormattedMessage } from 'react-intl-next';
10
10
  import Button from '@atlaskit/button/standard-button';
11
- import { fontFallback } from '@atlaskit/theme/typography';
11
+ import { Grid, Text, xcss } from '@atlaskit/primitives';
12
12
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
13
13
  import { loadingErrorMessages } from './messages';
14
- var noResultsContainerStyles = css({
15
- margin: "var(--ds-space-500, 40px)".concat(" auto"),
16
- display: 'grid',
17
- gap: "var(--ds-space-300, 24px)",
14
+ var noResultsContainerStyles = xcss({
15
+ margin: 'space.500',
16
+ gap: 'space.300',
18
17
  placeItems: 'center',
19
18
  placeSelf: 'center'
20
19
  });
21
- var noResultsMessageContainerStyles = css({
22
- display: 'grid',
23
- gap: "var(--ds-space-100, 8px)",
20
+ var noResultsMessageContainerStyles = xcss({
21
+ gap: 'space.100',
24
22
  placeItems: 'center'
25
23
  });
26
- var noResultsMessageStyles = css({
27
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
28
- font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
29
- });
30
24
  export var NoResults = function NoResults(_ref) {
31
25
  var onRefresh = _ref.onRefresh;
32
26
  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -34,9 +28,9 @@ export var NoResults = function NoResults(_ref) {
34
28
  useEffect(function () {
35
29
  fireEvent('ui.emptyResult.shown.datasource', {});
36
30
  }, [fireEvent]);
37
- return jsx("div", {
38
- css: noResultsContainerStyles,
39
- "data-testid": "datasource-modal--no-results"
31
+ return jsx(Grid, {
32
+ xcss: noResultsContainerStyles,
33
+ testId: "datasource-modal--no-results"
40
34
  }, jsx("svg", {
41
35
  width: "131",
42
36
  height: "120",
@@ -162,10 +156,12 @@ export var NoResults = function NoResults(_ref) {
162
156
  width: "130.927",
163
157
  height: "120",
164
158
  fill: "white"
165
- })))), jsx("div", {
166
- css: noResultsMessageContainerStyles
167
- }, jsx("span", {
168
- css: noResultsMessageStyles
159
+ })))), jsx(Grid, {
160
+ xcss: noResultsMessageContainerStyles
161
+ }, jsx(Text, {
162
+ as: "span",
163
+ size: "large",
164
+ weight: "bold"
169
165
  }, jsx(FormattedMessage, loadingErrorMessages.noResultsFound)), onRefresh && jsx(Button, {
170
166
  appearance: "primary",
171
167
  onClick: onRefresh
package/dist/esm/ui/common/modal/count-view-smart-link/index.js CHANGED
@@ -3,33 +3,37 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { css, jsx } from '@emotion/react';
6
+ import { jsx } from '@emotion/react';
7
7
  import { FormattedMessage } from 'react-intl-next';
8
- import { B400, N0 } from '@atlaskit/theme/colors';
8
+ import { Box, xcss } from '@atlaskit/primitives';
9
9
  import LinkRenderType from '../../../issue-like-table/render-type/link';
10
- var placeholderSmartLinkStyles = css({
11
- backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),
10
+ var placeholderSmartLinkStyles = xcss({
11
+ backgroundColor: 'elevation.surface.raised',
12
12
  borderRadius: "var(--ds-border-radius-200, 3px)",
13
- boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
14
- color: "var(--ds-text-brand, ".concat(B400, ")"),
15
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
13
+ color: 'color.text.brand',
14
+ paddingTop: 'space.0',
15
+ paddingBottom: 'space.0',
16
+ paddingLeft: 'space.025',
17
+ paddingRight: 'space.025',
18
+ boxShadow: 'elevation.shadow.raised'
16
19
  });
17
- var smartLinkContainerStyles = css({
18
- paddingLeft: "var(--ds-space-025, 2px)"
20
+ var smartLinkContainerStyles = xcss({
21
+ paddingLeft: 'space.025'
19
22
  });
20
23
  export var SmartCardPlaceholder = function SmartCardPlaceholder(_ref) {
21
24
  var placeholderText = _ref.placeholderText;
22
- return jsx("div", {
23
- css: smartLinkContainerStyles
24
- }, jsx("span", {
25
- "data-testid": "datasource-modal--smart-card-placeholder",
26
- css: placeholderSmartLinkStyles
25
+ return jsx(Box, {
26
+ xcss: smartLinkContainerStyles
27
+ }, jsx(Box, {
28
+ as: "span",
29
+ testId: "datasource-modal--smart-card-placeholder",
30
+ xcss: placeholderSmartLinkStyles
27
31
  }, jsx(FormattedMessage, placeholderText)));
28
32
  };
29
33
  export var SmartLink = function SmartLink(_ref2) {
30
34
  var url = _ref2.url;
31
- return jsx("div", {
32
- css: smartLinkContainerStyles
35
+ return jsx(Box, {
36
+ xcss: smartLinkContainerStyles
33
37
  }, jsx(LinkRenderType, {
34
38
  url: url
35
39
  }));
package/examples-helpers/buildIssueLikeTable.tsx CHANGED
@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
12
12
  import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
13
13
  import { SmartCardProvider } from '@atlaskit/link-provider';
14
14
  import { mockDatasourceFetchRequests } from '@atlaskit/link-test-helpers/datasource';
15
+ import { Text } from '@atlaskit/primitives';
15
16
 
16
17
  import { fetchMessagesForLocale } from '../src/common/utils/locale/fetch-messages-for-locale';
17
18
  import { DatasourceExperienceIdProvider } from '../src/contexts/datasource-experience-id';
@@ -119,7 +120,7 @@ const ExampleBody = ({
119
120
  wrappedColumnKeys={wrappedColumnKeys}
120
121
  />
121
122
  ) : (
122
- <span>Loading ...</span>
123
+ <Text as="span">Loading ...</Text>
123
124
  )}
124
125
  </TableViewWrapper>
125
126
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "3.13.0",
3
+ "version": "3.13.1",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -73,7 +73,7 @@
73
73
  "@atlaskit/primitives": "^13.2.0",
74
74
  "@atlaskit/react-select": "^1.4.0",
75
75
  "@atlaskit/select": "^18.6.0",
76
- "@atlaskit/smart-card": "^30.3.0",
76
+ "@atlaskit/smart-card": "^31.0.0",
77
77
  "@atlaskit/smart-user-picker": "6.11.2",
78
78
  "@atlaskit/spinner": "^16.3.0",
79
79
  "@atlaskit/tag": "^12.6.0",