@atlaskit/select 16.1.7 → 16.1.8

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 +23 -7
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/Select.js +1 -1
  6. package/dist/es2019/styles.js +31 -12
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/Select.js +1 -1
  9. package/dist/esm/styles.js +23 -7
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 16.1.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`8a8aac2b848`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a8aac2b848) - [ux] Adds proper disabled styling to the isMulti component.
8
+
3
9
  ## 16.1.7
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.1.7";
12
+ var packageVersion = "16.1.8";
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
@@ -216,27 +216,43 @@ function baseStyles(validationState) {
216
216
  });
217
217
  },
218
218
  multiValue: function multiValue(css, _ref7) {
219
- var isFocused = _ref7.isFocused;
219
+ var isDisabled = _ref7.isDisabled,
220
+ isFocused = _ref7.isFocused;
221
+ var backgroundColor;
222
+ var color;
223
+ if (isDisabled) {
224
+ // Use the basic neutral background so it is slightly separate from the
225
+ // field's background
226
+ backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
227
+ color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
228
+ } else if (isFocused) {
229
+ backgroundColor = "var(--ds-background-selected, ".concat(_colors.N40, ")");
230
+ color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
231
+ } else {
232
+ backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
233
+ color = "var(--ds-text, hsl(0, 0%, 20%))";
234
+ }
220
235
  return _objectSpread(_objectSpread({}, css), {}, {
221
236
  borderRadius: "var(--ds-radius-050, 2px)",
222
- backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
237
+ backgroundColor: backgroundColor,
223
238
  boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
224
239
  maxWidth: '100%',
225
240
  '@media screen and (-ms-high-contrast: active)': {
226
241
  border: isFocused ? '1px solid transparent' : 'none'
227
242
  },
228
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
243
+ color: color
229
244
  });
230
245
  },
