@atlaskit/checkbox - npm Package Compare versions

Comparing version 5.0.11 to 5.0.12

CHANGELOG.md

 # @atlaskit/checkbox
 
+## 5.0.12
+- [patch] [b0153ee6c9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b0153ee6c9):
+
+  - Enabled the isRequired validation on checkbox and added the asterisk after the checkbox label to signify the required field
+
 ## 5.0.11
@@ -4,0 +9,0 @@ - Updated dependencies [d7ef59d432](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d7ef59d432):

dist/cjs/Checkbox.js

@@ -185,3 +185,4 @@ "use strict";
           onChange = _this$props.onChange,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange"]);
+          isRequired = _this$props.isRequired,
+          rest = (0, _objectWithoutProperties2.default)(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange", "isRequired"]);
       var isChecked = this.getProp('isChecked');
@@ -194,3 +195,3 @@ var _this$state = this.state,
         theme: emptyTheme
-      }, _react.default.createElement(_Checkbox.Label, (0, _extends2.default)({}, props, {
+      }, _react.default.createElement(_Checkbox.Label, {
         isDisabled: isDisabled,
@@ -201,3 +202,3 @@ onMouseDown: this.onMouseDown,
         onMouseUp: this.onMouseUp
-      }), _react.default.createElement(_Checkbox.CheckboxWrapper, null, _react.default.createElement(_Checkbox.HiddenCheckbox, {
+      }, _react.default.createElement(_Checkbox.CheckboxWrapper, null, _react.default.createElement(_Checkbox.HiddenCheckbox, (0, _extends2.default)({
         disabled: isDisabled,
@@ -216,4 +217,5 @@ checked: isChecked,
         } // eslint-disable-line
-
-      }), _react.default.createElement(_CheckboxIcon.default, {
+        ,
+        required: isRequired
+      }, rest)), _react.default.createElement(_CheckboxIcon.default, {
         isChecked: isChecked,
@@ -229,3 +231,5 @@ isDisabled: isDisabled,
         label: ""
-      })), _react.default.createElement(_Checkbox.LabelText, null, label)));
+      })), _react.default.createElement(_Checkbox.LabelText, null, label, isRequired && _react.default.createElement(_Checkbox.RequiredIndicator, {
+        "aria-hidden": "true"
+      }, "*"))));
     }
@@ -232,0 +236,0 @@ }]);

dist/cjs/styled/Checkbox.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.IconWrapper = exports.CheckboxWrapper = exports.LabelText = exports.Label = exports.HiddenCheckbox = void 0;
+exports.RequiredIndicator = exports.IconWrapper = exports.CheckboxWrapper = exports.LabelText = exports.Label = exports.HiddenCheckbox = void 0;
 
@@ -165,2 +165,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-exports.IconWrapper = IconWrapper;
+exports.IconWrapper = IconWrapper;
+
+var RequiredIndicator = _styledComponents.default.span.withConfig({
+  displayName: "Checkbox__RequiredIndicator",
+  componentId: "sc-1asqokg-5"
+})(["\n  color: ", ";\n  padding-left: ", "px;\n"], _theme.colors.R400, _theme.math.multiply(_theme.gridSize, 0.25));
+
+exports.RequiredIndicator = RequiredIndicator;

dist/esm/Checkbox.js

@@ -15,3 +15,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { name as packageName, version as packageVersion } from '../package.json';
-import { HiddenCheckbox, Label, LabelText, CheckboxWrapper } from './styled/Checkbox';
+import { HiddenCheckbox, Label, LabelText, CheckboxWrapper, RequiredIndicator } from './styled/Checkbox';
 var emptyTheme = {};
@@ -176,3 +176,4 @@
           onChange = _this$props.onChange,
-          props = _objectWithoutProperties(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange"]);
+          isRequired = _this$props.isRequired,
+          rest = _objectWithoutProperties(_this$props, ["isDisabled", "isInvalid", "isIndeterminate", "label", "name", "value", "onChange", "isRequired"]);
 
@@ -186,3 +187,3 @@ var isChecked = this.getProp('isChecked');
         theme: emptyTheme
-      }, React.createElement(Label, _extends({}, props, {
+      }, React.createElement(Label, {
         isDisabled: isDisabled,
@@ -193,3 +194,3 @@ onMouseDown: this.onMouseDown,
         onMouseUp: this.onMouseUp
-      }), React.createElement(CheckboxWrapper, null, React.createElement(HiddenCheckbox, {
+      }, React.createElement(CheckboxWrapper, null, React.createElement(HiddenCheckbox, _extends({
         disabled: isDisabled,
@@ -208,4 +209,5 @@ checked: isChecked,
         } // eslint-disable-line
-
-      }), React.createElement(CheckboxIcon, {
+        ,
+        required: isRequired
+      }, rest)), React.createElement(CheckboxIcon, {
         isChecked: isChecked,
@@ -221,3 +223,5 @@ isDisabled: isDisabled,
         label: ""
-      })), React.createElement(LabelText, null, label)));
+      })), React.createElement(LabelText, null, label, isRequired && React.createElement(RequiredIndicator, {
+        "aria-hidden": "true"
+      }, "*"))));
     }
@@ -224,0 +228,0 @@ }]);

dist/esm/styled/Checkbox.js

 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import styled, { css } from 'styled-components';
-import { colors, themed } from '@atlaskit/theme';
+import { colors, themed, math, gridSize } from '@atlaskit/theme';
 export var HiddenCheckbox = styled.input.withConfig({
@@ -140,2 +140,6 @@ displayName: "Checkbox__HiddenCheckbox",
   componentId: "sc-1asqokg-4"
-})(["\n  line-height: 0;\n  flex-shrink: 0;\n  color: ", ";\n  fill: ", ";\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ", ";\n  }\n"], getBoxColor, getTickColor, getBorderColor);
+})(["\n  line-height: 0;\n  flex-shrink: 0;\n  color: ", ";\n  fill: ", ";\n  transition: all 0.2s ease-in-out;\n\n  /* This is adding a property to the inner svg, to add a border to the checkbox */\n  & rect:first-child {\n    transition: stroke 0.2s ease-in-out;\n    ", ";\n  }\n"], getBoxColor, getTickColor, getBorderColor);
+export var RequiredIndicator = styled.span.withConfig({
+  displayName: "Checkbox__RequiredIndicator",
+  componentId: "sc-1asqokg-5"
+})(["\n  color: ", ";\n  padding-left: ", "px;\n"], colors.R400, math.multiply(gridSize, 0.25));

dist/package.json

 {
 	"name": "@atlaskit/checkbox",
-	"version": "5.0.11",
+	"version": "5.0.12",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/checkbox",
-  "version": "5.0.11",
+  "version": "5.0.12",
   "description": "Checkbox component for use in forms",
@@ -37,2 +37,3 @@ "license": "Apache-2.0",
     "@atlaskit/docs": "^6.0.1",
+    "@atlaskit/form": "^5.1.2",
     "@atlaskit/section-message": "^1.0.16",
@@ -48,2 +49,2 @@ "@atlaskit/visual-regression": "^0.0.1",
   ]
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

76158

increased by2.69%

Lines of code

862

increased by2.38%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes