@mirai/ui 2.1.9 → 2.1.11

package/build/primitives/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap

@@ -22,7 +22,7 @@ exports[`primitive:<Checkbox> prop:checked && disabled 1`] = `
   >
     <input
       checked=""
-      class="checked input"
+      class="input checked"
       disabled=""
       name="name"
       type="checkbox"
@@ -39,7 +39,7 @@ exports[`primitive:<Checkbox> prop:checked 1`] = `
   >
     <input
       checked=""
-      class="checked input"
+      class="input checked"
       name="name"
       type="checkbox"
       value=""
@@ -102,7 +102,7 @@ exports[`primitive:<Checkbox> prop:error 1`] = `
     class="checkbox"
   >
     <input
-      class="error input"
+      class="input error"
       name="name"
       type="checkbox"
       value=""

package/build/primitives/Radio/Radio.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
-var _excluded = ["checked", "disabled", "name", "value", "onChange"];
+var _excluded = ["checked", "disabled", "error", "name", "value", "onChange"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
@@ -17,6 +17,8 @@ var Radio = function Radio(_ref) {
   var _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     disabled = _ref.disabled,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? true : _ref$error,
     name = _ref.name,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
@@ -41,7 +43,7 @@ var Radio = function Radio(_ref) {
     value: value,
     onChange: handleChange,
     testId: others.testId,
-    className: _RadioModule["default"].input,
+    className: (_RadioModule["default"].input, error && !disabled && !checked && _RadioModule["default"].error),
     "aria-label": others['aria-label']
   }), /*#__PURE__*/_react["default"].createElement(_Primitive.Primitive, {
     className: _RadioModule["default"].checkmark
@@ -52,6 +54,7 @@ Radio.displayName = 'Primitive:Radio';
 Radio.propTypes = {
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
+  error: _propTypes["default"].bool,
   name: _propTypes["default"].string.isRequired,
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
   onChange: _propTypes["default"].func

package/build/primitives/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_Primitive","_RadioModule","_excluded","e","__esModule","_objectWithoutProperties","t","o","r","i","_objectWithoutPropertiesLoose","Object","getOwnPropertySymbols","s","length","includes","propertyIsEnumerable","call","n","hasOwnProperty","Radio","_ref","_ref$checked","checked","disabled","name","_ref$value","value","_ref$onChange","onChange","others","handleChange","event","createElement","Primitive","role","tag","className","styles","style","radio","type","testId","input","checkmark","exports","displayName","propTypes","PropTypes","bool","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Radio/Radio.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked = false, disabled, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    onChange(value, event);\n  };\n\n  return (\n    <Primitive role={others.role} tag=\"radio\" className={styles(style.radio, others.className)} style={others.style}>\n      <Primitive\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        tag=\"input\"\n        type=\"radio\"\n        value={value}\n        onChange={handleChange}\n        testId={others.testId}\n        className={style.input}\n        aria-label={others['aria-label']}\n      />\n      <Primitive className={style.checkmark} />\n    </Primitive>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Radio.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_Primitive","_RadioModule","_excluded","e","__esModule","_objectWithoutProperties","t","o","r","i","_objectWithoutPropertiesLoose","Object","getOwnPropertySymbols","s","length","includes","propertyIsEnumerable","call","n","hasOwnProperty","Radio","_ref","_ref$checked","checked","disabled","_ref$error","error","name","_ref$value","value","_ref$onChange","onChange","others","handleChange","event","createElement","Primitive","role","tag","className","styles","style","radio","type","testId","input","checkmark","exports","displayName","propTypes","PropTypes","bool","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Radio/Radio.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked = false, disabled, error = true, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    onChange(value, event);\n  };\n\n  return (\n    <Primitive role={others.role} tag=\"radio\" className={styles(style.radio, others.className)} style={others.style}>\n      <Primitive\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        tag=\"input\"\n        type=\"radio\"\n        value={value}\n        onChange={handleChange}\n        testId={others.testId}\n        className={(style.input, error && !disabled && !checked && style.error)}\n        aria-label={others['aria-label']}\n      />\n      <Primitive className={style.checkmark} />\n    </Primitive>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"mappings":"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","ignoreList":[]}

package/build/primitives/Radio/Radio.module.css

@@ -51,11 +51,11 @@
 
 .radio input:not(:disabled).error {
   border-color: var(--mirai-ui-error);
-  border-width: calc(var(--mirai-ui-border-width) * 2);
+  box-shadow: var(--mirai-ui-focus-shadow-error);
 }
 
-.radio input:not(:disabled):focus,
-.radio input:not(:disabled):hover {
+.radio input:not(:disabled):not(.error):focus,
+.radio input:not(:disabled):not(.error):hover {
   border-color: var(--mirai-ui-focus-color);
   box-shadow: var(--mirai-ui-focus-shadow);
 }

package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap

@@ -6,7 +6,7 @@ exports[`primitive:<Radio> inherit:className 1`] = `
     class="radio mirai"
   >
     <input
