@atlaskit/select 18.9.5 → 18.9.6

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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/Select.js +1 -1
  3. package/dist/cjs/components/input-options.js +17 -33
  4. package/dist/es2019/Select.js +1 -1
  5. package/dist/es2019/components/input-options.js +17 -33
  6. package/dist/esm/Select.js +1 -1
  7. package/dist/esm/components/input-options.js +17 -33
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 18.9.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#107242](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107242)
8
+ [`af82a4f946f03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af82a4f946f03) -
9
+ Remove fallback color in checkbox/radio select
10
+
3
11
  ## 18.9.5
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/Select.js CHANGED
@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
11
11
  /* eslint-disable @repo/internal/react/require-jsdoc */
12
12
 
13
13
  var packageName = "@atlaskit/select";
14
- var packageVersion = "18.9.5";
14
+ var packageVersion = "18.9.6";
15
15
  var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
16
16
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
17
17
  var Select = (0, _analyticsNext.withAnalyticsContext)({
package/dist/cjs/components/input-options.js CHANGED
@@ -20,7 +20,6 @@ var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"))
20
20
  var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
21
21
  var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
22
22
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
23
- var _colors = require("@atlaskit/theme/colors");
24
23
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
25
24
  var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
26
25
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -39,7 +38,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
39
38
  isSelected = props.isSelected;
40
39
  var baseStyles = {
41
40
  alignItems: 'center',
42
- backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
41
+ backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : 'transparent',
43
42
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
44
43
  display: 'flex ',
45
44
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -47,9 +46,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
47
46
  paddingTop: "var(--ds-space-050, 4px)",
48
47
  // This 'none' needs to be present to ensure that style is not applied when
49
48
  // the option is selected but not focused.
50
- boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")")) : 'none',
49
+ boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, #388BFF)") : 'none',
51
50
  ':active': {
52
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
51
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
53
52
  },
54
53
  '@media screen and (-ms-high-contrast: active)': {
55
54
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -75,22 +74,20 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
75
74
  isDisabled = _ref.isDisabled,
76
75
  isFocused = _ref.isFocused,
77
76
  isSelected = _ref.isSelected;
78
- if (isDisabled && isSelected) {
79
- return "var(--ds-background-disabled, ".concat(_colors.B75, ")");
80
- } else if (isDisabled) {
81
- return "var(--ds-background-disabled, ".concat(_colors.N20A, ")");
77
+ if (isDisabled) {
78
+ return "var(--ds-background-disabled, #091E4208)";
82
79
  } else if (isSelected && isActive) {
83
- return "var(--ds-background-selected-bold-pressed, ".concat(_colors.B75, ")");
80
+ return "var(--ds-background-selected-bold-pressed, #09326C)";
84
81
  } else if (isActive) {
85
- return "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")");
82
+ return "var(--ds-background-selected-pressed, #85B8FF)";
86
83
  } else if (isFocused && isSelected) {
87
- return "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")");
84
+ return "var(--ds-background-selected-bold-hovered, #0055CC)";
88
85
  } else if (isFocused) {
89
- return "var(--ds-surface, ".concat(_colors.N0, ")");
86
+ return "var(--ds-surface, #FFFFFF)";
90
87
  } else if (isSelected) {
91
- return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
88
+ return "var(--ds-background-selected-bold, #0C66E4)";
92
89
  }
93
- return "var(--ds-background-neutral, ".concat(_colors.N0, ")");
90
+ return "var(--ds-background-neutral, #091E420F)";
94
91
  };
95
92
 
96
93
  // the secondary color represents the radio dot or checkmark
@@ -99,37 +96,24 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
99
96
  isDisabled = _ref2.isDisabled,
100
97
  isSelected = _ref2.isSelected;
101
98
  if (isDisabled && isSelected) {
102
- return "var(--ds-text-disabled, ".concat(_colors.N70, ")");
99
+ return "var(--ds-text-disabled, #091E424F)";
103
100
  } else if (isActive && isSelected && !isDisabled) {
104
- return "var(--ds-surface, ".concat(_colors.B400, ")");
101
+ return "var(--ds-surface, #FFFFFF)";
105
102
  } else if (!isSelected) {
106
103
  return 'transparent';
107
104
  }
108
- return "var(--ds-surface, ".concat(_colors.N0, ")");
105
+ return "var(--ds-surface, #FFFFFF)";
109
106
  };
110
107
 
111
108
  // the border color surrounds the checkbox/radio
112
109
  var getBorderColor = function getBorderColor(_ref3) {
113
110
  var isActive = _ref3.isActive,
114
111
  isDisabled = _ref3.isDisabled,
115
- isFocused = _ref3.isFocused,
116
112
  isSelected = _ref3.isSelected;
117
- if (isDisabled && isSelected) {
118
- return "var(--ds-background-disabled, ".concat(_colors.B400, ")");
119
- } else if (isDisabled) {
120
- return "var(--ds-background-disabled, ".concat(_colors.N100, ")");
121
- } else if (isSelected && isActive) {
122
- return "var(--ds-background-selected-bold-pressed, ".concat(_colors.B400, ")");
123
- } else if (isActive) {
124
- return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
125
- } else if (isFocused && isSelected) {
126
- return "var(--ds-background-selected-bold-hovered, ".concat(_colors.B400, ")");
127
- } else if (isFocused) {
128
- return "var(--ds-border-input, ".concat(_colors.N100, ")");
129
- } else if (isSelected) {
130
- return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
113
+ if (isSelected || isActive || isDisabled) {
114
+ return 'currentColor';
131
115
  }
132
- return "var(--ds-border-input, ".concat(_colors.N100, ")");
116
+ return "var(--ds-border-input, #8590A2)";
133
117
  };
134
118
  var baseIconStyles = (0, _react2.css)({
135
119
  display: 'flex ',
package/dist/es2019/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  const packageName = "@atlaskit/select";
6
- const packageVersion = "18.9.5";
6
+ const packageVersion = "18.9.6";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
package/dist/es2019/components/input-options.js CHANGED
@@ -11,7 +11,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
11
11
  import RadioIcon from '@atlaskit/icon/glyph/radio';
12
12
  import PrimitiveSVGIcon from '@atlaskit/icon/svg';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
- import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
15
14
  import VisuallyHidden from '@atlaskit/visually-hidden';
16
15
  const getPrimitiveStyles = props => {
17
16
  const {
@@ -24,7 +23,7 @@ const getPrimitiveStyles = props => {
24
23
  } = props;
25
24
  const baseStyles = {
26
25
  alignItems: 'center',
27
- backgroundColor: isFocused ? `var(--ds-background-neutral-subtle-hovered, ${N20})` : 'transparent',
26
+ backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : 'transparent',
28
27
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
29
28
  display: 'flex ',
30
29
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -32,9 +31,9 @@ const getPrimitiveStyles = props => {
32
31
  paddingTop: "var(--ds-space-050, 4px)",
33
32
  // This 'none' needs to be present to ensure that style is not applied when
34
33
  // the option is selected but not focused.
35
- boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`}` : 'none',
34
+ boxShadow: isFocused ? `inset 2px 0px 0px ${"var(--ds-border-focused, #388BFF)"}` : 'none',
36
35
  ':active': {
37
- backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`
36
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
38
37
  },
