@mirai/ui 1.0.38 → 1.0.40
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.
- package/build/components/InputText/InputText.js +1 -1
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +45 -18
- package/build/components/Modal/Modal.js +5 -2
- package/build/components/Modal/Modal.js.map +1 -1
- package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +6 -0
- package/build/primitives/Icon/Icon.module.css +1 -1
- package/build/theme/default.theme.css +4 -1
- package/package.json +1 -1
|
@@ -94,7 +94,7 @@ var InputText = function InputText(_ref) {
|
|
|
94
94
|
className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
|
|
95
95
|
style: others.style
|
|
96
96
|
}, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
97
|
-
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || has.value) && _InputTextModule.default.value)
|
|
97
|
+
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, icon && _InputTextModule.default.withIcon, (focus || error || has.value) && _InputTextModule.default.value)
|
|
98
98
|
}, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
99
99
|
row: true,
|
|
100
100
|
className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","left","input","iconLeft","pressable","displayName","propTypes","PropTypes","bool","string","multiLine","name","isRequired","func"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n type,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = () => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n value: others.value !== undefined && others.value?.length > 0,\n };\n const is = { password: type === 'password' };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n {label && (\n <Text\n className={styles(\n style.text,\n style.label,\n disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {icon && <Icon name={icon} className={[style.icon, style.left]} />}\n <Input\n {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, icon && style.iconLeft)}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {is.password && !disabled && (\n <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n </Pressable>\n )}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n {hint}\n </Text>\n )}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.string,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAWZ;EAAA;;EAAA,IAVJC,QAUI,QAVJA,QAUI;EAAA,IATJC,KASI,QATJA,KASI;EAAA,IARJC,IAQI,QARJA,IAQI;EAAA,IAPJC,IAOI,QAPJA,IAOI;EAAA,IANJC,KAMI,QANJA,KAMI;EAAA,IALJC,IAKI,QALJA,IAKI;EAAA,yBAJJC,QAII;EAAA,IAJJA,QAII,8BAJO,YAAM,CAAE,CAIf;EAAA,wBAHJC,OAGI;EAAA,IAHJA,OAGI,6BAHM,YAAM,CAAE,CAGd;EAAA,wBAFJC,OAEI;EAAA,IAFJA,OAEI,6BAFM,YAAM,CAAE,CAEd;EAAA,IADDC,MACC;;EACJ,gBAA0B,qBAAS,KAAT,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,iBAAgC,qBAAS,IAAT,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAQC,KAAR,EAAkB;IACrCV,QAAQ,CAACS,KAAD,EAAQC,KAAR,CAAR;EACD,CAFD;;EAIA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,KAAD,EAAW;IAC7BL,QAAQ,CAAC,IAAD,CAAR;IACAJ,OAAO,CAACS,KAAD,CAAP;EACD,CAHD;;EAKA,IAAME,WAAW,GAAG,SAAdA,WAAc,GAAM;IACxBP,QAAQ,CAAC,KAAD,CAAR;IACAH,OAAO,CAACQ,KAAD,CAAP;EACD,CAHD;;EAKA,IAAMG,GAAG,GAAG;IACVJ,KAAK,EAAEN,MAAM,CAACM,KAAP,KAAiBK,SAAjB,IAA8B,kBAAAX,MAAM,CAACM,KAAP,gEAAcM,MAAd,IAAuB;EADlD,CAAZ;EAGA,IAAMC,EAAE,GAAG;IAAEV,QAAQ,EAAEP,IAAI,KAAK;EAArB,CAAX;EAEA,oBACE,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOkB,yBAAMC,cAAb,EAA6Bf,MAAM,CAACgB,SAApC,CAAjB;IAAiE,KAAK,EAAEhB,MAAM,CAACc;EAA/E,GACGnB,KAAK,iBACJ,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTmB,yBAAMG,IADG,EAETH,yBAAMnB,KAFG,EAGTJ,QAAQ,IAAIuB,yBAAMvB,QAHT,EAITU,KAAK,IAAIa,yBAAMb,KAJN,EAKTT,KAAK,IAAIsB,yBAAMtB,KALN,
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","withIcon","inputBorder","left","input","iconLeft","pressable","displayName","propTypes","PropTypes","bool","string","multiLine","name","isRequired","func"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n type,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = () => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n value: others.value !== undefined && others.value?.length > 0,\n };\n const is = { password: type === 'password' };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n {label && (\n <Text\n className={styles(\n style.text,\n style.label,\n disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n icon && style.withIcon,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {icon && <Icon name={icon} className={[style.icon, style.left]} />}\n <Input\n {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, icon && style.iconLeft)}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {is.password && !disabled && (\n <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n </Pressable>\n )}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n {hint}\n </Text>\n )}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.string,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
|
|
3
|
+
--mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
|
|
4
|
+
--mirai-ui-input-text-error: var(--mirai-ui-error);
|
|
3
5
|
--mirai-ui-input-text-focus: var(--mirai-ui-accent);
|
|
6
|
+
--mirai-ui-input-text-icon: var(--mirai-ui-icon);
|
|
4
7
|
--mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
|
|
5
8
|
--mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
|
|
6
9
|
--mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
|
|
7
|
-
--mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
|
|
8
|
-
--mirai-ui-input-text-error: var(--mirai-ui-error);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.inputContainer {
|
|
@@ -31,9 +32,28 @@
|
|
|
31
32
|
border-color: var(--mirai-ui-input-text-focus);
|
|
32
33
|
}
|
|
33
34
|
|
|
35
|
+
.icon {
|
|
36
|
+
color: var(--mirai-ui-input-disabled);
|
|
37
|
+
line-height: var(--mirai-ui-input-text-icon);
|
|
38
|
+
height: var(--mirai-ui-input-text-icon);
|
|
39
|
+
width: var(--mirai-ui-input-text-icon);
|
|
40
|
+
font-size: var(--mirai-ui-input-text-icon);
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
position: absolute;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.icon.left {
|
|
46
|
+
left: var(--mirai-ui-input-text-padding-x);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.icon.right {
|
|
50
|
+
right: var(--mirai-ui-input-text-padding-x);
|
|
51
|
+
}
|
|
52
|
+
|
|
34
53
|
.input {
|
|
35
54
|
border-radius: var(--mirai-ui-input-text-radius);
|
|
36
55
|
padding: var(--mirai-ui-input-text-padding-y) var(--mirai-ui-input-text-padding-x);
|
|
56
|
+
min-height: var(--mirai-ui-input-min-height);
|
|
37
57
|
}
|
|
38
58
|
|
|
39
59
|
.input.iconLeft {
|
|
@@ -53,25 +73,11 @@
|
|
|
53
73
|
margin: calc(var(--mirai-ui-input-text-padding-x) / 4) var(--mirai-ui-input-text-padding-x);
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
.icon {
|
|
57
|
-
color: var(--mirai-ui-input-disabled);
|
|
58
|
-
pointer-events: none;
|
|
59
|
-
position: absolute;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
76
|
.pressable {
|
|
63
77
|
position: absolute;
|
|
64
78
|
right: var(--mirai-ui-input-text-padding-x);
|
|
65
79
|
}
|
|
66
80
|
|
|
67
|
-
.icon.left {
|
|
68
|
-
left: var(--mirai-ui-input-text-padding-x);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.icon.right {
|
|
72
|
-
right: var(--mirai-ui-input-text-padding-x);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
81
|
.label {
|
|
76
82
|
background-color: var(--mirai-ui-input-background);
|
|
77
83
|
font-size: var(--mirai-ui-input-font-size);
|
|
@@ -79,14 +85,35 @@
|
|
|
79
85
|
padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
80
86
|
pointer-events: none;
|
|
81
87
|
position: absolute;
|
|
82
|
-
top: calc(
|
|
83
|
-
|
|
88
|
+
top: calc(
|
|
89
|
+
calc(
|
|
90
|
+
var(--mirai-ui-input-min-height) - var(--mirai-ui-input-font-size) -
|
|
91
|
+
calc(var(--mirai-ui-input-text-padding-x) / 2)
|
|
92
|
+
) / 2
|
|
93
|
+
);
|
|
94
|
+
transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
|
|
95
|
+
font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
|
|
96
|
+
left var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
|
|
84
97
|
top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
|
|
85
98
|
z-index: 1;
|
|
86
99
|
}
|
|
87
100
|
|
|
101
|
+
.label.withIcon:not(.value) {
|
|
102
|
+
background-color: transparent;
|
|
103
|
+
/* left: calc(var(--mirai-ui-input-text-icon) + var(--mirai-ui-input-text-padding-x)); */
|
|
104
|
+
left: calc(var(--mirai-ui-input-text-icon) + calc(var(--mirai-ui-input-text-padding-x) / 2));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.label:not(.value) {
|
|
108
|
+
width: 50%;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.label.withIcon:not(.value) {
|
|
112
|
+
}
|
|
113
|
+
|
|
88
114
|
.label.value {
|
|
89
115
|
font-size: var(--mirai-ui-font-size-small);
|
|
116
|
+
left: 0;
|
|
90
117
|
top: calc(var(--mirai-ui-input-text-padding-y) * -1);
|
|
91
118
|
}
|
|
92
119
|
|
|
@@ -47,6 +47,7 @@ var Modal = function Modal(_ref) {
|
|
|
47
47
|
var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
|
|
48
48
|
return jsx;
|
|
49
49
|
} : _reactDom.default.createPortal;
|
|
50
|
+
var testId = others['data-testid'];
|
|
50
51
|
return renderer( /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
51
52
|
row: true,
|
|
52
53
|
className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
|
|
@@ -57,7 +58,8 @@ var Modal = function Modal(_ref) {
|
|
|
57
58
|
row: true,
|
|
58
59
|
className: _ModalModule.default.header
|
|
59
60
|
}, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
60
|
-
onPress: onBack
|
|
61
|
+
onPress: onBack,
|
|
62
|
+
"data-testid": testId ? "".concat(testId, "-button-back") : undefined
|
|
61
63
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
62
64
|
name: "Left",
|
|
63
65
|
className: _ModalModule.default.icon
|
|
@@ -65,7 +67,8 @@ var Modal = function Modal(_ref) {
|
|
|
65
67
|
headline: true,
|
|
66
68
|
className: (0, _helpers.styles)(_ModalModule.default.title, !onBack && _ModalModule.default.left, !onClose && _ModalModule.default.right)
|
|
67
69
|
}, title), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
68
|
-
onPress: onClose
|
|
70
|
+
onPress: onClose,
|
|
71
|
+
"data-testid": testId ? "".concat(testId, "-button-close") : undefined
|
|
69
72
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
70
73
|
name: isDesktop || title !== undefined ? 'Close' : 'CloseArrow',
|
|
71
74
|
className: _ModalModule.default.icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["Modal","children","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","style","container","modal","className","header","icon","left","right","
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["Modal","children","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","style","container","modal","className","header","undefined","icon","left","right","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, overflow = true, portal = false, title, visible, onBack, onClose, ...others }) => {\n const { isDesktop } = useDevice();\n\n const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n const { ['data-testid']: testId } = others;\n\n return renderer(\n <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n {(title || onBack || onClose) && (\n <View row className={style.header}>\n {onBack && (\n <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n <Icon name=\"Left\" className={style.icon} />\n </Pressable>\n )}\n {title && (\n <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n {title}\n </Text>\n )}\n {onClose && (\n <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n <Icon name={isDesktop || title !== undefined ? 'Close' : 'CloseArrow'} className={style.icon} />\n </Pressable>\n )}\n </View>\n )}\n {children}\n </View>\n </View>,\n document.body,\n );\n};\n\nModal.propTypes = {\n children: PropTypes.node,\n portal: PropTypes.bool,\n overflow: PropTypes.bool,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onBack: PropTypes.func,\n onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+F;EAAA,IAA5FC,QAA4F,QAA5FA,QAA4F;EAAA,yBAAlFC,QAAkF;EAAA,IAAlFA,QAAkF,8BAAvE,IAAuE;EAAA,uBAAjEC,MAAiE;EAAA,IAAjEA,MAAiE,4BAAxD,KAAwD;EAAA,IAAjDC,KAAiD,QAAjDA,KAAiD;EAAA,IAA1CC,OAA0C,QAA1CA,OAA0C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3G,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,IAAMC,QAAQ,GAAGC,oBAAW,CAACR,MAAZ,GAAqB,UAACS,GAAD;IAAA,OAASA,GAAT;EAAA,CAArB,GAAoCC,kBAASC,YAA9D;EAEA,IAAyBC,MAAzB,GAAoCP,MAApC,CAAS,aAAT;EAEA,OAAOE,QAAQ,eACb,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOM,qBAAMC,SAAb,EAAwBf,QAAQ,IAAIc,qBAAMd,QAA1C,EAAoDG,OAAO,IAAIW,qBAAMX,OAArE;EAArB,gBACE,6BAAC,gBAAD,eAAUG,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOQ,qBAAME,KAAb,EAAoBb,OAAO,IAAIW,qBAAMX,OAArC,EAA8CG,MAAM,CAACW,SAArD;EAAjC,IACG,CAACf,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAES,qBAAMI;EAA3B,GACGd,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA,MAApB;IAA4B,eAAaS,MAAM,aAAMA,MAAN,oBAA6BM;EAA5E,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,MAAX;IAAkB,SAAS,EAAEL,qBAAMM;EAAnC,EADF,CAFJ,EAMGlB,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOY,qBAAMZ,KAAb,EAAoB,CAACE,MAAD,IAAWU,qBAAMO,IAArC,EAA2C,CAAChB,OAAD,IAAYS,qBAAMQ,KAA7D;EAA1B,GACGpB,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA,OAApB;IAA6B,eAAaQ,MAAM,aAAMA,MAAN,qBAA8BM;EAA9E,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEZ,SAAS,IAAIL,KAAK,KAAKiB,SAAvB,GAAmC,OAAnC,GAA6C,YAAzD;IAAuE,SAAS,EAAEL,qBAAMM;EAAxF,EADF,CAZJ,CAFJ,EAoBGrB,QApBH,CADF,CADa,EAyBbwB,QAAQ,CAACC,IAzBI,CAAf;AA2BD,CAlCD;;;AAoCA1B,KAAK,CAAC2B,SAAN,GAAkB;EAChB1B,QAAQ,EAAE2B,mBAAUC,IADJ;EAEhB1B,MAAM,EAAEyB,mBAAUE,IAFF;EAGhB5B,QAAQ,EAAE0B,mBAAUE,IAHJ;EAIhB1B,KAAK,EAAEwB,mBAAUG,MAJD;EAKhB1B,OAAO,EAAEuB,mBAAUE,IALH;EAMhBxB,MAAM,EAAEsB,mBAAUI,IANF;EAOhBzB,OAAO,EAAEqB,mBAAUI;AAPH,CAAlB"}
|
|
@@ -7,12 +7,14 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
9
|
class="view fit modal visible"
|
|
10
|
+
data-testid="mirai-onClose"
|
|
10
11
|
>
|
|
11
12
|
<div
|
|
12
13
|
class="view row header"
|
|
13
14
|
>
|
|
14
15
|
<button
|
|
15
16
|
class="pressable"
|
|
17
|
+
data-testid="mirai-onClose-button-close"
|
|
16
18
|
>
|
|
17
19
|
<span
|
|
18
20
|
class="icon icon"
|
|
@@ -87,12 +89,14 @@ exports[`component:<Modal> prop:onBack 1`] = `
|
|
|
87
89
|
>
|
|
88
90
|
<div
|
|
89
91
|
class="view fit modal visible"
|
|
92
|
+
data-testid="mirai-onBack"
|
|
90
93
|
>
|
|
91
94
|
<div
|
|
92
95
|
class="view row header"
|
|
93
96
|
>
|
|
94
97
|
<button
|
|
95
98
|
class="pressable"
|
|
99
|
+
data-testid="mirai-onBack-button-back"
|
|
96
100
|
>
|
|
97
101
|
<span
|
|
98
102
|
class="icon icon"
|
|
@@ -133,12 +137,14 @@ exports[`component:<Modal> prop:onClose 1`] = `
|
|
|
133
137
|
>
|
|
134
138
|
<div
|
|
135
139
|
class="view fit modal visible"
|
|
140
|
+
data-testid="mirai-onClose"
|
|
136
141
|
>
|
|
137
142
|
<div
|
|
138
143
|
class="view row header"
|
|
139
144
|
>
|
|
140
145
|
<button
|
|
141
146
|
class="pressable"
|
|
147
|
+
data-testid="mirai-onClose-button-close"
|
|
142
148
|
>
|
|
143
149
|
<span
|
|
144
150
|
class="icon icon"
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
--mirai-ui-font-size-paragraph: 14px;
|
|
11
11
|
--mirai-ui-font-size-action: 14px;
|
|
12
12
|
--mirai-ui-font-size-small: 12px;
|
|
13
|
-
--mirai-ui-input-font-size: 14px;
|
|
14
13
|
--mirai-ui-line-height: 24px;
|
|
15
14
|
--mirai-ui-text-direction: ltr;
|
|
16
15
|
--mirai-ui-text-align: left;
|
|
@@ -68,6 +67,10 @@
|
|
|
68
67
|
--mirai-ui-motion-expand: 300ms;
|
|
69
68
|
--mirai-ui-motion-easing: cubic-bezier(0.1, 0.1, 0.25, 0.9);
|
|
70
69
|
|
|
70
|
+
/* input */
|
|
71
|
+
--mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
|
|
72
|
+
--mirai-ui-input-min-height: var(--mirai-ui-space-XL);
|
|
73
|
+
|
|
71
74
|
/* defaults */
|
|
72
75
|
--mirai-ui-border-radius: 4px;
|
|
73
76
|
--mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
|