@atlaskit/link-datasource 4.9.2 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/link-datasource
 
+## 4.10.0
+
+### Minor Changes
+
+- [#152998](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152998)
+  [`1218a87e3f6f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1218a87e3f6f4) -
+  [ux] Behind fg `replace-legacy-button-in-sllv` - replaces legacy Button component with new Button
+  component
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.9.3
+
+### Patch Changes
+
+- [#150802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150802)
+  [`8e884525a16fa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e884525a16fa) -
+  [ux] Behind fg `platform-linking-visual-refresh-sllv` - Fixed issues with loading error and table
+  footer paddings
+- Updated dependencies
+
 ## 4.9.2
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/index.js

@@ -15,11 +15,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
+var _new = require("@atlaskit/button/new");
 var _form = require("@atlaskit/form");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
 var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _colors = require("@atlaskit/theme/colors");
@@ -48,6 +51,9 @@ if (process.env.NODE_ENV !== 'production') {
 var buttonBaseStyles = null;
 var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = null;
+var styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
   if (lastValidationResult.type === 'loading') {
     return /*#__PURE__*/React.createElement(_spinner.default, {
@@ -120,7 +126,24 @@ var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref2) {
         LEGACY_size: "medium",
         testId: "assets-datasource-modal-help",
         spacing: "spacious"
-      }))), /*#__PURE__*/React.createElement(_button.LoadingButton, {
+      }))), (0, _platformFeatureFlags.fg)('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.searchButtonContainer
+      }, /*#__PURE__*/React.createElement(_new.IconButton, {
+        appearance: "primary",
+        isLoading: isSearching,
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/React.createElement(_searchEditorSearch.default, (0, _extends2.default)({}, iconProps, {
+            LEGACY_size: "medium",
+            spacing: "spacious",
+            color: "currentColor"
+          }));
+        },
+        spacing: "compact",
+        type: "submit",
+        label: formatMessage(_messages.searchInputMessages.placeholder),
+        isDisabled: lastValidationResult.type !== 'valid',
+        testId: "assets-datasource-modal--aql-search-button"
+      })) : /*#__PURE__*/React.createElement(_button.LoadingButton, {
         appearance: "primary",
         iconBefore: /*#__PURE__*/React.createElement(_searchEditorSearch.default, {
           label: formatMessage(_messages.searchInputMessages.placeholder),

package/dist/cjs/ui/common/error-state/loading-error.compiled.css

@@ -1,10 +1,12 @@
 
 ._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zroahv{padding-inline:var(--ds-space-600,3pc)}
+._1rjcoahv{padding-block:var(--ds-space-600,3pc)}._10fp1h6o{justify-self:center}
 ._1e0c11p5{display:grid}
 ._1wpz1h6o{align-self:center}
 ._4cvr1h6o{align-items:center}
 ._6a6z1h6o{justify-items:center}
-._p12fko4j{max-width:19pc}
+._p12f1kdj{max-width:25pc}
 ._y3gn1h6o{text-align:center}

package/dist/cjs/ui/common/error-state/loading-error.js

@@ -25,7 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
   errorContainerStylesOld: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
-  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5 _p12fko4j _y3gn1h6o",
+  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _18zroahv _1rjcoahv _1e0c11p5 _p12f1kdj _y3gn1h6o",
   errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
   errorMessageStyles: "_11c8nbxd"
 };

package/dist/cjs/ui/common/error-state/provider-auth-required.js

@@ -15,8 +15,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 var _outboundAuthFlowClient = require("@atlaskit/outbound-auth-flow-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _analytics = require("../../../analytics");
 var _useErrorLogger2 = _interopRequireDefault(require("../../../hooks/useErrorLogger"));
@@ -25,6 +27,9 @@ var _providerAuthRequiredSvg = require("./provider-auth-required-svg");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var buttonStyles = null;
+var styles = {
+  buttonContainer: "_19pkpxbi"
+};
 var learnMoreAboutSmartLinksUrl = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-Links-from-Jira-and-other-products';
 var ProviderAuthRequired = exports.ProviderAuthRequired = function ProviderAuthRequired(_ref) {
   var _ref$auth = _ref.auth,
@@ -95,7 +100,12 @@ var ProviderAuthRequired = exports.ProviderAuthRequired = function ProviderAuthR
     }, formatMessage(_messages.loadingErrorMessages.learnMoreAboutSmartLinks)));
   };
   var renderAuthConnectButton = function renderAuthConnectButton() {
-    return /*#__PURE__*/_react.default.createElement(_button.default, {
+    return (0, _platformFeatureFlags.fg)('replace-legacy-button-in-sllv') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.buttonContainer
+    }, /*#__PURE__*/_react.default.createElement(_new.default, {
+      onClick: onAuthRequest,
+      appearance: "primary"
+    }, formatMessage(_messages.loadingErrorMessages.authConnectButtonText))) : /*#__PURE__*/_react.default.createElement(_button.default, {
       onClick: onAuthRequest,
       appearance: "primary",
       className: (0, _runtime.ax)(["_19pkpxbi"])

package/dist/cjs/ui/common/modal/basic-search-input/index.js

@@ -10,16 +10,22 @@ exports.BasicSearchInput = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
+var _new = require("@atlaskit/button/new");
 var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _analytics = require("../../../../analytics");
 var _messages = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var searchButtonStyles = null;
+var styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 var formStyles = null;
 var formWithMaxWidthStylesOld = null;
 var formWithMaxWidthStyles = null;
@@ -49,7 +55,25 @@ var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref
     onSubmit: handleFormSubmit,
     className: (0, _runtime.ax)([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-sllv') ? "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
   }, /*#__PURE__*/React.createElement(_textfield.default, {
-    elemAfterInput: /*#__PURE__*/React.createElement(_button.LoadingButton, {
+    elemAfterInput: (0, _platformFeatureFlags.fg)('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.searchButtonContainer
+    }, /*#__PURE__*/React.createElement(_new.IconButton, {
+      appearance: "primary",
+      isLoading: isSearching,
+      icon: function icon(iconProps) {
+        return /*#__PURE__*/React.createElement(_searchEditorSearch.default, (0, _extends2.default)({}, iconProps, {
+          LEGACY_size: "medium",
+          spacing: "spacious",
+          color: "currentColor"
+        }));
+      },
+      spacing: "compact",
+      type: "submit",
+      label: formatMessage((0, _platformFeatureFlags.fg)('confluence-issue-terminology-refresh') ? _messages.basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : _messages.basicSearchInputMessages.basicTextSearchLabel),
+      isDisabled: isDisabled,
+      testId: "".concat(testId, "--basic-search-button"),
+      onClick: handleSearchWithAnalytics
+    })) : /*#__PURE__*/React.createElement(_button.LoadingButton, {
       appearance: "primary",
       iconBefore: /*#__PURE__*/React.createElement(_searchEditorSearch.default, {
         label: formatMessage((0, _platformFeatureFlags.fg)('confluence-issue-terminology-refresh') ? _messages.basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : _messages.basicSearchInputMessages.basicTextSearchLabel),

package/dist/cjs/ui/table-footer/index.compiled.css

@@ -12,10 +12,10 @@
 ._4cvr1h6o{align-items:center}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
-._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._qrwqidpf{border-top-right-radius:0}

package/dist/cjs/ui/table-footer/index.js

@@ -34,7 +34,7 @@ var _excluded = ["as", "style"],
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
-  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
+  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
   separator: "_syazmuej"
 };
 
@@ -185,7 +185,19 @@ var TableFooter = exports.TableFooter = function TableFooter(_ref5) {
     "data-testid": "sync-text"
   }, isLoading ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.footerMessages.loadingText) : /*#__PURE__*/React.createElement(_syncInfo.SyncInfo, {
     lastSyncTime: lastSyncTime
-  })), /*#__PURE__*/React.createElement(_button.default, {
+  })), (0, _platformFeatureFlags.fg)('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(_new.IconButton, {
+    onClick: onRefresh,
+    appearance: "subtle",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_refresh.default, (0, _extends2.default)({}, iconProps, {
+        color: "currentColor",
+        spacing: "spacious"
+      }));
+    },
+    label: intl.formatMessage(_messages.footerMessages.refreshLabel),
+    isDisabled: isLoading,
+    testId: "refresh-button"
+  }) : /*#__PURE__*/React.createElement(_button.default, {
     onClick: onRefresh,
     appearance: "subtle",
     iconBefore: /*#__PURE__*/React.createElement(_refresh.default, {

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -7,11 +7,14 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';
@@ -38,6 +41,9 @@ if (process.env.NODE_ENV !== 'production') {
 const buttonBaseStyles = null;
 const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 const searchButtonStyles = null;
+const styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 const renderValidatorIcon = lastValidationResult => {
   if (lastValidationResult.type === 'loading') {
     return /*#__PURE__*/React.createElement(Spinner, {
@@ -112,7 +118,22 @@ export const AqlSearchInput = ({
       LEGACY_size: "medium",
       testId: "assets-datasource-modal-help",
       spacing: "spacious"
-    }))), /*#__PURE__*/React.createElement(LoadingButton, {
+    }))), fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.searchButtonContainer
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      appearance: "primary",
+      isLoading: isSearching,
+      icon: iconProps => /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
+        LEGACY_size: "medium",
+        spacing: "spacious",
+        color: "currentColor"
+      })),
+      spacing: "compact",
+      type: "submit",
+      label: formatMessage(searchInputMessages.placeholder),
+      isDisabled: lastValidationResult.type !== 'valid',
+      testId: "assets-datasource-modal--aql-search-button"
+    })) : /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
       iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
         label: formatMessage(searchInputMessages.placeholder),

package/dist/es2019/ui/common/error-state/loading-error.compiled.css

@@ -1,10 +1,12 @@
 
 ._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zroahv{padding-inline:var(--ds-space-600,3pc)}
+._1rjcoahv{padding-block:var(--ds-space-600,3pc)}._10fp1h6o{justify-self:center}
 ._1e0c11p5{display:grid}
 ._1wpz1h6o{align-self:center}
 ._4cvr1h6o{align-items:center}
 ._6a6z1h6o{justify-items:center}
-._p12fko4j{max-width:19pc}
+._p12f1kdj{max-width:25pc}
 ._y3gn1h6o{text-align:center}

package/dist/es2019/ui/common/error-state/loading-error.js

@@ -15,7 +15,7 @@ import { SpotErrorSearch } from '../../../common/ui/spot/error-state/search';
 import { loadingErrorMessages } from './messages';
 const styles = {
   errorContainerStylesOld: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
-  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5 _p12fko4j _y3gn1h6o",
+  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _18zroahv _1rjcoahv _1e0c11p5 _p12f1kdj _y3gn1h6o",
   errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
   errorMessageStyles: "_11c8nbxd"
 };

package/dist/es2019/ui/common/error-state/provider-auth-required.js

@@ -3,15 +3,20 @@ import "./provider-auth-required.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button';
+import ButtonOld from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
 import EmptyState from '@atlaskit/empty-state';
 import { AuthError, auth as outboundAuth } from '@atlaskit/outbound-auth-flow-client';
-import { Anchor } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Box } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import useErrorLogger from '../../../hooks/useErrorLogger';
 import { loadingErrorMessages } from './messages';
 import { ProviderAuthRequiredSVG } from './provider-auth-required-svg';
 const buttonStyles = null;
+const styles = {
+  buttonContainer: "_19pkpxbi"
+};
 const learnMoreAboutSmartLinksUrl = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-Links-from-Jira-and-other-products';
 export const ProviderAuthRequired = ({
   auth = [],
@@ -63,7 +68,12 @@ export const ProviderAuthRequired = ({
     target: "_blank",
     rel: "noreferrer noopener"
   }, formatMessage(loadingErrorMessages.learnMoreAboutSmartLinks)));
-  const renderAuthConnectButton = () => /*#__PURE__*/React.createElement(Button, {
+  const renderAuthConnectButton = () => fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onAuthRequest,
+    appearance: "primary"
+  }, formatMessage(loadingErrorMessages.authConnectButtonText))) : /*#__PURE__*/React.createElement(ButtonOld, {
     onClick: onAuthRequest,
     appearance: "primary",
     className: ax(["_19pkpxbi"])

package/dist/es2019/ui/common/modal/basic-search-input/index.js

@@ -1,15 +1,21 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
 const searchButtonStyles = null;
+const styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 const formStyles = null;
 const formWithMaxWidthStylesOld = null;
 const formWithMaxWidthStyles = null;
@@ -42,7 +48,23 @@ export const BasicSearchInput = ({
     onSubmit: handleFormSubmit,
     className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : fg('platform-linking-visual-refresh-sllv') ? "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
   }, /*#__PURE__*/React.createElement(Textfield, {
-    elemAfterInput: /*#__PURE__*/React.createElement(LoadingButton, {
+    elemAfterInput: fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.searchButtonContainer
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      appearance: "primary",
+      isLoading: isSearching,
+      icon: iconProps => /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
+        LEGACY_size: "medium",
+        spacing: "spacious",
+        color: "currentColor"
+      })),
+      spacing: "compact",
+      type: "submit",
+      label: formatMessage(fg('confluence-issue-terminology-refresh') ? basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : basicSearchInputMessages.basicTextSearchLabel),
+      isDisabled: isDisabled,
+      testId: `${testId}--basic-search-button`,
+      onClick: handleSearchWithAnalytics
+    })) : /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
       iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
         label: formatMessage(fg('confluence-issue-terminology-refresh') ? basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : basicSearchInputMessages.basicTextSearchLabel),

package/dist/es2019/ui/table-footer/index.compiled.css

@@ -12,10 +12,10 @@
 ._4cvr1h6o{align-items:center}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
-._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._qrwqidpf{border-top-right-radius:0}

package/dist/es2019/ui/table-footer/index.js

@@ -19,7 +19,7 @@ import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { ProviderLink } from './provider-link';
 import { SyncInfo } from './sync-info';
 const styles = {
-  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
+  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
   separator: "_syazmuej"
 };
 
@@ -166,7 +166,17 @@ export const TableFooter = ({
     "data-testid": "sync-text"
   }, isLoading ? /*#__PURE__*/React.createElement(FormattedMessage, footerMessages.loadingText) : /*#__PURE__*/React.createElement(SyncInfo, {
     lastSyncTime: lastSyncTime
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onRefresh,
+    appearance: "subtle",
+    icon: iconProps => /*#__PURE__*/React.createElement(RefreshIcon, _extends({}, iconProps, {
+      color: "currentColor",
+      spacing: "spacious"
+    })),
+    label: intl.formatMessage(footerMessages.refreshLabel),
+    isDisabled: isLoading,
+    testId: "refresh-button"
+  }) : /*#__PURE__*/React.createElement(Button, {
     onClick: onRefresh,
     appearance: "subtle",
     iconBefore: /*#__PURE__*/React.createElement(RefreshIcon, {

package/dist/esm/ui/assets-modal/search-container/aql-search-input/index.js

@@ -9,11 +9,14 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';
@@ -40,6 +43,9 @@ if (process.env.NODE_ENV !== 'production') {
 var buttonBaseStyles = null;
 var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = null;
+var styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
   if (lastValidationResult.type === 'loading') {
     return /*#__PURE__*/React.createElement(Spinner, {
@@ -112,7 +118,24 @@ export var AqlSearchInput = function AqlSearchInput(_ref2) {
         LEGACY_size: "medium",
         testId: "assets-datasource-modal-help",
         spacing: "spacious"
-      }))), /*#__PURE__*/React.createElement(LoadingButton, {
+      }))), fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+        xcss: styles.searchButtonContainer
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        appearance: "primary",
+        isLoading: isSearching,
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
+            LEGACY_size: "medium",
+            spacing: "spacious",
+            color: "currentColor"
+          }));
+        },
+        spacing: "compact",
+        type: "submit",
+        label: formatMessage(searchInputMessages.placeholder),
+        isDisabled: lastValidationResult.type !== 'valid',
+        testId: "assets-datasource-modal--aql-search-button"
+      })) : /*#__PURE__*/React.createElement(LoadingButton, {
         appearance: "primary",
         iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
           label: formatMessage(searchInputMessages.placeholder),

package/dist/esm/ui/common/error-state/loading-error.compiled.css

@@ -1,10 +1,12 @@
 
 ._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zroahv{padding-inline:var(--ds-space-600,3pc)}
+._1rjcoahv{padding-block:var(--ds-space-600,3pc)}._10fp1h6o{justify-self:center}
 ._1e0c11p5{display:grid}
 ._1wpz1h6o{align-self:center}
 ._4cvr1h6o{align-items:center}
 ._6a6z1h6o{justify-items:center}
-._p12fko4j{max-width:19pc}
+._p12f1kdj{max-width:25pc}
 ._y3gn1h6o{text-align:center}

package/dist/esm/ui/common/error-state/loading-error.js

@@ -15,7 +15,7 @@ import { SpotErrorSearch } from '../../../common/ui/spot/error-state/search';
 import { loadingErrorMessages } from './messages';
 var styles = {
   errorContainerStylesOld: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
-  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5 _p12fko4j _y3gn1h6o",
+  errorContainerStylesNew: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _18zroahv _1rjcoahv _1e0c11p5 _p12f1kdj _y3gn1h6o",
   errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
   errorMessageStyles: "_11c8nbxd"
 };

package/dist/esm/ui/common/error-state/provider-auth-required.js

@@ -6,15 +6,20 @@ import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button';
+import ButtonOld from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
 import EmptyState from '@atlaskit/empty-state';
 import { AuthError, auth as outboundAuth } from '@atlaskit/outbound-auth-flow-client';
-import { Anchor } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Box } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import useErrorLogger from '../../../hooks/useErrorLogger';
 import { loadingErrorMessages } from './messages';
 import { ProviderAuthRequiredSVG } from './provider-auth-required-svg';
 var buttonStyles = null;
+var styles = {
+  buttonContainer: "_19pkpxbi"
+};
 var learnMoreAboutSmartLinksUrl = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-Links-from-Jira-and-other-products';
 export var ProviderAuthRequired = function ProviderAuthRequired(_ref) {
   var _ref$auth = _ref.auth,
@@ -85,7 +90,12 @@ export var ProviderAuthRequired = function ProviderAuthRequired(_ref) {
     }, formatMessage(loadingErrorMessages.learnMoreAboutSmartLinks)));
   };
   var renderAuthConnectButton = function renderAuthConnectButton() {
-    return /*#__PURE__*/React.createElement(Button, {
+    return fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.buttonContainer
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: onAuthRequest,
+      appearance: "primary"
+    }, formatMessage(loadingErrorMessages.authConnectButtonText))) : /*#__PURE__*/React.createElement(ButtonOld, {
       onClick: onAuthRequest,
       appearance: "primary",
       className: ax(["_19pkpxbi"])

package/dist/esm/ui/common/modal/basic-search-input/index.js

@@ -1,15 +1,21 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
 var searchButtonStyles = null;
+var styles = {
+  searchButtonContainer: "_2hwx12x7"
+};
 var formStyles = null;
 var formWithMaxWidthStylesOld = null;
 var formWithMaxWidthStyles = null;
@@ -39,7 +45,25 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     onSubmit: handleFormSubmit,
     className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : fg('platform-linking-visual-refresh-sllv') ? "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
   }, /*#__PURE__*/React.createElement(Textfield, {
-    elemAfterInput: /*#__PURE__*/React.createElement(LoadingButton, {
+    elemAfterInput: fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.searchButtonContainer
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      appearance: "primary",
+      isLoading: isSearching,
+      icon: function icon(iconProps) {
+        return /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
+          LEGACY_size: "medium",
+          spacing: "spacious",
+          color: "currentColor"
+        }));
+      },
+      spacing: "compact",
+      type: "submit",
+      label: formatMessage(fg('confluence-issue-terminology-refresh') ? basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : basicSearchInputMessages.basicTextSearchLabel),
+      isDisabled: isDisabled,
+      testId: "".concat(testId, "--basic-search-button"),
+      onClick: handleSearchWithAnalytics
+    })) : /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
       iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
         label: formatMessage(fg('confluence-issue-terminology-refresh') ? basicSearchInputMessages.basicTextSearchLabelIssueTermRefresh : basicSearchInputMessages.basicTextSearchLabel),

