@atlaskit/datetime-picker 15.5.1 → 15.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/datetime-picker
 
+## 15.6.0
+
+### Minor Changes
+
+- [#157307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157307)
+  [`a1e80ec0a5e4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1e80ec0a5e4a) -
+  Enable new icons behind a feature flag.
+- [#157307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157307)
+  [`e6c2d403fadd0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6c2d403fadd0) -
+  Add clearControlLabel to datepicker component.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.5.1
 
 ### Patch Changes

package/dist/cjs/components/date-picker-class.js

@@ -19,8 +19,10 @@ var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
+var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _colors = require("@atlaskit/theme/colors");
@@ -44,7 +46,17 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 // version very soon from converting this to functional. And also React 18 is on
 // the horizon
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
+var dropdownIndicatorStyles = (0, _primitives.xcss)({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? _calendar.default :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+_calendar2.default;
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -83,9 +95,16 @@ var iconContainerStyles = (0, _react2.css)({
 var iconSpacingWithClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius',
   ':hover': {
@@ -422,6 +441,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         ariaDescribedBy = _this$props['aria-describedby'],
         _this$props$autoFocus = _this$props.autoFocus,
         autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
+        _this$props$clearCont = _this$props.clearControlLabel,
+        clearControlLabel = _this$props$clearCont === void 0 ? 'Clear' : _this$props$clearCont,
         _this$props$hideIcon = _this$props.hideIcon,
         hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
         _this$props$openCalen = _this$props.openCalendarLabel,
@@ -429,7 +450,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         disabled = _this$props.disabled,
         disabledDateFilter = _this$props.disabledDateFilter,
         _this$props$icon = _this$props.icon,
-        icon = _this$props$icon === void 0 ? _calendar.default : _this$props$icon,
+        Icon = _this$props$icon === void 0 ? CalendarIcon : _this$props$icon,
         _this$props$id = _this$props.id,
         id = _this$props$id === void 0 ? '' : _this$props$id,
         _this$props$innerProp = _this$props.innerProps,
@@ -467,7 +488,17 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       actualSelectInputValue = selectInputValue;
       var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var clearIndicator = Icon;
+
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration')) {
+        clearIndicator = function clearIndicator(props) {
+          return (0, _react2.jsx)(_primitives.Box, {
+            xcss: dropdownIndicatorStyles
+          }, (0, _react2.jsx)(Icon, props));
+        };
+      }
+      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
       var SingleValue = (0, _singleValue.makeSingleValue)({
         lang: this.props.locale
       });
@@ -554,6 +585,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
+          clearControlLabel: clearControlLabel,
           closeMenuOnSelect: true
           // FOr some reason, this and the below `styles` type error _only_ show
           // up when you alter some of the properties in the `selectComponents`
@@ -610,7 +642,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           }
         }, function (openCalendarLabelId) {
           return (0, _react2.jsx)("div", {
-            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
           }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
             id: openCalendarLabelId
           }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {
@@ -624,12 +656,15 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
             testId: testId && "".concat(testId, "--open-calendar-button"),
             type: "button",
             backgroundColor: "color.background.neutral.subtle",
-            padding: "space.050",
-            xcss: calendarButtonStyles
-          }), (0, _react2.jsx)(_calendar.default, {
-            label: "",
+            padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+            xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+          }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
+            label: ""
+          }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
+            color: "var(--ds-icon, #44546F)"
+          } : {
             primaryColor: "var(--ds-icon, #44546F)"
-          })));
+          }))));
         }) : null)
       );
     }

package/dist/cjs/components/date-picker-fc.js

