@atlaskit/checkbox 12.3.0 → 12.3.4

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 +25 -0
  2. package/dist/cjs/checkbox.js +2 -2
  3. package/dist/cjs/internal/styles.js +0 -1
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/checkbox.js +2 -2
  6. package/dist/es2019/internal/styles.js +1 -2
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/checkbox.js +2 -2
  9. package/dist/esm/internal/styles.js +1 -2
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 12.3.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.3.3
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 12.3.2
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
21
+ ## 12.3.1
22
+
23
+ ### Patch Changes
24
+
25
+ - [`6e2231d4609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e2231d4609) - Checkbox no longer creates an empty `<span/>` element next to the input if no label is provided.
26
+ - Updated dependencies
27
+
3
28
  ## 12.3.0
4
29
 
5
30
  ### Minor Changes
package/dist/cjs/checkbox.js CHANGED
@@ -115,7 +115,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
115
115
  analyticsData: analyticsContext,
116
116
  componentName: 'checkbox',
117
117
  packageName: "@atlaskit/checkbox",
118
- packageVersion: "12.3.0"
118
+ packageVersion: "12.3.4"
119
119
  });
120
120
  var internalRef = (0, _react.useRef)(null);
121
121
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -158,7 +158,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
158
158
  size: size,
159
159
  isIndeterminate: isIndeterminate,
160
160
  isChecked: isChecked
161
- }), (0, _core.jsx)(_internal.LabelText, null, label, isRequired && (0, _core.jsx)(_internal.RequiredIndicator, {
161
+ }), label && (0, _core.jsx)(_internal.LabelText, null, label, isRequired && (0, _core.jsx)(_internal.RequiredIndicator, {
162
162
  "aria-hidden": "true"
163
163
  })));
164
164
  });
package/dist/cjs/internal/styles.js CHANGED
@@ -17,7 +17,6 @@ var _tokens = require("@atlaskit/tokens");
17
17
 
18
18
  var _templateObject, _templateObject2;
19
19
 
20
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
21
20
  var checkboxStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* Make the input invisible */\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n /* Necessary to hide correctly on mobile Safari */\n border: none;\n width: 0px;\n height: 0px;\n /* Necessary to hide focus ring on Firefox */\n outline: none;\n\n /*\n Change the variables --checkbox-background-color, --checkbox-border-color\n and --checkbox-tick-color according to user interactions.\n All other variables are constant.\n All styles from the input target the sibling svg.\n */\n & + svg {\n --checkbox-background-color: var(--local-background);\n --checkbox-border-color: var(--local-border);\n --checkbox-tick-color: var(--local-tick-rest);\n /* Color changes the background color */\n color: var(--checkbox-background-color);\n /* Fill changes the tick color */\n fill: var(--checkbox-tick-color);\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n flex-shrink: 0;\n /* If the label is multiple lines, don't center the checkbox */\n align-self: flex-start;\n }\n & + svg rect:first-of-type {\n /* Stroke changes the color of the border */\n stroke: var(--checkbox-border-color);\n stroke-width: 2px;\n transition: stroke 0.2s ease-in-out;\n }\n\n /* Styles are listed in order of increasing specificity */\n\n /*\n Compiled will order the pseudo classes by LVFHA\n As the background colour changes on hover, it is okay for the\n border focus colour to take precedence over hover.\n && is used to make the focus styles more specific than the hover\n styles\n */\n &&:focus + svg,\n &&:checked:focus + svg {\n --checkbox-border-color: var(--local-border-focus);\n }\n\n &:hover + svg {\n --checkbox-background-color: var(--local-background-hover);\n --checkbox-border-color: var(--local-border-hover);\n }\n &:checked:hover + svg {\n --checkbox-background-color: var(--local-background-checked-hover);\n --checkbox-border-color: var(--local-border-checked-hover);\n }\n\n &:checked + svg {\n --checkbox-background-color: var(--local-background-checked);\n --checkbox-border-color: var(--local-border-checked);\n --checkbox-tick-color: var(--local-tick-checked);\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-invalid);\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-checked-invalid);\n }\n\n &:active + svg {\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n &:checked:active + svg {\n --checkbox-tick-color: var(--local-tick-active);\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: var(--local-background-disabled);\n --checkbox-border-color: var(--local-border-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n &:disabled:checked + svg {\n --checkbox-tick-color: var(--local-tick-disabled);\n }\n\n @media screen and (forced-colors: active) {\n & + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:checked + svg,\n &:checked:hover + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:focus + svg rect:first-of-type {\n stroke: Highlight;\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: GrayText;\n --checkbox-tick-color: GrayText;\n }\n }\n"])));
22
21
  var checkboxThemeColors = {
23
22
  light: {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.0",
3
+ "version": "12.3.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/checkbox.js CHANGED
@@ -86,7 +86,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
86
86
  analyticsData: analyticsContext,
87
87
  componentName: 'checkbox',
88
88
  packageName: "@atlaskit/checkbox",
89
- packageVersion: "12.3.0"
89
+ packageVersion: "12.3.4"
90
90
  });
91
91
  const internalRef = useRef(null);
92
92
  const mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -127,7 +127,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
127
127
  size: size,
128
128
  isIndeterminate: isIndeterminate,
129
129
  isChecked: isChecked
130
- }), jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
130
+ }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
131
131
  "aria-hidden": "true"
132
132
  })));
133
133
  });
package/dist/es2019/internal/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { css } from '@emotion/core';
2
2
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
3
- import { token } from '@atlaskit/tokens'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
4
-
3
+ import { token } from '@atlaskit/tokens';
5
4
  const checkboxStyles = css`
6
5
  /* Make the input invisible */
7
6
  -webkit-appearance: none;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.0",
3
+ "version": "12.3.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/checkbox.js CHANGED
@@ -97,7 +97,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
97
97
  analyticsData: analyticsContext,
98
98
  componentName: 'checkbox',
99
99
  packageName: "@atlaskit/checkbox",
100
- packageVersion: "12.3.0"
100
+ packageVersion: "12.3.4"
101
101
  });
