@atlaskit/select 16.2.3 → 16.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/Select.js +1 -1
  3. package/dist/cjs/styles.js +11 -5
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/Select.js +1 -1
  6. package/dist/es2019/styles.js +10 -4
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/Select.js +1 -1
  9. package/dist/esm/styles.js +12 -6
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +9 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 16.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`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
8
+
3
9
  ## 16.2.3
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/Select.js CHANGED
@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
9
9
  var _analyticsNext = require("@atlaskit/analytics-next");
10
10
  var _createSelect = _interopRequireDefault(require("./createSelect"));
11
11
  var packageName = "@atlaskit/select";
12
- var packageVersion = "16.2.3";
12
+ var packageVersion = "16.3.0";
13
13
  var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
14
14
  exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
15
15
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
package/dist/cjs/styles.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = baseStyles;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _constants = require("@atlaskit/theme/constants");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _colors = require("@atlaskit/theme/colors");
11
12
  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; }
12
13
  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-next-line @atlaskit/design-system/no-deprecated-imports
@@ -35,7 +36,7 @@ function baseStyles(validationState) {
35
36
  control: function control(css, _ref2) {
36
37
  var isFocused = _ref2.isFocused,
37
38
  isDisabled = _ref2.isDisabled;
38
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N20, ")");
39
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N20, ")");
39
40
  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
40
41
  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
41
42
  if (isDisabled) {
@@ -48,7 +49,7 @@ function baseStyles(validationState) {
48
49
  if (validationState === 'success') {
49
50
  borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
50
51
  }
51
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N30, ")");
52
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N30, ")");
52
53
  if (validationState === 'error') {
53
54
  borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
54
55
  }
@@ -67,15 +68,20 @@ function baseStyles(validationState) {
67
68
  backgroundColorHover = 'transparent';
68
69
  borderColorHover = 'transparent';
69
70
  }
70
- return _objectSpread(_objectSpread({}, css), {}, {
71
+ return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
71
72
  // Turn pointer events off when disabled - this makes it so hover etc don't work.
72
73
  pointerEvents: isDisabled ? 'none' : undefined,
73
74
  backgroundColor: backgroundColor,
74
75
  borderColor: borderColor,
75
76
  borderStyle: 'solid',
76
77
  borderRadius: "var(--ds-radius-100, 3px)",
77
- borderWidth: "var(--ds-width-100, 2px)",
78
- boxShadow: 'none',
78
+ borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
79
+ boxShadow: 'none'
80
+ }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && {
81
+ '&:focus-within': {
82
+ boxShadow: "inset 0 0 0 1px ".concat(borderColor)
83
+ }
84
+ }), {}, {
79
85
  minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
80
86
  padding: 0,
81
87
  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.2.3",
3
+ "version": "16.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/Select.js CHANGED
@@ -2,7 +2,7 @@ import Select from 'react-select';
2
2
  import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
3
3
  import createSelect from './createSelect';
4
4
  const packageName = "@atlaskit/select";
5
- const packageVersion = "16.2.3";
5
+ const packageVersion = "16.3.0";
6
6
  export const SelectWithoutAnalytics = createSelect(Select);
7
7
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/es2019/styles.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
2
2
  import { gridSize, fontFamily } from '@atlaskit/theme/constants';
3
- import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
3
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
+ import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
4
5
  const BORDER_WIDTH = 2;
5
6
  const ICON_PADDING = 2;
6
7
  const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
@@ -24,7 +25,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
24
25
  isFocused,
25
26
  isDisabled
26
27
  }) => {
27
- let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N20})`;
28
+ let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20})`;
28
29
  let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
29
30
  let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
30
31
  if (isDisabled) {
@@ -37,7 +38,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
37
38
  if (validationState === 'success') {
38
39
  borderColor = `var(--ds-border-success, ${G400})`;
39
40
  }
40
- let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N30})`;
41
+ let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30})`;
41
42
  if (validationState === 'error') {
42
43
  borderColorHover = `var(--ds-border-danger, ${R400})`;
43
44
  }
@@ -64,8 +65,13 @@ export default function baseStyles(validationState, isCompact = false, appearanc
64
65
  borderColor,
65
66
  borderStyle: 'solid',
66
67
  borderRadius: "var(--ds-radius-100, 3px)",
67
- borderWidth: "var(--ds-width-100, 2px)",
68
+ borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
68
69
  boxShadow: 'none',
70
+ ...(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
71
+ '&:focus-within': {
72
+ boxShadow: `inset 0 0 0 1px ${borderColor}`
73
+ }
74
+ }),
69
75
  minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
70
76
  padding: 0,
71
77
  transition: `background-color ${transitionDuration} ease-in-out,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.2.3",
