@atlaskit/link-datasource 2.6.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-datasource
 
+## 2.7.1
+
+### Patch Changes
+
+- [#123925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123925)
+  [`d6234c59408c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d6234c59408c8) -
+  Internal change to typography component APIs resulting in very minor letter spacing changes.
+
+## 2.7.0
+
+### Minor Changes
+
+- [#117215](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117215)
+  [`3f2423168897d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f2423168897d) -
+  [ux] Updated components to use new iconography behind a feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.0
 
 ### Minor Changes

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

@@ -11,10 +11,10 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
 var _form = require("@atlaskit/form");
-var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-circle"));
+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 _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _colors = require("@atlaskit/theme/colors");
@@ -53,23 +53,27 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
   if (lastValidationResult.type === 'invalid') {
     return (0, _react2.jsx)(_crossCircle.default, {
       label: "label",
-      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-      size: "medium",
-      testId: "assets-datasource-modal--aql-invalid"
+      color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-invalid",
+      spacing: "spacious"
     });
   }
   if (lastValidationResult.type === 'valid') {
     return (0, _react2.jsx)(_checkCircle.default, {
       label: "label",
-      primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
-      size: "medium",
-      testId: "assets-datasource-modal--aql-valid"
+      color: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-valid",
+      spacing: "spacious"
     });
   }
-  return (0, _react2.jsx)(_search.default, {
+  return (0, _react2.jsx)(_searchEditorSearch.default, {
     label: "label",
-    size: "medium",
-    testId: "assets-datasource-modal--aql-idle"
+    LEGACY_size: "medium",
+    testId: "assets-datasource-modal--aql-idle",
+    color: "currentColor",
+    spacing: "spacious"
   });
 };
 var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref) {
@@ -94,7 +98,8 @@ var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         style: {
           paddingLeft: "var(--ds-space-075, 6px)",
-          width: 24
+          width: 24,
+          display: 'flex'
         }
       }, renderValidatorIcon(lastValidationResult)),
       elemAfterInput: (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
@@ -106,15 +111,18 @@ var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref) {
         css: buttonBaseStyles
       }, (0, _react2.jsx)(_questionCircle.default, {
         label: "label",
-        primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
-        size: "medium",
-        testId: "assets-datasource-modal-help"
+        color: "var(--ds-icon, ".concat(_colors.N500, ")"),
+        LEGACY_size: "medium",
+        testId: "assets-datasource-modal-help",
+        spacing: "spacious"
       }))), (0, _react2.jsx)(_button.LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
-        iconBefore: (0, _react2.jsx)(_search.default, {
+        iconBefore: (0, _react2.jsx)(_searchEditorSearch.default, {
           label: formatMessage(_messages.searchInputMessages.placeholder),
-          size: "medium"
+          LEGACY_size: "medium",
+          color: "currentColor",
+          spacing: "spacious"
         }),
         isLoading: isSearching,
         spacing: "none",

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

@@ -8,7 +8,7 @@ exports.BasicSearchInput = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _analytics = require("../../../../analytics");
 var _messages = require("./messages");
@@ -57,9 +57,11 @@ var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref
     elemAfterInput: (0, _react.jsx)(_button.LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
-      iconBefore: (0, _react.jsx)(_search.default, {
+      iconBefore: (0, _react.jsx)(_searchEditorSearch.default, {
         label: formatMessage(_messages.basicSearchInputMessages.basicTextSearchLabel),
-        size: "medium"
+        LEGACY_size: "medium",
+        color: "currentColor",
+        spacing: "spacious"
       }),
       isDisabled: isDisabled,
       isLoading: isSearching,

package/dist/cjs/ui/common/modal/popup-select/dropdownIndicator.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/migration/search"));
 var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var customDropdownIndicatorStyles = (0, _primitives.xcss)({
@@ -29,11 +29,13 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
       }
     }
   }, selectProps.inputValue ? /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   }) : /*#__PURE__*/_react.default.createElement(_search.default, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   })));
 };
 var _default = exports.default = CustomDropdownIndicator;

