@atlaskit/checkbox 12.4.1 → 12.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/checkbox
 
+## 12.4.2
+
+### Patch Changes
+
+- [`ed1b0fd2c2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed1b0fd2c2d) - [ux] Removes redundant whitespace from checkbox when no visual label is applied - eg when an aria-label or id is used instead.
+
 ## 12.4.1
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -29,7 +29,7 @@ var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIn
 var checkboxStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -174,7 +174,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.1"
+    packageVersion: "12.4.2"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -182,6 +182,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _react2.jsx)(_internal.Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {

package/dist/cjs/internal/label.js

@@ -20,13 +20,15 @@ var _theme = _interopRequireDefault(require("./theme"));
 /** @jsx jsx */
 var labelStyles = (0, _react.css)({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   cursor: 'default',
-  fontFamily: _constants.fontFamily
+  fontFamily: "var(--ds-font-family-sans, ".concat(_constants.fontFamily, ")")
+});
+var textLabelLayoutStyles = (0, _react.css)({
+  gap: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
+  gridTemplateColumns: 'min-content auto'
 });
 var disabledStyles = (0, _react.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
@@ -104,6 +106,7 @@ function Label(_ref) {
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick,
+      label = _ref.label,
       id = _ref.id;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
@@ -111,7 +114,7 @@ function Label(_ref) {
 
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     (0, _react.jsx)("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/cjs/internal/required-indicator.js

@@ -9,11 +9,9 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("./constants");
-
 /** @jsx jsx */
 var requiredIndicatorStyles = (0, _react.css)({
-  paddingLeft: _constants.gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.1",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/es2019/checkbox.js

@@ -11,7 +11,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 const checkboxStyles = css({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.1"
+    packageVersion: "12.4.2"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -156,6 +156,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
   }, jsx("input", _extends({}, rest, {

package/dist/es2019/internal/label.js

@@ -6,13 +6,15 @@ import { fontFamily } from './constants';
 import theme from './theme';
 const labelStyles = css({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: `var(--ds-text, ${N900})`,
   cursor: 'default',
-  fontFamily: fontFamily
+  fontFamily: `var(--ds-font-family-sans, ${fontFamily})`
+});
+const textLabelLayoutStyles = css({
+  gap: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
+  gridTemplateColumns: 'min-content auto'
 });
 const disabledStyles = css({
   color: `var(--ds-text-disabled, ${N80})`,
@@ -89,6 +91,7 @@ export default function Label({
   isDisabled,
   testId,
   onClick,
+  label,
   id
 }) {
   const {
@@ -96,7 +99,7 @@ export default function Label({
   } = useGlobalTheme();
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/es2019/internal/required-indicator.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from './constants';
 const requiredIndicatorStyles = css({
-  paddingLeft: gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: `var(--ds-text-danger, ${R500})`
 });
 export default function RequiredIndicator() {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.1",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/esm/checkbox.js

@@ -14,7 +14,7 @@ import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 var checkboxStyles = css({
   width: '100%',
   height: '100%',
-  margin: 0,
+  margin: "var(--ds-space-0, 0px)",
   appearance: 'none',
   border: 'none',
   gridArea: '1 / 1 / 2 / 2',
@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.4.1"
+    packageVersion: "12.4.2"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -167,6 +167,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, jsx("input", _extends({}, rest, {

package/dist/esm/internal/label.js

@@ -6,13 +6,15 @@ import { fontFamily } from './constants';
 import theme from './theme';
 var labelStyles = css({
   display: 'grid',
-  gap: '0 4px',
   gridAutoColumns: '1fr',
   gridAutoRows: 'min-content',
-  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(N900, ")"),
   cursor: 'default',
-  fontFamily: fontFamily
+  fontFamily: "var(--ds-font-family-sans, ".concat(fontFamily, ")")
+});
+var textLabelLayoutStyles = css({
+  gap: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
+  gridTemplateColumns: 'min-content auto'
 });
 var disabledStyles = css({
   color: "var(--ds-text-disabled, ".concat(N80, ")"),
@@ -89,6 +91,7 @@ export default function Label(_ref) {
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick,
+      label = _ref.label,
       id = _ref.id;
 
   var _useGlobalTheme = useGlobalTheme(),
@@ -96,7 +99,7 @@ export default function Label(_ref) {
 
   return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     jsx("label", {
-      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
       "data-testid": testId,
       "data-disabled": isDisabled || undefined,
       onClick: onClick,

package/dist/esm/internal/required-indicator.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from './constants';
 var requiredIndicatorStyles = css({
-  paddingLeft: gridSize * 0.25,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(R500, ")")
 });
 export default function RequiredIndicator() {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.4.1",
+	"version": "12.4.2",
 	"sideEffects": false
 }

package/dist/types/internal/label.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, onClick, id, }: LabelProps): jsx.JSX.Element;
+export default function Label({ children, isDisabled, testId, onClick, label, id, }: LabelProps): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.4.1",
+  "version": "12.4.2",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -70,6 +70,7 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
+      "design-tokens": "spacing",
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion",