@atlaskit/select 17.7.1 → 17.8.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 +13 -0
  2. package/dist/cjs/Select.js +1 -1
  3. package/dist/cjs/components/input-options.js +1 -2
  4. package/dist/cjs/styles.js +6 -9
  5. package/dist/es2019/Select.js +1 -1
  6. package/dist/es2019/components/input-options.js +1 -2
  7. package/dist/es2019/styles.js +7 -10
  8. package/dist/esm/Select.js +1 -1
  9. package/dist/esm/components/input-options.js +1 -2
  10. package/dist/esm/styles.js +6 -9
  11. package/package.json +4 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 17.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#94675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94675)
8
+ [`5d9e1dccacca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d9e1dccacca) -
9
+ [ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
10
+ color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 17.7.1
4
17
 
5
18
  ### 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 = "17.7.1";
12
+ var packageVersion = "17.8.0";
13
13
  var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
14
14
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
15
15
  var Select = (0, _analyticsNext.withAnalyticsContext)({
package/dist/cjs/components/input-options.js CHANGED
@@ -17,7 +17,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
18
  var _react = require("@emotion/react");
19
19
  var _react2 = require("react");
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
20
  var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
22
21
  var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
23
22
  var _colors = require("@atlaskit/theme/colors");
@@ -137,7 +136,7 @@ var baseIconStyles = (0, _react.css)({
137
136
  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
138
137
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
139
138
  '& svg rect, & svg circle:first-of-type': {
140
- strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
139
+ strokeWidth: "var(--ds-border-width, 1px)",
141
140
  strokeLinejoin: 'round'
142
141
  }
143
142
  });
package/dist/cjs/styles.js CHANGED
@@ -7,7 +7,6 @@ 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");
11
10
  var _colors = require("@atlaskit/theme/colors");
12
11
  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; }
13
12
  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; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -36,7 +35,7 @@ function baseStyles(validationState) {
36
35
  control: function control(css, _ref2) {
37
36
  var isFocused = _ref2.isFocused,
38
37
  isDisabled = _ref2.isDisabled;
39
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N20, ")");
38
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")");
40
39
  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
41
40
  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
42
41
  if (isDisabled) {
@@ -49,7 +48,7 @@ function baseStyles(validationState) {
49
48
  if (validationState === 'success') {
50
49
  borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
51
50
  }
52
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N30, ")");
51
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")");
53
52
  if (validationState === 'error') {
54
53
  borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
55
54
  }
@@ -68,20 +67,18 @@ function baseStyles(validationState) {
68
67
  backgroundColorHover = 'transparent';
69
68
  borderColorHover = 'transparent';
70
69
  }
71
- return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
70
+ return _objectSpread(_objectSpread({}, css), {}, {
72
71
  // Turn pointer events off when disabled - this makes it so hover etc don't work.
73
72
  pointerEvents: isDisabled ? 'none' : undefined,
74
73
  backgroundColor: backgroundColor,
75
74
  borderColor: borderColor,
76
75
  borderStyle: 'solid',
77
76
  borderRadius: "var(--ds-border-radius-100, 3px)",
78
- borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
79
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none'
80
- }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && {
77
+ borderWidth: "var(--ds-border-width, 1px)",
78
+ boxShadow: validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
81
79
  '&:focus-within': {
82
80
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
83
- }
84
- }), {}, {
81
+ },
85
82
  minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
86
83
  padding: 0,
87
84
  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
package/dist/es2019/Select.js CHANGED
@@ -2,7 +2,7 @@ import ReactSelect 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 = "17.7.1";
5
+ const packageVersion = "17.8.0";
6
6
  export const SelectWithoutAnalytics = createSelect(ReactSelect);
7
7
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  const Select = withAnalyticsContext({
package/dist/es2019/components/input-options.js CHANGED
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  /** @jsx jsx */
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { Component } from 'react';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import RadioIcon from '@atlaskit/icon/glyph/radio';
8
7
  import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
9
8
  import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
@@ -126,7 +125,7 @@ const baseIconStyles = css({
126
125
  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
127
126
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
128
127
  '& svg rect, & svg circle:first-of-type': {
129
- strokeWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
128
+ strokeWidth: "var(--ds-border-width, 1px)",
130
129
  strokeLinejoin: 'round'
131
130
  }
132
131
  });
package/dist/es2019/styles.js CHANGED
@@ -1,6 +1,5 @@
1
1
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
2
2
  import { gridSize, fontFamily } from '@atlaskit/theme/constants';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
3
  import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
5
4
  const BORDER_WIDTH = 2;
6
5
  const ICON_PADDING = 2;
@@ -25,7 +24,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
25
24
  isFocused,
26
25
  isDisabled
27
26
  }) => {
28
- let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N20})`;
27
+ let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N100})`;
29
28
  let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
30
29
  let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
31
30
  if (isDisabled) {
@@ -38,7 +37,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
38
37
  if (validationState === 'success') {
39
38
  borderColor = `var(--ds-border-success, ${G400})`;
40
39
  }
41
- let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N30})`;
40
+ let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N100})`;
42
41
  if (validationState === 'error') {
43
42
  borderColorHover = `var(--ds-border-danger, ${R400})`;
44
43
  }
@@ -65,13 +64,11 @@ export default function baseStyles(validationState, isCompact = false, appearanc
65
64
  borderColor,
66
65
  borderStyle: 'solid',
67
66
  borderRadius: "var(--ds-border-radius-100, 3px)",
68
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
69
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && validationState === 'error' ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}` : 'none',
70
- ...(getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && {
71
- '&:focus-within': {
72
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
73
- }
74
- }),
67
+ borderWidth: "var(--ds-border-width, 1px)",
68
+ boxShadow: validationState === 'error' ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}` : 'none',
69
+ '&:focus-within': {
70
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
71
+ },
75
72
  minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
76
73
  padding: 0,
77
74
  transition: `background-color ${transitionDuration} ease-in-out,