102
102
  var internalRef = useRef(null);
103
103
  var mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -140,7 +140,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
140
140
  size: size,
141
141
  isIndeterminate: isIndeterminate,
142
142
  isChecked: isChecked
143
- }), jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
143
+ }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
144
144
  "aria-hidden": "true"
145
145
  })));
146
146
  });
package/dist/esm/internal/styles.js CHANGED
@@ -4,8 +4,7 @@ var _templateObject, _templateObject2;
4
4
 
5
5
  import { css } from '@emotion/core';
6
6
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
7
- import { token } from '@atlaskit/tokens'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
8
-
7
+ import { token } from '@atlaskit/tokens';
9
8
  var checkboxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* Make the input invisible */\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n /* Necessary to hide correctly on mobile Safari */\n border: none;\n width: 0px;\n height: 0px;\n /* Necessary to hide focus ring on Firefox */\n outline: none;\n\n /*\n Change the variables --checkbox-background-color, --checkbox-border-color\n and --checkbox-tick-color according to user interactions.\n All other variables are constant.\n All styles from the input target the sibling svg.\n */\n & + svg {\n --checkbox-background-color: var(--local-background);\n --checkbox-border-color: var(--local-border);\n --checkbox-tick-color: var(--local-tick-rest);\n /* Color changes the background color */\n color: var(--checkbox-background-color);\n /* Fill changes the tick color */\n fill: var(--checkbox-tick-color);\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n flex-shrink: 0;\n /* If the label is multiple lines, don't center the checkbox */\n align-self: flex-start;\n }\n & + svg rect:first-of-type {\n /* Stroke changes the color of the border */\n stroke: var(--checkbox-border-color);\n stroke-width: 2px;\n transition: stroke 0.2s ease-in-out;\n }\n\n /* Styles are listed in order of increasing specificity */\n\n /*\n Compiled will order the pseudo classes by LVFHA\n As the background colour changes on hover, it is okay for the\n border focus colour to take precedence over hover.\n && is used to make the focus styles more specific than the hover\n styles\n */\n &&:focus + svg,\n &&:checked:focus + svg {\n --checkbox-border-color: var(--local-border-focus);\n }\n\n &:hover + svg {\n --checkbox-background-color: var(--local-background-hover);\n --checkbox-border-color: var(--local-border-hover);\n }\n &:checked:hover + svg {\n --checkbox-background-color: var(--local-background-checked-hover);\n --checkbox-border-color: var(--local-border-checked-hover);\n }\n\n &:checked + svg {\n --checkbox-background-color: var(--local-background-checked);\n --checkbox-border-color: var(--local-border-checked);\n --checkbox-tick-color: var(--local-tick-checked);\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-invalid);\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-checked-invalid);\n }\n\n &:active + svg {\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n &:checked:active + svg {\n --checkbox-tick-color: var(--local-tick-active);\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: var(--local-background-disabled);\n --checkbox-border-color: var(--local-border-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n &:disabled:checked + svg {\n --checkbox-tick-color: var(--local-tick-disabled);\n }\n\n @media screen and (forced-colors: active) {\n & + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:checked + svg,\n &:checked:hover + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:focus + svg rect:first-of-type {\n stroke: Highlight;\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: GrayText;\n --checkbox-tick-color: GrayText;\n }\n }\n"])));
10
9
  var checkboxThemeColors = {
11
10
  light: {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.0",
3
+ "version": "12.3.4",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.0",
3
+ "version": "12.3.4",
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/"
@@ -28,9 +28,9 @@
28
28
  "dependencies": {
29
29
  "@atlaskit/analytics-next": "^8.2.0",
30
30
  "@atlaskit/ds-lib": "^1.3.0",
31
- "@atlaskit/icon": "^21.7.0",
32
- "@atlaskit/theme": "^11.4.0",
33
- "@atlaskit/tokens": "^0.1.0",
31
+ "@atlaskit/icon": "^21.9.0",
32
+ "@atlaskit/theme": "^12.0.0",
33
+ "@atlaskit/tokens": "^0.3.0",
34
34
  "@babel/runtime": "^7.0.0",
35
35
  "@emotion/core": "^10.0.9"
36
36
  },
@@ -41,10 +41,10 @@
41
41
  "@atlaskit/build-utils": "*",
42
42
  "@atlaskit/button": "^16.1.0",
43
43
  "@atlaskit/docs": "*",
44
- "@atlaskit/form": "^8.3.0",
44
+ "@atlaskit/form": "^8.4.0",
45
45
  "@atlaskit/section-message": "^6.1.0",
46
46
  "@atlaskit/ssr": "*",
47
- "@atlaskit/toggle": "^12.2.0",
47
+ "@atlaskit/toggle": "^12.3.0",
48
48
  "@atlaskit/visual-regression": "*",
49
49
  "@atlaskit/webdriver-runner": "*",
50
50
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",