231
- multiValueLabel: function multiValueLabel(css) {
246
+ multiValueLabel: function multiValueLabel(css, _ref8) {
247
+ var isDisabled = _ref8.isDisabled;
232
248
  return _objectSpread(_objectSpread({}, css), {}, {
233
249
  padding: "var(--ds-space-025, 2px)",
234
- color: 'inherit',
250
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
235
251
  paddingRight: "var(--ds-space-025, 2px)"
236
252
  });
237
253
  },
238
- multiValueRemove: function multiValueRemove(css, _ref8) {
239
- var isFocused = _ref8.isFocused;
254
+ multiValueRemove: function multiValueRemove(css, _ref9) {
255
+ var isFocused = _ref9.isFocused;
240
256
  return _objectSpread(_objectSpread({}, css), {}, {
241
257
  backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(_colors.R75, ")") : undefined,
242
258
  fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.1.7",
3
+ "version": "16.1.8",
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.1.7";
5
+ const packageVersion = "16.1.8";
6
6
  export const SelectWithoutAnalytics = createSelect(Select);
7
7
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/es2019/styles.js CHANGED
@@ -205,22 +205,41 @@ export default function baseStyles(validationState, isCompact = false, appearanc
205
205
  paddingBottom: "var(--ds-space-100, 8px)"
206
206
  }),
207
207
  multiValue: (css, {
208
+ isDisabled,
208
209
  isFocused
210
+ }) => {
211
+ let backgroundColor;
212
+ let color;
213
+ if (isDisabled) {
214
+ // Use the basic neutral background so it is slightly separate from the
215
+ // field's background
216
+ backgroundColor = `var(--ds-background-neutral, ${N40})`;
217
+ color = `var(--ds-text-disabled, ${N70})`;
218
+ } else if (isFocused) {
219
+ backgroundColor = `var(--ds-background-selected, ${N40})`;
220
+ color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
221
+ } else {
222
+ backgroundColor = `var(--ds-background-neutral, ${N40})`;
223
+ color = "var(--ds-text, hsl(0, 0%, 20%))";
224
+ }
225
+ return {
226
+ ...css,
227
+ borderRadius: "var(--ds-radius-050, 2px)",
228
+ backgroundColor,
229
+ boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
230
+ maxWidth: '100%',
231
+ '@media screen and (-ms-high-contrast: active)': {
232
+ border: isFocused ? '1px solid transparent' : 'none'
233
+ },
234
+ color
235
+ };
236
+ },
237
+ multiValueLabel: (css, {
238
+ isDisabled
209
239
  }) => ({
210
- ...css,
211
- borderRadius: "var(--ds-radius-050, 2px)",
212
- backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral, ${N40})`,
213
- boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
214
- maxWidth: '100%',
215
- '@media screen and (-ms-high-contrast: active)': {
216
- border: isFocused ? '1px solid transparent' : 'none'
217
- },
218
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
219
- }),
220
- multiValueLabel: css => ({
221
240
  ...css,
222
241
  padding: "var(--ds-space-025, 2px)",
223
- color: 'inherit',
242
+ color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
224
243
  paddingRight: "var(--ds-space-025, 2px)"
225
244
  }),
226
245
  multiValueRemove: (css, {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.1.7",
3
+ "version": "16.1.8",
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.1.7";
5
+ var packageVersion = "16.1.8";
6
6
  export var SelectWithoutAnalytics = createSelect(Select);
7
7
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/esm/styles.js CHANGED
@@ -210,27 +210,43 @@ export default function baseStyles(validationState) {
210
210
  });
211
211
  },
212
212
  multiValue: function multiValue(css, _ref7) {
213
- var isFocused = _ref7.isFocused;
213
+ var isDisabled = _ref7.isDisabled,
214
+ isFocused = _ref7.isFocused;
215
+ var backgroundColor;
216
+ var color;
217
+ if (isDisabled) {
218
+ // Use the basic neutral background so it is slightly separate from the
219
+ // field's background
220
+ backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
221
+ color = "var(--ds-text-disabled, ".concat(N70, ")");
222
+ } else if (isFocused) {
223
+ backgroundColor = "var(--ds-background-selected, ".concat(N40, ")");
224
+ color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
225
+ } else {
226
+ backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
227
+ color = "var(--ds-text, hsl(0, 0%, 20%))";
228
+ }
214
229
  return _objectSpread(_objectSpread({}, css), {}, {
215
230
  borderRadius: "var(--ds-radius-050, 2px)",
216
- backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral, ".concat(N40, ")"),
231
+ backgroundColor: backgroundColor,
217
232
  boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
218
233
  maxWidth: '100%',
219
234
  '@media screen and (-ms-high-contrast: active)': {
220
235
  border: isFocused ? '1px solid transparent' : 'none'
221
236
  },
222
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))"
237
+ color: color
223
238
  });
224
239
  },
225
- multiValueLabel: function multiValueLabel(css) {
240
+ multiValueLabel: function multiValueLabel(css, _ref8) {
241
+ var isDisabled = _ref8.isDisabled;
226
242
  return _objectSpread(_objectSpread({}, css), {}, {
227
243
  padding: "var(--ds-space-025, 2px)",
228
- color: 'inherit',
244
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
229
245
  paddingRight: "var(--ds-space-025, 2px)"
230
246
  });
231
247
  },
232
- multiValueRemove: function multiValueRemove(css, _ref8) {
233
- var isFocused = _ref8.isFocused;
248
+ multiValueRemove: function multiValueRemove(css, _ref9) {
249
+ var isFocused = _ref9.isFocused;
234
250
  return _objectSpread(_objectSpread({}, css), {}, {
235
251
  backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(R75, ")") : undefined,
236
252
  fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.1.7",
3
+ "version": "16.1.8",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "16.1.7",
3
+ "version": "16.1.8",
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/"
@@ -54,7 +54,7 @@
54
54
  "react-dom": "^16.8.0"
55
55
  },
56
56
  "devDependencies": {
57
- "@atlaskit/button": "^16.5.0",
57
+ "@atlaskit/button": "^16.6.0",
58
58
  "@atlaskit/checkbox": "^12.4.0",
59
59
  "@atlaskit/docs": "*",
60
60
  "@atlaskit/drawer": "^7.4.0",