-      class="input"
+      class="error"
       name="name"
       type="radio"
       value=""
@@ -25,7 +25,6 @@ exports[`primitive:<Radio> prop:checked && disabled 1`] = `
   >
     <input
       checked=""
-      class="input"
       disabled=""
       name="name"
       type="radio"
@@ -45,7 +44,6 @@ exports[`primitive:<Radio> prop:checked 1`] = `
   >
     <input
       checked=""
-      class="input"
       name="name"
       type="radio"
       value=""
@@ -63,7 +61,6 @@ exports[`primitive:<Radio> prop:disabled 1`] = `
     class="radio"
   >
     <input
-      class="input"
       disabled=""
       name="name"
       type="radio"
@@ -82,7 +79,7 @@ exports[`primitive:<Radio> prop:value 1`] = `
     class="radio"
   >
     <input
-      class="input"
+      class="error"
       name="name"
       type="radio"
       value="value"
@@ -100,7 +97,7 @@ exports[`primitive:<Radio> render 1`] = `
     class="radio"
   >
     <input
-      class="input"
+      class="error"
       name="name"
       type="radio"
       value=""
@@ -118,7 +115,7 @@ exports[`primitive:<Radio> testId 1`] = `
     class="radio"
   >
     <input
-      class="input"
+      class="error"
       data-testid="mirai"
       name="name"
       type="radio"

package/build/primitives/Switch/Switch.module.css

@@ -36,6 +36,7 @@
 
 .switch .area.error {
   background-color: var(--mirai-ui-error);
+  box-shadow: var(--mirai-ui-focus-shadow-error);
 }
 
 .switch .toggle {

package/build/theme/default.theme.css

@@ -52,7 +52,7 @@
   --mirai-ui-warning-light: #a38a66;
   --mirai-ui-warning-dark: #3d2400;
 
-  --mirai-ui-success: #1e4620;
+  --mirai-ui-success: #0f7614;
   --mirai-ui-success-background: #edf7ed;
   --mirai-ui-success-border: #d5ecd5;
   --mirai-ui-success-light: #789079;
@@ -98,11 +98,13 @@
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.15);
 
   /* focus */
-  --mirai-ui-focus-color: var(--mirai-ui-accent-dark);
-  --mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
+  --mirai-ui-focus-color: var(--mirai-ui-content-dark);
+  --mirai-ui-focus-color-shadow: var(--mirai-ui-content-border);
   --mirai-ui-focus-width: var(--mirai-ui-space-XXS);
   --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-focus-color-shadow);
   --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
+  --mirai-ui-focus-shadow-warning: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-warning-border);
+  --mirai-ui-focus-shadow-success: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-success-border);
 
   /* locale */
   --mirai-ui-row-direction: row;
@@ -232,7 +234,6 @@
   /* InputText */
   --mirai-ui-input-text-border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
   --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-input-text-error: var(--mirai-ui-error);
   --mirai-ui-input-text-focus: var(--mirai-ui-content);
   --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
   --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",