3
+ "version": "16.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/Select.js CHANGED
@@ -2,7 +2,7 @@ import Select from 'react-select';
2
2
  import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
3
3
  import createSelect from './createSelect';
4
4
  var packageName = "@atlaskit/select";
5
- var packageVersion = "16.2.3";
5
+ var packageVersion = "16.3.0";
6
6
  export var SelectWithoutAnalytics = createSelect(Select);
7
7
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/esm/styles.js CHANGED
@@ -3,7 +3,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
3
3
  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) { _defineProperty(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; }
4
4
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
5
5
  import { gridSize, fontFamily } from '@atlaskit/theme/constants';
6
- import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
6
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
+ import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
7
8
  var BORDER_WIDTH = 2;
8
9
  var ICON_PADDING = 2;
9
10
  var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
@@ -29,7 +30,7 @@ export default function baseStyles(validationState) {
29
30
  control: function control(css, _ref2) {
30
31
  var isFocused = _ref2.isFocused,
31
32
  isDisabled = _ref2.isDisabled;
32
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N20, ")");
33
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20, ")");
33
34
  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
34
35
  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
35
36
  if (isDisabled) {
@@ -42,7 +43,7 @@ export default function baseStyles(validationState) {
42
43
  if (validationState === 'success') {
43
44
  borderColor = "var(--ds-border-success, ".concat(G400, ")");
44
45
  }
45
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N30, ")");
46
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30, ")");
46
47
  if (validationState === 'error') {
47
48
  borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
48
49
  }
@@ -61,15 +62,20 @@ export default function baseStyles(validationState) {
61
62
  backgroundColorHover = 'transparent';
62
63
  borderColorHover = 'transparent';
63
64
  }
64
- return _objectSpread(_objectSpread({}, css), {}, {
65
+ return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
65
66
  // Turn pointer events off when disabled - this makes it so hover etc don't work.
66
67
  pointerEvents: isDisabled ? 'none' : undefined,
67
68
  backgroundColor: backgroundColor,
68
69
  borderColor: borderColor,
69
70
  borderStyle: 'solid',
70
71
  borderRadius: "var(--ds-radius-100, 3px)",
71
- borderWidth: "var(--ds-width-100, 2px)",
72
- boxShadow: 'none',
72
+ borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
73
+ boxShadow: 'none'
74
+ }, getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
75
+ '&:focus-within': {
76
+ boxShadow: "inset 0 0 0 1px ".concat(borderColor)
77
+ }
78
+ }), {}, {
73
79
  minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
74
80
  padding: 0,
75
81
  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.2.3",
3
+ "version": "16.3.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.2.3",
3
+ "version": "16.3.0",
4
4
  "description": "Select allows users to make a single selection or multiple selections from a list of options.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -40,6 +40,7 @@
40
40
  "dependencies": {
41
41
  "@atlaskit/analytics-next": "^9.1.0",
42
42
  "@atlaskit/icon": "^21.12.0",
43
+ "@atlaskit/platform-feature-flags": "^0.2.0",
43
44
  "@atlaskit/spinner": "^15.5.0",
44
45
  "@atlaskit/theme": "^12.5.0",
45
46
  "@atlaskit/tokens": "^1.4.0",
@@ -69,13 +70,14 @@
69
70
  "@atlaskit/form": "^8.11.0",
70
71
  "@atlaskit/logo": "^13.14.0",
71
72
  "@atlaskit/modal-dialog": "^12.5.0",
72
- "@atlaskit/radio": "^5.5.0",
73
+ "@atlaskit/radio": "^5.6.0",
73
74
  "@atlaskit/section-message": "^6.4.0",
74
75
  "@atlaskit/ssr": "*",
75
76
  "@atlaskit/tooltip": "^17.8.0",
76
77
  "@atlaskit/visual-regression": "*",
77
78
  "@atlaskit/webdriver-runner": "*",
78
79
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
80
+ "@atlassian/feature-flags-test-utils": "*",
79
81
  "@emotion/styled": "^11.0.0",
80
82
  "@testing-library/react": "^12.1.5",
81
83
  "@testing-library/user-event": "^14.4.3",
@@ -99,6 +101,11 @@
99
101
  ]
100
102
  }
101
103
  },
104
+ "platform-feature-flags": {
105
+ "platform.design-system-team.update-border-input_ff9l1": {
106
+ "type": "boolean"
107
+ }
108
+ },
102
109
  "homepage": "https://atlassian.design/components/select/",
103
110
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
104
111
  }