39
38
  '@media screen and (-ms-high-contrast: active)': {
40
39
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -66,22 +65,20 @@ const getPrimaryColor = ({
66
65
  isFocused,
67
66
  isSelected
68
67
  }) => {
69
- if (isDisabled && isSelected) {
70
- return `var(--ds-background-disabled, ${B75})`;
71
- } else if (isDisabled) {
72
- return `var(--ds-background-disabled, ${N20A})`;
68
+ if (isDisabled) {
69
+ return "var(--ds-background-disabled, #091E4208)";
73
70
  } else if (isSelected && isActive) {
74
- return `var(--ds-background-selected-bold-pressed, ${B75})`;
71
+ return "var(--ds-background-selected-bold-pressed, #09326C)";
75
72
  } else if (isActive) {
76
- return `var(--ds-background-selected-pressed, ${B75})`;
73
+ return "var(--ds-background-selected-pressed, #85B8FF)";
77
74
  } else if (isFocused && isSelected) {
78
- return `var(--ds-background-selected-bold-hovered, ${B300})`;
75
+ return "var(--ds-background-selected-bold-hovered, #0055CC)";
79
76
  } else if (isFocused) {
80
- return `var(--ds-surface, ${N0})`;
77
+ return "var(--ds-surface, #FFFFFF)";
81
78
  } else if (isSelected) {
82
- return `var(--ds-background-selected-bold, ${B400})`;
79
+ return "var(--ds-background-selected-bold, #0C66E4)";
83
80
  }
84
- return `var(--ds-background-neutral, ${N0})`;
81
+ return "var(--ds-background-neutral, #091E420F)";
85
82
  };
86
83
 
87
84
  // the secondary color represents the radio dot or checkmark
@@ -91,38 +88,25 @@ const getSecondaryColor = ({
91
88
  isSelected
92
89
  }) => {
93
90
  if (isDisabled && isSelected) {
94
- return `var(--ds-text-disabled, ${N70})`;
91
+ return "var(--ds-text-disabled, #091E424F)";
95
92
  } else if (isActive && isSelected && !isDisabled) {
96
- return `var(--ds-surface, ${B400})`;
93
+ return "var(--ds-surface, #FFFFFF)";
97
94
  } else if (!isSelected) {
98
95
  return 'transparent';
99
96
  }
100
- return `var(--ds-surface, ${N0})`;
97
+ return "var(--ds-surface, #FFFFFF)";
101
98
  };
102
99
 
103
100
  // the border color surrounds the checkbox/radio
104
101
  const getBorderColor = ({
105
102
  isActive,
106
103
  isDisabled,
107
- isFocused,
108
104
  isSelected
109
105
  }) => {
110
- if (isDisabled && isSelected) {
111
- return `var(--ds-background-disabled, ${B400})`;
112
- } else if (isDisabled) {
113
- return `var(--ds-background-disabled, ${N100})`;
114
- } else if (isSelected && isActive) {
115
- return `var(--ds-background-selected-bold-pressed, ${B400})`;
116
- } else if (isActive) {
117
- return `var(--ds-background-selected-bold, ${B400})`;
118
- } else if (isFocused && isSelected) {
119
- return `var(--ds-background-selected-bold-hovered, ${B400})`;
120
- } else if (isFocused) {
121
- return `var(--ds-border-input, ${N100})`;
122
- } else if (isSelected) {
123
- return `var(--ds-background-selected-bold, ${B400})`;
106
+ if (isSelected || isActive || isDisabled) {
107
+ return 'currentColor';
124
108
  }
125
- return `var(--ds-border-input, ${N100})`;
109
+ return "var(--ds-border-input, #8590A2)";
126
110
  };
127
111
  const baseIconStyles = css({
128
112
  display: 'flex ',
package/dist/esm/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  var packageName = "@atlaskit/select";
6
- var packageVersion = "18.9.5";
6
+ var packageVersion = "18.9.6";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
package/dist/esm/components/input-options.js CHANGED
@@ -23,7 +23,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
23
23
  import RadioIcon from '@atlaskit/icon/glyph/radio';
24
24
  import PrimitiveSVGIcon from '@atlaskit/icon/svg';
25
25
  import { fg } from '@atlaskit/platform-feature-flags';
26
- import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
27
26
  import VisuallyHidden from '@atlaskit/visually-hidden';
28
27
  var getPrimitiveStyles = function getPrimitiveStyles(props) {
29
28
  var cx = props.cx,
@@ -34,7 +33,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
34
33
  isSelected = props.isSelected;
35
34
  var baseStyles = {
36
35
  alignItems: 'center',
37
- backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")") : 'transparent',
36
+ backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : 'transparent',
38
37
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
39
38
  display: 'flex ',
40
39
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -42,9 +41,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
42
41
  paddingTop: "var(--ds-space-050, 4px)",
43
42
  // This 'none' needs to be present to ensure that style is not applied when
44
43
  // the option is selected but not focused.
45
- boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")")) : 'none',
44
+ boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, #388BFF)") : 'none',
46
45
  ':active': {
47
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")")
46
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
48
47
  },
49
48
  '@media screen and (-ms-high-contrast: active)': {
50
49
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -70,22 +69,20 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
70
69
  isDisabled = _ref.isDisabled,
71
70
  isFocused = _ref.isFocused,
72
71
  isSelected = _ref.isSelected;
73
- if (isDisabled && isSelected) {
74
- return "var(--ds-background-disabled, ".concat(B75, ")");
75
- } else if (isDisabled) {
76
- return "var(--ds-background-disabled, ".concat(N20A, ")");
72
+ if (isDisabled) {
73
+ return "var(--ds-background-disabled, #091E4208)";
77
74
  } else if (isSelected && isActive) {
78
- return "var(--ds-background-selected-bold-pressed, ".concat(B75, ")");
75
+ return "var(--ds-background-selected-bold-pressed, #09326C)";
79
76
  } else if (isActive) {
80
- return "var(--ds-background-selected-pressed, ".concat(B75, ")");
77
+ return "var(--ds-background-selected-pressed, #85B8FF)";
81
78
  } else if (isFocused && isSelected) {
82
- return "var(--ds-background-selected-bold-hovered, ".concat(B300, ")");
79
+ return "var(--ds-background-selected-bold-hovered, #0055CC)";
83
80
  } else if (isFocused) {
84
- return "var(--ds-surface, ".concat(N0, ")");
81
+ return "var(--ds-surface, #FFFFFF)";
85
82
  } else if (isSelected) {
86
- return "var(--ds-background-selected-bold, ".concat(B400, ")");
83
+ return "var(--ds-background-selected-bold, #0C66E4)";
87
84
  }
88
- return "var(--ds-background-neutral, ".concat(N0, ")");
85
+ return "var(--ds-background-neutral, #091E420F)";
89
86
  };
90
87
 
91
88
  // the secondary color represents the radio dot or checkmark
@@ -94,37 +91,24 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
94
91
  isDisabled = _ref2.isDisabled,
95
92
  isSelected = _ref2.isSelected;
96
93
  if (isDisabled && isSelected) {
97
- return "var(--ds-text-disabled, ".concat(N70, ")");
94
+ return "var(--ds-text-disabled, #091E424F)";
98
95
  } else if (isActive && isSelected && !isDisabled) {
99
- return "var(--ds-surface, ".concat(B400, ")");
96
+ return "var(--ds-surface, #FFFFFF)";
100
97
  } else if (!isSelected) {
101
98
  return 'transparent';
102
99
  }
103
- return "var(--ds-surface, ".concat(N0, ")");
100
+ return "var(--ds-surface, #FFFFFF)";
104
101
  };
105
102
 
106
103
  // the border color surrounds the checkbox/radio
107
104
  var getBorderColor = function getBorderColor(_ref3) {
108
105
  var isActive = _ref3.isActive,
109
106
  isDisabled = _ref3.isDisabled,
110
- isFocused = _ref3.isFocused,
111
107
  isSelected = _ref3.isSelected;
112
- if (isDisabled && isSelected) {
113
- return "var(--ds-background-disabled, ".concat(B400, ")");
114
- } else if (isDisabled) {
115
- return "var(--ds-background-disabled, ".concat(N100, ")");
116
- } else if (isSelected && isActive) {
117
- return "var(--ds-background-selected-bold-pressed, ".concat(B400, ")");
118
- } else if (isActive) {
119
- return "var(--ds-background-selected-bold, ".concat(B400, ")");
120
- } else if (isFocused && isSelected) {
121
- return "var(--ds-background-selected-bold-hovered, ".concat(B400, ")");
122
- } else if (isFocused) {
123
- return "var(--ds-border-input, ".concat(N100, ")");
124
- } else if (isSelected) {
125
- return "var(--ds-background-selected-bold, ".concat(B400, ")");
108
+ if (isSelected || isActive || isDisabled) {
109
+ return 'currentColor';
126
110
  }
127
- return "var(--ds-border-input, ".concat(N100, ")");
111
+ return "var(--ds-border-input, #8590A2)";
128
112
  };
129
113
  var baseIconStyles = css({
130
114
  display: 'flex ',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "18.9.5",
3
+ "version": "18.9.6",
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/"
@@ -70,7 +70,7 @@
70
70
  "@af/visual-regression": "*",
71
71
  "@atlaskit/checkbox": "^15.2.0",
72
72
  "@atlaskit/modal-dialog": "^12.19.0",
73
- "@atlaskit/radio": "^7.0.0",
73
+ "@atlaskit/radio": "^7.1.0",
74
74
  "@atlaskit/ssr": "*",
75
75
  "@atlaskit/visual-regression": "*",
76
76
  "@atlassian/feature-flags-test-utils": "*",