package/dist/cjs/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -48,7 +48,9 @@ var CustomErrorMessage = function CustomErrorMessage(_ref3) {
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedAnalyticsCallback = _useDebouncedCallback2[0];
   (0, _react.useEffect)(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectMessage.default
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19579
+  , {
     icon: /*#__PURE__*/_react.default.createElement(_error.default, {
       primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
       label: "",

package/dist/cjs/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -36,7 +36,9 @@ var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedAnalyticsCallback = _useDebouncedCallback2[0];
   (0, _react.useEffect)(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectMessage.default
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19578
+  , {
     icon: /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
       primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
       size: "xlarge",

package/dist/cjs/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -32,7 +32,7 @@ var CustomSelectMessage = function CustomSelectMessage(_ref) {
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/_react.default.createElement(_heading.default, {
-    level: "h400"
+    size: "xsmall"
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, message)));
 };
 var _default = exports.default = CustomSelectMessage;

package/dist/cjs/ui/common/modal/popup-select/trigger.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 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); }
@@ -73,7 +73,8 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isSelected: isSelected || hasOptions,
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-        label: ""
+        label: "",
+        color: "currentColor"
       }),
       testId: "".concat(triggerButtonTestId, "--button")
     }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _datetimePicker = require("@atlaskit/datetime-picker");
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -162,8 +162,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
           }
         }
       })), invalidDateRange && /*#__PURE__*/_react.default.createElement(_styled.DateRangeErrorMessage, null, /*#__PURE__*/_react.default.createElement(_error.default, {
-        size: "small",
-        primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+        LEGACY_size: "small",
+        color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
         label: "Date range error"
       }), invalidDateRange), /*#__PURE__*/_react.default.createElement(_styled.SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -94,5 +94,6 @@ var DateRangeErrorMessage = exports.DateRangeErrorMessage = _styled.default.div(
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
   fontSize: '12px',
-  color: "var(--ds-text-danger, ".concat(_colors.R400, ")")
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  alignItems: 'center'
 });

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -8,7 +8,7 @@ exports.PopupTrigger = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
   var triggerProps = _ref.triggerProps,
     isSelected = _ref.isSelected,
@@ -28,8 +28,9 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
         alignItems: 'center'
       }
     }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-      size: "medium",
-      label: ""
+      LEGACY_size: "medium",
+      label: "",
+      color: "currentColor"
     }))
   }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

package/dist/cjs/ui/issue-like-table/empty-state/type.js

@@ -26,26 +26,32 @@ var _default = exports.default = function _default(_ref) {
   var TypeIcon = function TypeIcon() {
     switch (type) {
       case 'issue':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_4.default, {
           label: 'issue'
         });
       case 'commit':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_2.default, {
           label: 'commit'
         });
       case 'story':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_5.default, {
           label: 'story'
         });
       case 'epic':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_3.default, {
           label: 'epic'
         });
       case 'bug':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_.default, {
           label: 'bug'
         });
       case 'task':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/_react.default.createElement(_6.default, {
           label: 'task'
         });

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

@@ -102,7 +102,9 @@ var TableFooter = exports.TableFooter = function TableFooter(_ref) {
     lastSyncTime: lastSyncTime
   })), (0, _react2.jsx)(_button.default, {
     onClick: onRefresh,
-    appearance: "subtle",
+    appearance: "subtle"
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19585
+    ,
     iconBefore: (0, _react2.jsx)(_refresh.default, {
       label: intl.formatMessage(_messages.footerMessages.refreshLabel)
     }),

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

@@ -10,10 +10,10 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import { ErrorMessage, Field } from '@atlaskit/form';
-import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle';
+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 Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';
@@ -45,23 +45,27 @@ const renderValidatorIcon = lastValidationResult => {
   if (lastValidationResult.type === 'invalid') {
     return jsx(CrossCircleIcon, {
       label: "label",
-      primaryColor: `var(--ds-icon-danger, ${R400})`,
-      size: "medium",
-      testId: "assets-datasource-modal--aql-invalid"
+      color: `var(--ds-icon-danger, ${R400})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-invalid",
+      spacing: "spacious"
     });
   }
   if (lastValidationResult.type === 'valid') {
     return jsx(CheckCircleIcon, {
       label: "label",
-      primaryColor: `var(--ds-icon-success, ${G300})`,
-      size: "medium",
-      testId: "assets-datasource-modal--aql-valid"
+      color: `var(--ds-icon-success, ${G300})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-valid",
+      spacing: "spacious"
     });
   }
   return jsx(SearchIcon, {
     label: "label",
-    size: "medium",
-    testId: "assets-datasource-modal--aql-idle"
+    LEGACY_size: "medium",
+    testId: "assets-datasource-modal--aql-idle",
+    color: "currentColor",
+    spacing: "spacious"
   });
 };
 export const AqlSearchInput = ({
@@ -88,7 +92,8 @@ export const AqlSearchInput = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         paddingLeft: "var(--ds-space-075, 6px)",
-        width: 24
+        width: 24,
+        display: 'flex'
       }
     }, renderValidatorIcon(lastValidationResult)),
     elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
@@ -100,15 +105,18 @@ export const AqlSearchInput = ({
       css: buttonBaseStyles
     }, jsx(QuestionCircleIcon, {
       label: "label",
-      primaryColor: `var(--ds-icon, ${N500})`,
-      size: "medium",
-      testId: "assets-datasource-modal-help"
+      color: `var(--ds-icon, ${N500})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal-help",
+      spacing: "spacious"
     }))), jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
       iconBefore: jsx(SearchIcon, {
         label: formatMessage(searchInputMessages.placeholder),
-        size: "medium"
+        LEGACY_size: "medium",
+        color: "currentColor",
+        spacing: "spacious"
       }),
       isLoading: isSearching,
       spacing: "none",

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

@@ -7,7 +7,7 @@
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
@@ -54,7 +54,9 @@ export const BasicSearchInput = ({
       css: searchButtonStyles,
       iconBefore: jsx(SearchIcon, {
         label: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
-        size: "medium"
+        LEGACY_size: "medium",
+        color: "currentColor",
+        spacing: "spacious"
       }),
       isDisabled: isDisabled,
       isLoading: isSearching,

package/dist/es2019/ui/common/modal/popup-select/dropdownIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import CloseIcon from '@atlaskit/icon/glyph/cross-circle';
-import SearchIcon from '@atlaskit/icon/glyph/search';
+import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
+import SearchIcon from '@atlaskit/icon/core/migration/search';
 import { Box, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 const customDropdownIndicatorStyles = xcss({
@@ -24,11 +24,13 @@ const CustomDropdownIndicator = props => {
       }
     }
   }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   }) : /*#__PURE__*/React.createElement(SearchIcon, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   })));
 };
 export default CustomDropdownIndicator;

package/dist/es2019/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -35,7 +35,9 @@ const CustomErrorMessage = ({
     });
   }, SEARCH_DEBOUNCE_MS);
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19579
+  , {
     icon: /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       label: "",

package/dist/es2019/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -25,7 +25,9 @@ const CustomNoOptionsMessage = ({
     });
   }, SEARCH_DEBOUNCE_MS);
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19578
+  , {
     icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       size: "xlarge",

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -26,7 +26,7 @@ const CustomSelectMessage = ({
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/React.createElement(Heading, {
-    level: "h400"
+    size: "xsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
 };
 export default CustomSelectMessage;

package/dist/es2019/ui/common/modal/popup-select/trigger.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 const triggerButtonLabelStyles = xcss({
@@ -58,7 +58,8 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      label: ""
+      label: "",
+      color: "currentColor"
     }),
     testId: `${triggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import Popup from '@atlaskit/popup';
 import { R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -131,8 +131,8 @@ export const DateRangePicker = ({
           }
         }
       })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-        size: "small",
-        primaryColor: `var(--ds-icon-danger, ${R400})`,
+        LEGACY_size: "small",
+        color: `var(--ds-icon-danger, ${R400})`,
         label: "Date range error"
       }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -84,5 +84,6 @@ export const DateRangeErrorMessage = styled.div({
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
   fontSize: '12px',
-  color: `var(--ds-text-danger, ${R400})`
+  color: `var(--ds-text-danger, ${R400})`,
+  alignItems: 'center'
 });

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 export const PopupTrigger = ({
   triggerProps,
   isSelected,
@@ -22,8 +22,9 @@ export const PopupTrigger = ({
         alignItems: 'center'
       }
     }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      size: "medium",
-      label: ""
+      LEGACY_size: "medium",
+      label: "",
+      color: "currentColor"
     }))
   }), labelPrefix, selectedLabel ? `: ${selectedLabel}` : '');
 };

package/dist/es2019/ui/issue-like-table/empty-state/type.js

@@ -20,26 +20,32 @@ export default (({
   const TypeIcon = () => {
     switch (type) {
       case 'issue':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Issue16Icon, {
           label: 'issue'
         });
       case 'commit':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Commit16Icon, {
           label: 'commit'
         });
       case 'story':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Story16Icon, {
           label: 'story'
         });
       case 'epic':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Epic16Icon, {
           label: 'epic'
         });
       case 'bug':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Bug16Icon, {
           label: 'bug'
         });
       case 'task':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Task16Icon, {
           label: 'task'
         });

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

@@ -87,7 +87,9 @@ export const TableFooter = ({
     lastSyncTime: lastSyncTime
   })), jsx(Button, {
     onClick: onRefresh,
-    appearance: "subtle",
+    appearance: "subtle"
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19585
+    ,
     iconBefore: jsx(RefreshIcon, {
       label: intl.formatMessage(footerMessages.refreshLabel)
     }),

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

@@ -10,10 +10,10 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import { ErrorMessage, Field } from '@atlaskit/form';
-import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle';
+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 Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';
@@ -45,23 +45,27 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
   if (lastValidationResult.type === 'invalid') {
     return jsx(CrossCircleIcon, {
       label: "label",
-      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
-      size: "medium",
-      testId: "assets-datasource-modal--aql-invalid"
+      color: "var(--ds-icon-danger, ".concat(R400, ")"),
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-invalid",
+      spacing: "spacious"
     });
   }
   if (lastValidationResult.type === 'valid') {
     return jsx(CheckCircleIcon, {
       label: "label",
-      primaryColor: "var(--ds-icon-success, ".concat(G300, ")"),
-      size: "medium",
-      testId: "assets-datasource-modal--aql-valid"
+      color: "var(--ds-icon-success, ".concat(G300, ")"),
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-valid",
+      spacing: "spacious"
     });
   }
   return jsx(SearchIcon, {
     label: "label",
-    size: "medium",
-    testId: "assets-datasource-modal--aql-idle"
+    LEGACY_size: "medium",
+    testId: "assets-datasource-modal--aql-idle",
+    color: "currentColor",
+    spacing: "spacious"
   });
 };
 export var AqlSearchInput = function AqlSearchInput(_ref) {
@@ -86,7 +90,8 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         style: {
           paddingLeft: "var(--ds-space-075, 6px)",
-          width: 24
+          width: 24,
+          display: 'flex'
         }
       }, renderValidatorIcon(lastValidationResult)),
       elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
@@ -98,15 +103,18 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
         css: buttonBaseStyles
       }, jsx(QuestionCircleIcon, {
         label: "label",
-        primaryColor: "var(--ds-icon, ".concat(N500, ")"),
-        size: "medium",
-        testId: "assets-datasource-modal-help"
+        color: "var(--ds-icon, ".concat(N500, ")"),
+        LEGACY_size: "medium",
+        testId: "assets-datasource-modal-help",
+        spacing: "spacious"
       }))), jsx(LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
         iconBefore: jsx(SearchIcon, {
           label: formatMessage(searchInputMessages.placeholder),
-          size: "medium"
+          LEGACY_size: "medium",
+          color: "currentColor",
+          spacing: "spacious"
         }),
         isLoading: isSearching,
         spacing: "none",

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

@@ -7,7 +7,7 @@
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
@@ -51,7 +51,9 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
       css: searchButtonStyles,
       iconBefore: jsx(SearchIcon, {
         label: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
-        size: "medium"
+        LEGACY_size: "medium",
+        color: "currentColor",
+        spacing: "spacious"
       }),
       isDisabled: isDisabled,
       isLoading: isSearching,

package/dist/esm/ui/common/modal/popup-select/dropdownIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import CloseIcon from '@atlaskit/icon/glyph/cross-circle';
-import SearchIcon from '@atlaskit/icon/glyph/search';
+import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
+import SearchIcon from '@atlaskit/icon/core/migration/search';
 import { Box, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 var customDropdownIndicatorStyles = xcss({
@@ -22,11 +22,13 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
       }
     }
   }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   }) : /*#__PURE__*/React.createElement(SearchIcon, {
-    size: "small",
-    label: ""
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
   })));
 };
 export default CustomDropdownIndicator;

package/dist/esm/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -38,7 +38,9 @@ var CustomErrorMessage = function CustomErrorMessage(_ref3) {
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     debouncedAnalyticsCallback = _useDebouncedCallback2[0];
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19579
+  , {
     icon: /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: "var(--ds-icon, ".concat(N500, ")"),
       label: "",

package/dist/esm/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -26,7 +26,9 @@ var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     debouncedAnalyticsCallback = _useDebouncedCallback2[0];
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19578
+  , {
     icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       primaryColor: "var(--ds-icon, ".concat(N500, ")"),
       size: "xlarge",

package/dist/esm/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -25,7 +25,7 @@ var CustomSelectMessage = function CustomSelectMessage(_ref) {
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/React.createElement(Heading, {
-    level: "h400"
+    size: "xsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
 };
 export default CustomSelectMessage;

package/dist/esm/ui/common/modal/popup-select/trigger.js

@@ -5,7 +5,7 @@ import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 var triggerButtonLabelStyles = xcss({
@@ -63,7 +63,8 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isSelected: isSelected || hasOptions,
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        label: ""
+        label: "",
+        color: "currentColor"
       }),
       testId: "".concat(triggerButtonTestId, "--button")
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import Popup from '@atlaskit/popup';
 import { R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -152,8 +152,8 @@ export var DateRangePicker = function DateRangePicker(_ref) {
           }
         }
       })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-        size: "small",
-        primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+        LEGACY_size: "small",
+        color: "var(--ds-icon-danger, ".concat(R400, ")"),
         label: "Date range error"
       }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.js

@@ -86,5 +86,6 @@ export var DateRangeErrorMessage = styled.div({
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
   fontSize: '12px',
-  color: "var(--ds-text-danger, ".concat(R400, ")")
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
+  alignItems: 'center'
 });

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 export var PopupTrigger = function PopupTrigger(_ref) {
   var triggerProps = _ref.triggerProps,
     isSelected = _ref.isSelected,
@@ -21,8 +21,9 @@ export var PopupTrigger = function PopupTrigger(_ref) {
         alignItems: 'center'
       }
     }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      size: "medium",
-      label: ""
+      LEGACY_size: "medium",
+      label: "",
+      color: "currentColor"
     }))
   }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

package/dist/esm/ui/issue-like-table/empty-state/type.js

@@ -19,26 +19,32 @@ export default (function (_ref) {
   var TypeIcon = function TypeIcon() {
     switch (type) {
       case 'issue':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Issue16Icon, {
           label: 'issue'
         });
       case 'commit':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Commit16Icon, {
           label: 'commit'
         });
       case 'story':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Story16Icon, {
           label: 'story'
         });
       case 'epic':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Epic16Icon, {
           label: 'epic'
         });
       case 'bug':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Bug16Icon, {
           label: 'bug'
         });
       case 'task':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
         return /*#__PURE__*/React.createElement(Task16Icon, {
           label: 'task'
         });

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

@@ -90,7 +90,9 @@ export var TableFooter = function TableFooter(_ref) {
     lastSyncTime: lastSyncTime
   })), jsx(Button, {
     onClick: onRefresh,
-    appearance: "subtle",
+    appearance: "subtle"
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19585
+    ,
     iconBefore: jsx(RefreshIcon, {
       label: intl.formatMessage(footerMessages.refreshLabel)
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.6.0",
+	"version": "2.7.1",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -67,9 +67,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/select": "^17.11.0",
-		"@atlaskit/smart-card": "^27.10.0",
+		"@atlaskit/smart-card": "^27.11.0",
 		"@atlaskit/smart-user-picker": "6.10.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/tag": "^12.4.0",