@atlaskit/datetime-picker 12.5.2 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 12.6.0
+
+### Minor Changes
+
+- [`6e51e0d5358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e51e0d5358) - [ux] update border width from 2px to 1px and add 1px box-shadow when focus or error
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.5.3
+
+### Patch Changes
+
+- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 12.5.2
 
 ### Patch Changes

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

@@ -35,8 +35,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -19,6 +19,7 @@ var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -31,7 +32,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -63,7 +64,7 @@ var noBgStyles = (0, _react2.css)({
 var hoverStyles = (0, _react2.css)({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-    borderColor: "var(--ds-border-input, ".concat(_colors.N30, ")")
+    borderColor: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N30, ")")
   }
 });
 var isInvalidHoverStyles = (0, _react2.css)({
@@ -80,7 +81,7 @@ var isDisabledStyles = (0, _react2.css)({
 var baseContainerStyles = (0, _react2.css)({
   display: 'flex',
   backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
-  border: "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
+  border: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -102,9 +103,9 @@ var timePickerContainerStyles = (0, _react2.css)({
 var ICON_PADDING = 2;
 var iconContainerStyles = (0, _react2.css)({
   display: 'flex',
-  paddingTop: "6px",
-  paddingRight: "".concat((0, _constants.gridSize)(), "px"),
-  paddingBottom: "6px",
+  paddingTop: "var(--ds-space-075, 6px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-075, 6px)",
   paddingLeft: "".concat(ICON_PADDING * 2, "px"),
   alignItems: 'center',
   flexBasis: 'inherit',

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

@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.5.2",
+	"version": "12.6.0",
 	"sideEffects": false
 }

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

@@ -13,12 +13,13 @@ import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.5.2";
+const packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

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

@@ -9,15 +9,16 @@ import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
-import { B100, N0, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.5.2";
+const packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -49,7 +50,7 @@ const noBgStyles = css({
 const hoverStyles = css({
   '&:hover': {
     backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
-    borderColor: `var(--ds-border-input, ${N30})`
+    borderColor: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30})`
   }
 });
 const isInvalidHoverStyles = css({
@@ -66,7 +67,7 @@ const isDisabledStyles = css({
 const baseContainerStyles = css({
   display: 'flex',
   backgroundColor: `var(--ds-background-input, ${N20})`,
-  border: `2px solid ${`var(--ds-border-input, ${N20})`}`,
+  border: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `1px solid ${`var(--ds-border-input, ${N100})`}` : `2px solid ${`var(--ds-border-input, ${N20})`}`,
   borderRadius: `${borderRadius()}px`,
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -88,9 +89,9 @@ const timePickerContainerStyles = css({
 const ICON_PADDING = 2;
 const iconContainerStyles = css({
   display: 'flex',
-  paddingTop: `6px`,
-  paddingRight: `${gridSize()}px`,
-  paddingBottom: `6px`,
+  paddingTop: "var(--ds-space-075, 6px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-075, 6px)",
   paddingLeft: `${ICON_PADDING * 2}px`,
   alignItems: 'center',
   flexBasis: 'inherit',

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

@@ -16,7 +16,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.5.2";
+const packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.5.2",
+	"version": "12.6.0",
 	"sideEffects": false
 }

package/dist/esm/components/date-picker.js

@@ -24,12 +24,13 @@ import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/esm/components/date-time-picker.js

@@ -19,15 +19,16 @@ import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
-import { B100, N0, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { B100, N0, N100, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -59,7 +60,7 @@ var noBgStyles = css({
 var hoverStyles = css({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-    borderColor: "var(--ds-border-input, ".concat(N30, ")")
+    borderColor: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30, ")")
   }
 });
 var isInvalidHoverStyles = css({
@@ -76,7 +77,7 @@ var isDisabledStyles = css({
 var baseContainerStyles = css({
   display: 'flex',
   backgroundColor: "var(--ds-background-input, ".concat(N20, ")"),
-  border: "2px solid ".concat("var(--ds-border-input, ".concat(N20, ")")),
+  border: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "1px solid ".concat("var(--ds-border-input, ".concat(N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(N20, ")")),
   borderRadius: "".concat(borderRadius(), "px"),
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -98,9 +99,9 @@ var timePickerContainerStyles = css({
 var ICON_PADDING = 2;
 var iconContainerStyles = css({
   display: 'flex',
-  paddingTop: "6px",
-  paddingRight: "".concat(gridSize(), "px"),
-  paddingBottom: "6px",
+  paddingTop: "var(--ds-space-075, 6px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-075, 6px)",
   paddingLeft: "".concat(ICON_PADDING * 2, "px"),
   alignItems: 'center',
   flexBasis: 'inherit',

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

@@ -29,7 +29,7 @@ import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.5.2";
+var packageVersion = "12.6.0";
 
 /* eslint-disable react/no-unused-prop-types */
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.5.2",
+	"version": "12.6.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.5.2",
+  "version": "12.6.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,8 +37,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.3.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
@@ -65,6 +66,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@emotion/react": "^11.7.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
@@ -92,6 +94,11 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlassian.design/components/datetime-picker/"
 }