@atlaskit/checkbox 12.6.5 → 12.6.7

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 (16) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/checkbox.js +4 -4
  3. package/dist/cjs/internal/label.js +1 -0
  4. package/dist/cjs/internal/theme.js +3 -3
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/checkbox.js +4 -4
  7. package/dist/es2019/internal/label.js +1 -0
  8. package/dist/es2019/internal/theme.js +3 -3
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/checkbox.js +4 -4
  11. package/dist/esm/internal/label.js +1 -0
  12. package/dist/esm/internal/theme.js +3 -3
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/internal/theme.d.ts +3 -3
  15. package/dist/types-ts4.5/internal/theme.d.ts +3 -3
  16. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 12.6.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9cc3b8d1902`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc3b8d1902) - chore(checkbox): use new feature flag for border contrast
8
+
9
+ ## 12.6.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
14
+
3
15
  ## 12.6.5
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/checkbox.js CHANGED
@@ -16,7 +16,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
16
  var _internal = require("./internal");
17
17
  var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
18
18
  /** @jsx jsx */
19
- /* eslint-disable @repo/internal/styles/no-nested-styles */
19
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
20
20
  var checkboxStyles = (0, _react2.css)({
21
21
  width: '100%',
22
22
  height: '100%',
@@ -43,7 +43,7 @@ var checkboxStyles = (0, _react2.css)({
43
43
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
44
44
  'rect:first-of-type': {
45
45
  stroke: 'var(--checkbox-border-color)',
46
- strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
46
+ strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
47
47
  transition: 'stroke 0.2s ease-in-out'
48
48
  }
49
49
  },
@@ -114,7 +114,7 @@ var checkboxStyles = (0, _react2.css)({
114
114
  }
115
115
  }
116
116
  });
117
- /* eslint-enable @repo/internal/styles/no-nested-styles */
117
+ /* eslint-enable @atlaskit/design-system/no-nested-styles */
118
118
 
119
119
  /**
120
120
  * __Checkbox__
@@ -161,7 +161,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
161
161
  analyticsData: analyticsContext,
162
162
  componentName: 'checkbox',
163
163
  packageName: "@atlaskit/checkbox",
164
- packageVersion: "12.6.5"
164
+ packageVersion: "12.6.7"
165
165
  });
166
166
  var internalRef = (0, _react.useRef)(null);
167
167
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
package/dist/cjs/internal/label.js CHANGED
@@ -100,6 +100,7 @@ function Label(_ref) {
100
100
  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
101
101
  mode = _useGlobalTheme.mode;
102
102
  return (
103
+ // TODO: Labels should not have click handlers (DSP-11750)
103
104
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
104
105
  (0, _react.jsx)("label", {
105
106
  css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
package/dist/cjs/internal/theme.js CHANGED
@@ -9,8 +9,8 @@ var _colors = require("@atlaskit/theme/colors");
9
9
  var theme = {
10
10
  light: {
11
11
  borderColor: {
12
- rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
13
- hovered: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
12
+ rest: (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, ")"),
13
+ hovered: (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, ")"),
14
14
  disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
15
15
  checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
16
16
  active: "var(--ds-border, ".concat(_colors.B50, ")"),
@@ -35,7 +35,7 @@ var theme = {
35
35
  },
36
36
  dark: {
37
37
  borderColor: {
38
- rest: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN80, ")"),
38
+ rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "var(--ds-border-input, ".concat(_colors.DN80, ")"),
39
39
  hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
40
40
  disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
41
41
  checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.6.5",
3
+ "version": "12.6.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/checkbox.js CHANGED
@@ -6,7 +6,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
6
6
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
7
7
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
8
  import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
9
- /* eslint-disable @repo/internal/styles/no-nested-styles */
9
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
10
10
  const checkboxStyles = css({
11
11
  width: '100%',
12
12
  height: '100%',
@@ -33,7 +33,7 @@ const checkboxStyles = css({
33
33
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
34
34
  'rect:first-of-type': {
35
35
  stroke: 'var(--checkbox-border-color)',
36
- strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
36
+ strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
37
37
  transition: 'stroke 0.2s ease-in-out'
38
38
  }
39
39
  },
@@ -104,7 +104,7 @@ const checkboxStyles = css({
104
104
  }
105
105
  }
106
106
  });
107
- /* eslint-enable @repo/internal/styles/no-nested-styles */
107
+ /* eslint-enable @atlaskit/design-system/no-nested-styles */
108
108
 
109
109
  /**
110
110
  * __Checkbox__
@@ -145,7 +145,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
145
145
  analyticsData: analyticsContext,
146
146
  componentName: 'checkbox',
147
147
  packageName: "@atlaskit/checkbox",
148
- packageVersion: "12.6.5"
148
+ packageVersion: "12.6.7"
149
149
  });
150
150
  const internalRef = useRef(null);
151
151
  const mergedRefs = mergeRefs([internalRef, ref]);
package/dist/es2019/internal/label.js CHANGED
@@ -94,6 +94,7 @@ export default function Label({
94
94
  mode
95
95
  } = useGlobalTheme();
96
96
  return (
97
+ // TODO: Labels should not have click handlers (DSP-11750)
97
98
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
98
99
  jsx("label", {
99
100
  css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
package/dist/es2019/internal/theme.js CHANGED
@@ -3,8 +3,8 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
3
3
  const theme = {
4
4
  light: {
5
5
  borderColor: {
6
- rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
7
- hovered: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
6
+ rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
7
+ hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
8
8
  disabled: `var(--ds-background-disabled, ${N20})`,
9
9
  checked: `var(--ds-background-selected-bold, ${B400})`,
10
10
  active: `var(--ds-border, ${B50})`,
@@ -29,7 +29,7 @@ const theme = {
29
29
  },
30
30
  dark: {
31
31
  borderColor: {
32
- rest: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN80})`,
32
+ rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : `var(--ds-border-input, ${DN80})`,
33
33
  hovered: `var(--ds-border-input, ${DN200})`,
34
34
  disabled: `var(--ds-background-disabled, ${DN10})`,
35
35
  checked: `var(--ds-background-selected-bold, ${B400})`,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.6.5",
3
+ "version": "12.6.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/checkbox.js CHANGED
@@ -9,7 +9,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
9
9
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
10
10
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
11
11
  import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
12
- /* eslint-disable @repo/internal/styles/no-nested-styles */
12
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
13
13
  var checkboxStyles = css({
14
14
  width: '100%',
15
15
  height: '100%',
@@ -36,7 +36,7 @@ var checkboxStyles = css({
36
36
  transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
37
37
  'rect:first-of-type': {
38
38
  stroke: 'var(--checkbox-border-color)',
39
- strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
39
+ strokeWidth: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 2,
40
40
  transition: 'stroke 0.2s ease-in-out'
41
41
  }
42
42
  },
@@ -107,7 +107,7 @@ var checkboxStyles = css({
107
107
  }
108
108
  }
109
109
  });
110
- /* eslint-enable @repo/internal/styles/no-nested-styles */
110
+ /* eslint-enable @atlaskit/design-system/no-nested-styles */
111
111
 
112
112
  /**
113
113
  * __Checkbox__
@@ -154,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
154
154
  analyticsData: analyticsContext,
155
155
  componentName: 'checkbox',
156
156
  packageName: "@atlaskit/checkbox",
157
- packageVersion: "12.6.5"
157
+ packageVersion: "12.6.7"
158
158
  });
159
159
  var internalRef = useRef(null);
160
160
  var mergedRefs = mergeRefs([internalRef, ref]);
package/dist/esm/internal/label.js CHANGED
@@ -92,6 +92,7 @@ export default function Label(_ref) {
92
92
  var _useGlobalTheme = useGlobalTheme(),
93
93
  mode = _useGlobalTheme.mode;
94
94
  return (
95
+ // TODO: Labels should not have click handlers (DSP-11750)
95
96
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
96
97
  jsx("label", {
97
98
  css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
package/dist/esm/internal/theme.js CHANGED
@@ -3,8 +3,8 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N
3
3
  var theme = {
4
4
  light: {
5
5
  borderColor: {
6
- rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
7
- hovered: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
6
+ rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
7
+ hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
8
8
  disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
9
9
  checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
10
10
  active: "var(--ds-border, ".concat(B50, ")"),
@@ -29,7 +29,7 @@ var theme = {
29
29
  },
30
30
  dark: {
31
31
  borderColor: {
32
- rest: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN80, ")"),
32
+ rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, ".concat(DN80, ")"),
33
33
  hovered: "var(--ds-border-input, ".concat(DN200, ")"),
34
34
  disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
35
35
  checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.6.5",
3
+ "version": "12.6.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/internal/theme.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  declare const theme: {
2
2
  light: {
3
3
  borderColor: {
4
- rest: "var(--ds-border-input)";
5
- hovered: "var(--ds-border-input)";
4
+ rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
5
+ hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
6
6
  disabled: "var(--ds-background-disabled)";
7
7
  checked: "var(--ds-background-selected-bold)";
8
8
  active: "var(--ds-border)";
@@ -27,7 +27,7 @@ declare const theme: {
27
27
  };
28
28
  dark: {
29
29
  borderColor: {
30
- rest: "var(--ds-border-input)";
30
+ rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
31
31
  hovered: "var(--ds-border-input)";
32
32
  disabled: "var(--ds-background-disabled)";
33
33
  checked: "var(--ds-background-selected-bold)";
package/dist/types-ts4.5/internal/theme.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  declare const theme: {
2
2
  light: {
3
3
  borderColor: {
4
- rest: "var(--ds-border-input)";
5
- hovered: "var(--ds-border-input)";
4
+ rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
5
+ hovered: "var(--ds-border-bold)" | "var(--ds-border-input)";
6
6
  disabled: "var(--ds-background-disabled)";
7
7
  checked: "var(--ds-background-selected-bold)";
8
8
  active: "var(--ds-border)";
@@ -27,7 +27,7 @@ declare const theme: {
27
27
  };
28
28
  dark: {
29
29
  borderColor: {
30
- rest: "var(--ds-border-input)";
30
+ rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
31
31
  hovered: "var(--ds-border-input)";
32
32
  disabled: "var(--ds-background-disabled)";
33
33
  checked: "var(--ds-background-selected-bold)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.6.5",
3
+ "version": "12.6.7",
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/"
@@ -23,7 +23,7 @@
23
23
  "sideEffects": false,
24
24
  "atlaskit:src": "src/index.tsx",
25
25
  "atlassian": {
26
- "team": "Design System Team",
26
+ "team": "Design System Maker Experience",
27
27
  "releaseModel": "continuous",
28
28
  "website": {
29
29
  "name": "Checkbox",
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/icon": "^21.12.0",
40
40
  "@atlaskit/platform-feature-flags": "^0.2.0",
41
41
  "@atlaskit/theme": "^12.5.0",
42
- "@atlaskit/tokens": "^1.11.0",
42
+ "@atlaskit/tokens": "^1.13.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },
@@ -47,13 +47,13 @@
47
47
  "react": "^16.8.0"
48
48
  },
49
49
  "devDependencies": {
50
+ "@af/accessibility-testing": "*",
50
51
  "@atlaskit/ssr": "*",
51
52
  "@atlaskit/visual-regression": "*",
52
53
  "@atlaskit/webdriver-runner": "*",
53
54
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
54
55
  "@atlassian/feature-flags-test-utils": "*",
55
56
  "@testing-library/react": "^12.1.5",
56
- "jest-axe": "^4.0.0",
57
57
  "jscodeshift": "^0.13.0",
58
58
  "react-dom": "^16.8.0",
59
59
  "storybook-addon-performance": "^0.16.0",
@@ -86,10 +86,10 @@
86
86
  }
87
87
  },
88
88
  "platform-feature-flags": {
89
- "platform.design-system-team.border-checkbox_nyoiu": {
89
+ "platform.design-system-team.update-border-radio-checkbox_7askv": {
90
90
  "type": "boolean"
91
91
  }
92
92
  },
93
93
  "homepage": "https://atlassian.design/components/checkbox/",
94
94
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
95
- }
95
+ }