@atlaskit/checkbox 13.2.0 → 13.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 (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/checkbox.js +2 -3
  3. package/dist/cjs/internal/label.js +2 -3
  4. package/dist/es2019/checkbox.js +2 -3
  5. package/dist/es2019/internal/label.js +3 -4
  6. package/dist/esm/checkbox.js +2 -3
  7. package/dist/esm/internal/label.js +3 -4
  8. package/package.json +2 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 13.3.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
  ## 13.2.0
4
17
 
5
18
  ### Minor Changes
package/dist/cjs/checkbox.js CHANGED
@@ -12,7 +12,6 @@ var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
13
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
14
14
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
15
  var _colors = require("@atlaskit/theme/colors");
17
16
  var _internal = require("./internal");
18
17
  var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
@@ -44,7 +43,7 @@ var checkboxStyles = (0, _react2.css)({
44
43
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
45
44
  'rect:first-of-type': {
46
45
  stroke: 'var(--checkbox-border-color)',
47
- strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
46
+ strokeWidth: "var(--ds-border-width, 1px)",
48
47
  transition: 'stroke 0.2s ease-in-out'
49
48
  }
50
49
  },
@@ -164,7 +163,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
164
163
  analyticsData: analyticsContext,
165
164
  componentName: 'checkbox',
166
165
  packageName: "@atlaskit/checkbox",
167
- packageVersion: "13.2.0"
166
+ packageVersion: "13.3.0"
168
167
  });
169
168
  var internalRef = (0, _react.useRef)(null);
170
169
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
package/dist/cjs/internal/label.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = Label;
7
7
  var _react = require("@emotion/react");
8
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
8
  var _colors = require("@atlaskit/theme/colors");
10
9
  /** @jsx jsx */
11
10
 
@@ -38,14 +37,14 @@ var labelStyles = (0, _react.css)({
38
37
  /**
39
38
  * Border
40
39
  */
41
- '--local-border': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
40
+ '--local-border': "var(--ds-border-input, ".concat(_colors.N100, ")"),
42
41
  '--local-border-active': "var(--ds-border, ".concat(_colors.B50, ")"),
43
42
  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
44
43
  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
45
44
  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
46
45
  '--local-border-disabled': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
47
46
  '--local-border-focus': "var(--ds-border-focused, ".concat(_colors.B200, ")"),
48
- '--local-border-hover': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
47
+ '--local-border-hover': "var(--ds-border-input, ".concat(_colors.N100, ")"),
49
48
  '--local-border-invalid': "var(--ds-border-danger, ".concat(_colors.R300, ")"),
50
49
  /**
51
50
  * Tick
package/dist/es2019/checkbox.js CHANGED
@@ -4,7 +4,6 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
6
6
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
7
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
7
  import { B200 } from '@atlaskit/theme/colors';
9
8
  import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
10
9
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -34,7 +33,7 @@ const checkboxStyles = css({
34
33
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
35
34
  'rect:first-of-type': {
36
35
  stroke: 'var(--checkbox-border-color)',
37
- strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
36
+ strokeWidth: "var(--ds-border-width, 1px)",
38
37
  transition: 'stroke 0.2s ease-in-out'
39
38
  }
40
39
  },
@@ -148,7 +147,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
148
147
  analyticsData: analyticsContext,
149
148
  componentName: 'checkbox',
150
149
  packageName: "@atlaskit/checkbox",
151
- packageVersion: "13.2.0"
150
+ packageVersion: "13.3.0"
152
151
  });
153
152
  const internalRef = useRef(null);
154
153
  const mergedRefs = mergeRefs([internalRef, ref]);
package/dist/es2019/internal/label.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/react';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
- import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
3
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
5
4
  const baseStyles = css({
6
5
  display: 'grid',
7
6
  gridAutoColumns: '1fr',
@@ -31,14 +30,14 @@ const labelStyles = css({
31
30
  /**
32
31
  * Border
33
32
  */
34
- '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
33
+ '--local-border': `var(--ds-border-input, ${N100})`,
35
34
  '--local-border-active': `var(--ds-border, ${B50})`,
36
35
  '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
37
36
  '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
38
37
  '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
39
38
  '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
40
39
  '--local-border-focus': `var(--ds-border-focused, ${B200})`,
41
- '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
40
+ '--local-border-hover': `var(--ds-border-input, ${N100})`,
42
41
  '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
43
42
  /**
44
43
  * Tick
package/dist/esm/checkbox.js CHANGED
@@ -7,7 +7,6 @@ import { forwardRef, memo, useCallback, useRef, useState } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
9
9
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
10
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
11
10
  import { B200 } from '@atlaskit/theme/colors';
12
11
  import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
13
12
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -37,7 +36,7 @@ var checkboxStyles = css({
37
36
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
38
37
  'rect:first-of-type': {
39
38
  stroke: 'var(--checkbox-border-color)',
40
- strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
39
+ strokeWidth: "var(--ds-border-width, 1px)",
41
40
  transition: 'stroke 0.2s ease-in-out'
42
41
  }
43
42
  },
@@ -157,7 +156,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
157
156
  analyticsData: analyticsContext,
158
157
  componentName: 'checkbox',
159
158
  packageName: "@atlaskit/checkbox",
160
- packageVersion: "13.2.0"
159
+ packageVersion: "13.3.0"
161
160
  });
162
161
  var internalRef = useRef(null);
163
162
  var mergedRefs = mergeRefs([internalRef, ref]);
package/dist/esm/internal/label.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/react';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
- import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
3
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
5
4
  var baseStyles = css({
6
5
  display: 'grid',
7
6
  gridAutoColumns: '1fr',
@@ -31,14 +30,14 @@ var labelStyles = css({
31
30
  /**
32
31
  * Border
33
32
  */
34
- '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
33
+ '--local-border': "var(--ds-border-input, ".concat(N100, ")"),
35
34
  '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
36
35
  '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
37
36
  '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
38
37
  '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
39
38
  '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
40
39
  '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
41
- '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
40
+ '--local-border-hover': "var(--ds-border-input, ".concat(N100, ")"),
42
41
  '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
43
42
  /**
44
43
  * Tick
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "13.2.0",
3
+ "version": "13.3.0",
4
4
  "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,9 +41,8 @@
41
41
  "@atlaskit/analytics-next": "^9.3.0",
42
42
  "@atlaskit/ds-lib": "^2.3.0",
43
43
  "@atlaskit/icon": "^22.1.0",
44
- "@atlaskit/platform-feature-flags": "^0.2.0",
45
44
  "@atlaskit/theme": "^12.7.0",
46
- "@atlaskit/tokens": "^1.44.0",
45
+ "@atlaskit/tokens": "^1.45.0",
47
46
  "@babel/runtime": "^7.0.0",
48
47
  "@emotion/react": "^11.7.1"
49
48
  },
@@ -90,11 +89,6 @@
90
89
  ]
91
90
  }
92
91
  },
93
- "platform-feature-flags": {
94
- "platform.design-system-team.update-border-radio-checkbox_7askv": {
95
- "type": "boolean"
96
- }
97
- },
98
92
  "homepage": "https://atlassian.design/components/checkbox/",
99
93
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
100
94
  }