package/dist/esm/ui/table-footer/index.compiled.css

@@ -12,10 +12,10 @@
 ._4cvr1h6o{align-items:center}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
-._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._qrwqidpf{border-top-right-radius:0}

package/dist/esm/ui/table-footer/index.js

@@ -25,7 +25,7 @@ import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { ProviderLink } from './provider-link';
 import { SyncInfo } from './sync-info';
 var styles = {
-  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
+  footer: "_11c81o8v _2rko1kw7 _x3dozgxb _syaz131l _ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhkhp5a",
   separator: "_syazmuej"
 };
 
@@ -176,7 +176,19 @@ export var TableFooter = function TableFooter(_ref5) {
     "data-testid": "sync-text"
   }, isLoading ? /*#__PURE__*/React.createElement(FormattedMessage, footerMessages.loadingText) : /*#__PURE__*/React.createElement(SyncInfo, {
     lastSyncTime: lastSyncTime
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), fg('replace-legacy-button-in-sllv') ? /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onRefresh,
+    appearance: "subtle",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(RefreshIcon, _extends({}, iconProps, {
+        color: "currentColor",
+        spacing: "spacious"
+      }));
+    },
+    label: intl.formatMessage(footerMessages.refreshLabel),
+    isDisabled: isLoading,
+    testId: "refresh-button"
+  }) : /*#__PURE__*/React.createElement(Button, {
     onClick: onRefresh,
     appearance: "subtle",
     iconBefore: /*#__PURE__*/React.createElement(RefreshIcon, {

package/examples-helpers/buildIssueLikeTableLoadingError.tsx

@@ -0,0 +1,41 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx, styled } from '@compiled/react';
+
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { SmartCardProvider } from '@atlaskit/link-provider';
+
+import { fetchMessagesForLocale } from '../src/common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider } from '../src/contexts/datasource-experience-id';
+import { LoadingError } from '../src/ui/common/error-state/loading-error';
+
+import SmartLinkClient from './smartLinkCustomClient';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const TableViewWrapper = styled.div({
+	borderColor: 'grey',
+	borderWidth: '1px',
+	borderStyle: 'solid',
+});
+
+const ExampleBody = () => {
+	return (
+		<TableViewWrapper>
+			<LoadingError onRefresh={() => false} url={'https://atlassian.com/wiki/search'} />
+		</TableViewWrapper>
+	);
+};
+
+export const ExampleIssueLikeTableLoadingErrorExample = () => {
+	return (
+		<DatasourceExperienceIdProvider>
+			<IntlMessagesProvider loaderFn={fetchMessagesForLocale}>
+				<SmartCardProvider client={new SmartLinkClient()}>
+					<ExampleBody />
+				</SmartCardProvider>
+			</IntlMessagesProvider>
+		</DatasourceExperienceIdProvider>
+	);
+};

package/examples-helpers/buildJiraIssuesTable.tsx

@@ -50,6 +50,7 @@ const JiraIssuesTableView = ({
 			summary: 180,
 			link: 350,
 			labels: 100,
+			priority: 200,
 		},
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.9.2",
+	"version": "4.10.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -188,6 +188,9 @@
 		},
 		"platform-linking-visual-refresh-sllv": {
 			"type": "boolean"
+		},
+		"replace-legacy-button-in-sllv": {
+			"type": "boolean"
 		}
 	}
 }