package/dist/esm/Select.js CHANGED
@@ -2,7 +2,7 @@ import ReactSelect 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 = "17.7.1";
5
+ var packageVersion = "17.8.0";
6
6
  export var SelectWithoutAnalytics = createSelect(ReactSelect);
7
7
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  var Select = withAnalyticsContext({
package/dist/esm/components/input-options.js CHANGED
@@ -16,7 +16,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
16
16
  /** @jsx jsx */
17
17
  import { css, jsx } from '@emotion/react';
18
18
  import { Component } from 'react';
19
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
20
19
  import RadioIcon from '@atlaskit/icon/glyph/radio';
21
20
  import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
22
21
  import { B300, B400, B75, N20A, N0, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
@@ -131,7 +130,7 @@ var baseIconStyles = css({
131
130
  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
132
131
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
133
132
  '& svg rect, & svg circle:first-of-type': {
134
- strokeWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
133
+ strokeWidth: "var(--ds-border-width, 1px)",
135
134
  strokeLinejoin: 'round'
136
135
  }
137
136
  });
package/dist/esm/styles.js CHANGED
@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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) { _defineProperty(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; }
4
4
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
5
5
  import { gridSize, fontFamily } from '@atlaskit/theme/constants';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
8
7
  var BORDER_WIDTH = 2;
9
8
  var ICON_PADDING = 2;
@@ -30,7 +29,7 @@ export default function baseStyles(validationState) {
30
29
  control: function control(css, _ref2) {
31
30
  var isFocused = _ref2.isFocused,
32
31
  isDisabled = _ref2.isDisabled;
33
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N20, ")");
32
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N100, ")");
34
33
  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
35
34
  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
36
35
  if (isDisabled) {
@@ -43,7 +42,7 @@ export default function baseStyles(validationState) {
43
42
  if (validationState === 'success') {
44
43
  borderColor = "var(--ds-border-success, ".concat(G400, ")");
45
44
  }
46
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N30, ")");
45
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N100, ")");
47
46
  if (validationState === 'error') {
48
47
  borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
49
48
  }
@@ -62,20 +61,18 @@ export default function baseStyles(validationState) {
62
61
  backgroundColorHover = 'transparent';
63
62
  borderColorHover = 'transparent';
64
63
  }
65
- return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
64
+ return _objectSpread(_objectSpread({}, css), {}, {
66
65
  // Turn pointer events off when disabled - this makes it so hover etc don't work.
67
66
  pointerEvents: isDisabled ? 'none' : undefined,
68
67
  backgroundColor: backgroundColor,
69
68
  borderColor: borderColor,
70
69
  borderStyle: 'solid',
71
70
  borderRadius: "var(--ds-border-radius-100, 3px)",
72
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
73
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none'
74
- }, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && {
71
+ borderWidth: "var(--ds-border-width, 1px)",
72
+ boxShadow: validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
75
73
  '&:focus-within': {
76
74
  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
77
- }
78
- }), {}, {
75
+ },
79
76
  minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
80
77
  padding: 0,
81
78
  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "17.7.1",
3
+ "version": "17.8.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/"
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/platform-feature-flags": "^0.2.0",
47
47
  "@atlaskit/spinner": "^16.1.0",
48
48
  "@atlaskit/theme": "^12.7.0",
49
- "@atlaskit/tokens": "^1.44.0",
49
+ "@atlaskit/tokens": "^1.45.0",
50
50
  "@atlaskit/visually-hidden": "^1.3.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
@@ -66,10 +66,10 @@
66
66
  "devDependencies": {
67
67
  "@af/accessibility-testing": "*",
68
68
  "@af/integration-testing": "*",
69
- "@atlaskit/checkbox": "^13.2.0",
69
+ "@atlaskit/checkbox": "^13.3.0",
70
70
  "@atlaskit/ds-lib": "^2.3.0",
71
71
  "@atlaskit/modal-dialog": "^12.13.0",
72
- "@atlaskit/radio": "^6.2.0",
72
+ "@atlaskit/radio": "^6.3.0",
73
73
  "@atlaskit/ssr": "*",
74
74
  "@atlaskit/visual-regression": "*",
75
75
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -100,12 +100,6 @@
100
100
  }
101
101
  },
102
102
  "platform-feature-flags": {
103
- "platform.design-system-team.border-checkbox_nyoiu": {
104
- "type": "boolean"
105
- },
106
- "platform.design-system-team.update-input-border-wdith_5abwv": {
107
- "type": "boolean"
108
- },
109
103
  "platform.design-system-team.popup-select-close_8h15h": {
110
104
  "type": "boolean"
111
105
  },