@@ -15,8 +15,10 @@ var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
+var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _colors = require("@atlaskit/theme/colors");
@@ -27,7 +29,7 @@ var _indicatorsContainer = require("../internal/indicators-container");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
-var _excluded = ["appearance", "autoFocus", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -41,7 +43,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -50,6 +52,16 @@ var analyticsAttributes = {
 var pickerContainerStyles = (0, _react2.css)({
   position: 'relative'
 });
+var dropdownIndicatorStyles = (0, _primitives.xcss)({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var CalendarIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? _calendar.default :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+_calendar2.default;
 var iconContainerStyles = (0, _react2.css)({
   display: 'flex',
   height: '100%',
@@ -67,9 +79,16 @@ var iconContainerStyles = (0, _react2.css)({
 var iconSpacingWithClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
+  width: "".concat(32 / 14, "em"),
+  height: "".concat(32 / 14, "em")
+});
 var calendarButtonStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius',
   ':hover': {
@@ -96,6 +115,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
     _props$hideIcon = props.hideIcon,
     hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
     _props$openCalendarLa = props.openCalendarLabel,
@@ -111,7 +132,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       return false;
     } : _props$disabledDateFi,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? _calendar.default : _props$icon,
+    Icon = _props$icon === void 0 ? CalendarIcon : _props$icon,
     _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
     _props$innerProps = props.innerProps,
@@ -458,7 +479,17 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
   actualSelectInputValue = selectInputValue;
   var menuIsOpen = getIsOpen() && !isDisabled;
   var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+  var clearIndicator = Icon;
+
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration')) {
+    clearIndicator = function clearIndicator(props) {
+      return (0, _react2.jsx)(_primitives.Box, {
+        xcss: dropdownIndicatorStyles
+      }, (0, _react2.jsx)(Icon, props));
+    };
+  }
+  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   var SingleValue = (0, _singleValue.makeSingleValue)({
     lang: propLocale
   });
@@ -546,6 +577,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -597,7 +629,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {
@@ -611,12 +643,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
       testId: testId && "".concat(testId, "--open-calendar-button"),
       type: "button",
       backgroundColor: "color.background.neutral.subtle",
-      padding: "space.050",
-      xcss: calendarButtonStyles
-    }), (0, _react2.jsx)(_calendar.default, {
-      label: "",
+      padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+      xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+    }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
+      label: ""
+    }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
+      color: "var(--ds-icon, #44546F)"
+    } : {
       primaryColor: "var(--ds-icon, #44546F)"
-    }))) : null)
+    })))) : null)
   );
 });
 var _default = exports.default = DatePicker;

package/dist/cjs/components/date-time-picker-class.js

@@ -16,7 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
@@ -38,7 +38,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -402,11 +402,11 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         "data-testid": testId && "".concat(testId, "--icon--container"),
         tabIndex: -1,
         type: "button"
-      }, (0, _react2.jsx)(_selectClear.default, {
-        size: "small",
-        primaryColor: "inherit",
+      }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+        LEGACY_size: "small",
+        color: "currentColor",
         label: clearControlLabel
-      })) : null);
+      }), ' ') : null);
     }
   }]);
   return DateTimePickerComponent;

package/dist/cjs/components/date-time-picker-fc.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
@@ -37,7 +37,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -389,10 +389,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId && "".concat(testId, "--icon--container"),
     tabIndex: -1,
     type: "button"
-  }, (0, _react2.jsx)(_selectClear.default, {
-    size: "small",
-    primaryColor: "inherit",
+  }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+    LEGACY_size: "small",
+    color: "currentColor",
     label: clearControlLabel
-  })) : null);
+  }), ' ') : null);
 });
 var _default = exports.default = DateTimePicker;

package/dist/cjs/components/time-picker.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.5.1";
+var packageVersion = "15.6.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/components/date-picker-class.js

@@ -14,9 +14,11 @@ import { isValid, parseISO } from 'date-fns';
 // the horizon
 import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
+import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -27,7 +29,17 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.5.1";
+const packageVersion = "15.6.0";
+const dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -64,9 +76,16 @@ const iconContainerStyles = css({
 const iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+const iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 const iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+const calendarButtonFixedSizeStyles = xcss({
+  width: `${32 / 14}em`,
+  height: `${32 / 14}em`
+});
 const calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -410,11 +429,12 @@ class DatePickerComponent extends Component {
       appearance = 'default',
       'aria-describedby': ariaDescribedBy,
       autoFocus = false,
+      clearControlLabel = 'Clear',
       hideIcon = false,
       openCalendarLabel = 'Open calendar',
       disabled,
       disabledDateFilter,
-      icon = CalendarIcon,
+      icon: Icon = CalendarIcon,
       id = '',
       innerProps = {},
       inputLabel = 'Date picker',
@@ -444,7 +464,15 @@ class DatePickerComponent extends Component {
     actualSelectInputValue = selectInputValue;
     const menuIsOpen = this.getIsOpen() && !isDisabled;
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
-    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+    let clearIndicator = Icon;
+
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+      clearIndicator = props => jsx(Box, {
+        xcss: dropdownIndicatorStyles
+      }, jsx(Icon, props));
+    }
+    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
     const SingleValue = makeSingleValue({
       lang: this.props.locale
     });
@@ -533,6 +561,7 @@ class DatePickerComponent extends Component {
         "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         autoFocus: autoFocus,
+        clearControlLabel: clearControlLabel,
         closeMenuOnSelect: true
         // FOr some reason, this and the below `styles` type error _only_ show
         // up when you alter some of the properties in the `selectComponents`
@@ -586,7 +615,7 @@ class DatePickerComponent extends Component {
       })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
         name: id => `open-calendar-label--${id}`
       }, openCalendarLabelId => jsx("div", {
-        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
       }, inputLabelId && jsx(VisuallyHidden, {
         id: openCalendarLabelId
       }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -600,12 +629,15 @@ class DatePickerComponent extends Component {
         testId: testId && `${testId}--open-calendar-button`,
         type: "button",
         backgroundColor: "color.background.neutral.subtle",
-        padding: "space.050",
-        xcss: calendarButtonStyles
-      }), jsx(CalendarIcon, {
-        label: "",
+        padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+        xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+      }), jsx(CalendarIcon, _extends({
+        label: ""
+      }, fg('platform-visual-refresh-icon-ads-migration') ? {
+        color: "var(--ds-icon, #44546F)"
+      } : {
         primaryColor: "var(--ds-icon, #44546F)"
-      })))) : null)
+      }))))) : null)
     );
   }
 }

