Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@atlaskit/radio
Advanced tools
@atlaskit/radio - npm Package Compare versions
Comparing version 5.0.4 to 5.1.0
| # @atlaskit/radio | ||
| ## 5.1.0 | ||
| ### Minor Changes | ||
| - [`7af2427f3a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7af2427f3a8) - [ux] Update form field examples for validation and add a new prop to RadioGroup component | ||
| ## 5.0.4 | ||
@@ -4,0 +10,0 @@ |
@@ -30,24 +30,6 @@ "use strict"; | ||
| function _templateObject2() { | ||
| var data = (0, _taggedTemplateLiteral2.default)(["\n padding: 2px 4px;\n "]); | ||
| var _templateObject, _templateObject2; | ||
| _templateObject2 = function _templateObject2() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| function _templateObject() { | ||
| var data = (0, _taggedTemplateLiteral2.default)(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "]); | ||
| _templateObject = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var packageName = "@atlaskit/radio"; | ||
| var packageVersion = "5.0.4"; | ||
| var packageVersion = "5.1.0"; | ||
| var fontFamily = (0, _constants.fontFamily)(); | ||
@@ -91,3 +73,3 @@ | ||
| "data-disabled": isDisabled ? 'true' : undefined, | ||
| css: (0, _core.css)(_templateObject(), fontFamily, mode === 'light' ? _colors.N900 : _colors.DN600, _colors.N80) | ||
| css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "])), fontFamily, mode === 'light' ? _colors.N900 : _colors.DN600, _colors.N80) | ||
| }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, { | ||
@@ -109,3 +91,3 @@ "aria-label": ariaLabel, | ||
| })), label ? (0, _core.jsx)("span", { | ||
| css: (0, _core.css)(_templateObject2()) | ||
| css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 2px 4px;\n "]))) | ||
| }, label) : null) | ||
@@ -112,0 +94,0 @@ ); |
| "use strict"; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -20,2 +20,6 @@ value: true | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| var noop = function noop() {}; | ||
@@ -33,2 +37,3 @@ | ||
| isRequired = props.isRequired, | ||
| isInvalid = props.isInvalid, | ||
| _props$onInvalid = props.onInvalid, | ||
@@ -67,2 +72,3 @@ onInvalid = _props$onInvalid === void 0 ? noop : _props$onInvalid, | ||
| onInvalid: onInvalid, | ||
| isInvalid: isChecked && isInvalid, | ||
| isChecked: isChecked, | ||
@@ -69,0 +75,0 @@ isRequired: isRequired, |
@@ -16,22 +16,4 @@ "use strict"; | ||
| function _templateObject2() { | ||
| var data = (0, _taggedTemplateLiteral2.default)(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "]); | ||
| var _templateObject, _templateObject2; | ||
| _templateObject2 = function _templateObject2() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| function _templateObject() { | ||
| var data = (0, _taggedTemplateLiteral2.default)(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"]); | ||
| _templateObject = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| var radioThemeColors = { | ||
@@ -69,7 +51,7 @@ light: { | ||
| }; | ||
| var radioStyles = (0, _core.css)(_templateObject()); | ||
| var radioStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"]))); | ||
| function getRadioStyles(mode) { | ||
| var radioColors = radioThemeColors[mode]; | ||
| return [(0, _core.css)(_templateObject2(), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, _colors.R300), radioStyles]; | ||
| return [(0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "])), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, _colors.R300), radioStyles]; | ||
| } |
| { | ||
| "name": "@atlaskit/radio", | ||
| "version": "5.0.4", | ||
| "version": "5.1.0", | ||
| "sideEffects": false | ||
| } |
@@ -12,3 +12,3 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| const packageName = "@atlaskit/radio"; | ||
| const packageVersion = "5.0.4"; | ||
| const packageVersion = "5.1.0"; | ||
| const fontFamily = getFontFamily(); | ||
@@ -15,0 +15,0 @@ |
@@ -16,2 +16,3 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| isRequired, | ||
| isInvalid, | ||
| onInvalid = noop, | ||
@@ -44,2 +45,3 @@ name, | ||
| onInvalid: onInvalid, | ||
| isInvalid: isChecked && isInvalid, | ||
| isChecked: isChecked, | ||
@@ -46,0 +48,0 @@ isRequired: isRequired, |
| { | ||
| "name": "@atlaskit/radio", | ||
| "version": "5.0.4", | ||
| "version": "5.1.0", | ||
| "sideEffects": false | ||
| } |
@@ -5,22 +5,4 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| function _templateObject2() { | ||
| var data = _taggedTemplateLiteral(["\n padding: 2px 4px;\n "]); | ||
| var _templateObject, _templateObject2; | ||
| _templateObject2 = function _templateObject2() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| function _templateObject() { | ||
| var data = _taggedTemplateLiteral(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "]); | ||
| _templateObject = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| /** @jsx jsx */ | ||
@@ -35,3 +17,3 @@ import { forwardRef, memo, useMemo } from 'react'; | ||
| var packageName = "@atlaskit/radio"; | ||
| var packageVersion = "5.0.4"; | ||
| var packageVersion = "5.1.0"; | ||
| var fontFamily = getFontFamily(); | ||
@@ -76,3 +58,3 @@ | ||
| "data-disabled": isDisabled ? 'true' : undefined, | ||
| css: css(_templateObject(), fontFamily, mode === 'light' ? N900 : DN600, N80) | ||
| css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "])), fontFamily, mode === 'light' ? N900 : DN600, N80) | ||
| }, jsx("input", _extends({}, rest, { | ||
@@ -94,3 +76,3 @@ "aria-label": ariaLabel, | ||
| })), label ? jsx("span", { | ||
| css: css(_templateObject2()) | ||
| css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 2px 4px;\n "]))) | ||
| }, label) : null) | ||
@@ -97,0 +79,0 @@ ); |
@@ -17,2 +17,3 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| isRequired = props.isRequired, | ||
| isInvalid = props.isInvalid, | ||
| _props$onInvalid = props.onInvalid, | ||
@@ -51,2 +52,3 @@ onInvalid = _props$onInvalid === void 0 ? noop : _props$onInvalid, | ||
| onInvalid: onInvalid, | ||
| isInvalid: isChecked && isInvalid, | ||
| isChecked: isChecked, | ||
@@ -53,0 +55,0 @@ isRequired: isRequired, |
| import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral"; | ||
| function _templateObject2() { | ||
| var data = _taggedTemplateLiteral(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "]); | ||
| var _templateObject, _templateObject2; | ||
| _templateObject2 = function _templateObject2() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| function _templateObject() { | ||
| var data = _taggedTemplateLiteral(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"]); | ||
| _templateObject = function _templateObject() { | ||
| return data; | ||
| }; | ||
| return data; | ||
| } | ||
| import { css } from '@emotion/core'; | ||
@@ -57,6 +39,6 @@ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors'; | ||
| }; | ||
| var radioStyles = css(_templateObject()); | ||
| var radioStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"]))); | ||
| export default function getRadioStyles(mode) { | ||
| var radioColors = radioThemeColors[mode]; | ||
| return [css(_templateObject2(), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, R300), radioStyles]; | ||
| return [css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "])), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, R300), radioStyles]; | ||
| } |
| { | ||
| "name": "@atlaskit/radio", | ||
| "version": "5.0.4", | ||
| "version": "5.1.0", | ||
| "sideEffects": false | ||
| } |
@@ -13,2 +13,4 @@ import React, { SyntheticEvent } from 'react'; | ||
| isRequired?: boolean; | ||
| /** Sets the invalid state of all `Radio` elements in the group */ | ||
| isInvalid?: boolean; | ||
| /** An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group. */ | ||
@@ -15,0 +17,0 @@ options: OptionsPropType; |
| { | ||
| "name": "@atlaskit/radio", | ||
| "version": "5.0.4", | ||
| "version": "5.1.0", | ||
| "description": "A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.", | ||
@@ -49,5 +49,6 @@ "publishConfig": { | ||
| "@atlaskit/webdriver-runner": "*", | ||
| "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0", | ||
| "@testing-library/react": "^8.0.1", | ||
| "react-dom": "^16.8.0", | ||
| "storybook-addon-performance": "0.13.0", | ||
| "storybook-addon-performance": "^0.15.1", | ||
| "typescript": "3.9.6" | ||
@@ -79,3 +80,4 @@ }, | ||
| }, | ||
| "homepage": "https://atlassian.design/components/radio/" | ||
| "homepage": "https://atlassian.design/components/radio/", | ||
| "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-13.15%
78079
- Dev dependency count
- increased by8.33%
13
- Number of package files
- decreased by-8.33%
33
- Lines of code
- decreased by-30.73%
931
No dependency changes