@atlaskit/link-datasource 3.2.1 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-datasource
 
+## 3.4.0
+
+### Minor Changes
+
+- [#142758](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142758)
+  [`3d186abad34e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d186abad34e4) -
+  Enable new icons behind a feature flag.
+
+## 3.3.0
+
+### Minor Changes
+
+- [#148132](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148132)
+  [`48f3efa1e757b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48f3efa1e757b) -
+  [ux] New icon space fix (https://product-fabric.atlassian.net/browse/DSP-19884)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes

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

@@ -166,7 +166,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref) {
       })), invalidDateRange && /*#__PURE__*/_react.default.createElement(_styled.DateRangeErrorMessage, null, /*#__PURE__*/_react.default.createElement(_error.default, {
         LEGACY_size: "small",
         color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-        label: "Date range error"
+        label: "Date range error",
+        LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
       }), invalidDateRange), /*#__PURE__*/_react.default.createElement(_styled.SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",
         disabled: Boolean(invalidDateRange),

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

@@ -93,6 +93,8 @@ var DateRangeErrorMessage = exports.DateRangeErrorMessage = _styled.default.div(
   display: 'flex',
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
   fontSize: '12px',
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   alignItems: 'center'

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -12,9 +12,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _board = _interopRequireDefault(require("@atlaskit/icon/core/migration/board"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../../analytics/ufoExperiences");
@@ -27,6 +28,10 @@ var _excluded = ["isOpen"];
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var chevronIconStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center'
+});
 var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
@@ -149,19 +154,28 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
       return (0, _react2.jsx)(_tooltip.default, {
         content: intl.formatMessage(_messages.columnPickerMessages.tooltip)
       }, function (tooltipProps) {
-        return (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
+        return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
           isSelected: isOpen,
-          iconBefore: (0, _react2.jsx)("div", null, (0, _react2.jsx)(_board.default, {
-            label: "board",
-            size: "medium"
-          }), (0, _react2.jsx)(_chevronDown.default, {
-            label: "down",
-            size: "medium"
-          })),
           spacing: "compact",
           appearance: "subtle",
-          testId: "column-picker-trigger-button"
-        }));
+          testId: "column-picker-trigger-button",
+          iconBefore: function iconBefore() {
+            return (0, _react2.jsx)(_primitives.Box, {
+              as: "span",
+              xcss: chevronIconStyles
+            }, (0, _react2.jsx)(_board.default, {
+              color: "currentColor",
+              label: "board",
+              LEGACY_size: "medium",
+              spacing: "spacious",
+              LEGACY_margin: "0 0 0 4px"
+            }), (0, _react2.jsx)(_chevronDown.default, {
+              color: "currentColor",
+              label: "down",
+              LEGACY_size: "medium"
+            }));
+          }
+        }), '');
       });
     }
   });

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

@@ -135,7 +135,8 @@ export const DateRangePicker = ({
       })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         LEGACY_size: "small",
         color: `var(--ds-icon-danger, ${R400})`,
-        label: "Date range error"
+        label: "Date range error",
+        LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`
       }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",
         disabled: Boolean(invalidDateRange),

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

@@ -83,6 +83,8 @@ export const DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
   fontSize: '12px',
   color: `var(--ds-text-danger, ${R400})`,
   alignItems: 'center'

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -8,15 +8,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import BoardIcon from '@atlaskit/icon/glyph/board';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import Button from '@atlaskit/button/new';
+import BoardIcon from '@atlaskit/icon/core/migration/board';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
+const chevronIconStyles = xcss({
+  display: 'flex',
+  alignItems: 'center'
+});
 export const ColumnPicker = ({
   columns,
   selectedColumnKeys,
@@ -126,16 +131,23 @@ export const ColumnPicker = ({
       content: intl.formatMessage(columnPickerMessages.tooltip)
     }, tooltipProps => jsx(Button, _extends({}, tooltipProps, triggerProps, {
       isSelected: isOpen,
-      iconBefore: jsx("div", null, jsx(BoardIcon, {
+      spacing: "compact",
+      appearance: "subtle",
+      testId: "column-picker-trigger-button",
+      iconBefore: () => jsx(Box, {
+        as: "span",
+        xcss: chevronIconStyles
+      }, jsx(BoardIcon, {
+        color: "currentColor",
         label: "board",
-        size: "medium"
+        LEGACY_size: "medium",
+        spacing: "spacious",
+        LEGACY_margin: "0 0 0 4px"
       }), jsx(ChevronDownIcon, {
+        color: "currentColor",
         label: "down",
-        size: "medium"
-      })),
-      spacing: "compact",
-      appearance: "subtle",
-      testId: "column-picker-trigger-button"
-    })))
+        LEGACY_size: "medium"
+      }))
+    }), ''))
   });
 };

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

@@ -156,7 +156,8 @@ export var DateRangePicker = function DateRangePicker(_ref) {
       })), invalidDateRange && /*#__PURE__*/React.createElement(DateRangeErrorMessage, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         LEGACY_size: "small",
         color: "var(--ds-icon-danger, ".concat(R400, ")"),
-        label: "Date range error"
+        label: "Date range error",
+        LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
       }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
         "data-testId": "custom-date-range-update-button",
         disabled: Boolean(invalidDateRange),

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

@@ -85,6 +85,8 @@ export var DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,
   marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
   fontSize: '12px',
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   alignItems: 'center'

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -12,15 +12,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import BoardIcon from '@atlaskit/icon/glyph/board';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import Button from '@atlaskit/button/new';
+import BoardIcon from '@atlaskit/icon/core/migration/board';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
+var chevronIconStyles = xcss({
+  display: 'flex',
+  alignItems: 'center'
+});
 export var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
@@ -145,17 +150,26 @@ export var ColumnPicker = function ColumnPicker(_ref) {
       }, function (tooltipProps) {
         return jsx(Button, _extends({}, tooltipProps, triggerProps, {
           isSelected: isOpen,
-          iconBefore: jsx("div", null, jsx(BoardIcon, {
-            label: "board",
-            size: "medium"
-          }), jsx(ChevronDownIcon, {
-            label: "down",
-            size: "medium"
-          })),
           spacing: "compact",
           appearance: "subtle",
-          testId: "column-picker-trigger-button"
-        }));
+          testId: "column-picker-trigger-button",
+          iconBefore: function iconBefore() {
+            return jsx(Box, {
+              as: "span",
+              xcss: chevronIconStyles
+            }, jsx(BoardIcon, {
+              color: "currentColor",
+              label: "board",
+              LEGACY_size: "medium",
+              spacing: "spacious",
+              LEGACY_margin: "0 0 0 4px"
+            }), jsx(ChevronDownIcon, {
+              color: "currentColor",
+              label: "down",
+              LEGACY_size: "medium"
+            }));
+          }
+        }), '');
       });
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "3.2.1",
+	"version": "3.4.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -79,7 +79,7 @@
 		"@atlaskit/textfield": "6.5.2",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@atlaskit/width-detector": "^4.3.0",
 		"@babel/runtime": "^7.0.0",