package/dist/es2019/components/date-picker-fc.js

@@ -13,9 +13,11 @@ import { isValid, parseISO } from 'date-fns';
 // the horizon
 import { useUID } from 'react-uid';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
+import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -26,7 +28,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.5.1";
+const packageVersion = "15.6.0";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -35,6 +37,16 @@ const analyticsAttributes = {
 const pickerContainerStyles = css({
   position: 'relative'
 });
+const dropdownIndicatorStyles = xcss({
+  minWidth: "var(--ds-space-300, 24px)",
+  minHeight: "var(--ds-space-300, 24px)",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const CalendarIcon = fg('platform-visual-refresh-icon-ads-migration') ? CalendarIconNew :
+// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+CalendarIconOld;
 const iconContainerStyles = css({
   display: 'flex',
   height: '100%',
@@ -52,9 +64,16 @@ const iconContainerStyles = css({
 const iconSpacingWithClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-400, 2rem)"
 });
+const iconSpacingWithoutClearButtonStylesNew = css({
+  marginInlineEnd: "var(--ds-space-050, 0.25rem)"
+});
 const iconSpacingWithoutClearButtonStyles = css({
   marginInlineEnd: "var(--ds-space-025, 0.125rem)"
 });
+const calendarButtonFixedSizeStyles = xcss({
+  width: `${32 / 14}em`,
+  height: `${32 / 14}em`
+});
 const calendarButtonStyles = xcss({
   borderRadius: 'border.radius',
   ':hover': {
@@ -80,13 +99,14 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     appearance = 'default',
     autoFocus = false,
+    clearControlLabel = 'Clear',
     hideIcon = false,
     openCalendarLabel = 'Open calendar',
     defaultIsOpen = false,
     defaultValue = '',
     disabled = [],
     disabledDateFilter = _ => false,
-    icon = CalendarIcon,
+    icon: Icon = CalendarIcon,
     id = '',
     innerProps = {},
     inputLabel = 'Date picker',
@@ -385,7 +405,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   actualSelectInputValue = selectInputValue;
   const menuIsOpen = getIsOpen() && !isDisabled;
   const showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
-  const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+  let clearIndicator = Icon;
+
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if (fg('platform-visual-refresh-icons') && fg('platform-visual-refresh-icon-ads-migration')) {
+    clearIndicator = props => jsx(Box, {
+      xcss: dropdownIndicatorStyles
+    }, jsx(Icon, props));
+  }
+  const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
   const SingleValue = makeSingleValue({
     lang: propLocale
   });
@@ -475,6 +503,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-describedby": ariaDescribedBy,
       "aria-label": label || undefined,
       autoFocus: autoFocus,
+      clearControlLabel: clearControlLabel,
       closeMenuOnSelect: true
       // For some reason, this and the below `styles` type error _only_ show
       // up when you alter some of the properties in the `selectComponents`
@@ -526,7 +555,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       previousMonthLabel: previousMonthLabel,
       shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
     })), shouldShowCalendarButton && !isDisabled ? jsx("div", {
-      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
     }, inputLabelId && jsx(VisuallyHidden, {
       id: openCalendarLabelId
     }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
@@ -540,12 +569,15 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       testId: testId && `${testId}--open-calendar-button`,
       type: "button",
       backgroundColor: "color.background.neutral.subtle",
-      padding: "space.050",
-      xcss: calendarButtonStyles
-    }), jsx(CalendarIcon, {
-      label: "",
+      padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
+      xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
+    }), jsx(CalendarIcon, _extends({
+      label: ""
+    }, fg('platform-visual-refresh-icon-ads-migration') ? {
+      color: "var(--ds-icon, #44546F)"
+    } : {
       primaryColor: "var(--ds-icon, #44546F)"
-    }))) : null)
+    })))) : null)
   );
 });
 export default DatePicker;

package/dist/es2019/components/date-time-picker-class.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.5.1";
+const packageVersion = "15.6.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -364,10 +364,10 @@ class DateTimePickerComponent extends React.Component {
       tabIndex: -1,
       type: "button"
     }, jsx(SelectClearIcon, {
-      size: "small",
-      primaryColor: "inherit",
+      LEGACY_size: "small",
+      color: "currentColor",
       label: clearControlLabel
-    })) : null);
+    }), ' ') : null);
   }
 }
 _defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);