@metamask/design-system-react 0.35.0 → 0.35.1
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/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.35.1]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed Checkbox selected state to use monochromatic icon colors instead of primary blue ([#1426](https://github.com/MetaMask/metamask-design-system/pull/1426))
|
|
15
|
+
|
|
10
16
|
## [0.35.0]
|
|
11
17
|
|
|
12
18
|
### Changed
|
|
@@ -449,7 +455,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
449
455
|
- Full TypeScript support with type definitions and enums
|
|
450
456
|
- Tailwind CSS integration with design token support
|
|
451
457
|
|
|
452
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.
|
|
458
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.1...HEAD
|
|
459
|
+
[0.35.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.0...@metamask/design-system-react@0.35.1
|
|
453
460
|
[0.35.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.34.0...@metamask/design-system-react@0.35.0
|
|
454
461
|
[0.34.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.33.0...@metamask/design-system-react@0.34.0
|
|
455
462
|
[0.33.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.32.0...@metamask/design-system-react@0.33.0
|
|
@@ -50,11 +50,11 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
|
|
|
50
50
|
(0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
51
51
|
const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
52
52
|
const baseBg = isSelected
|
|
53
|
-
? 'bg-
|
|
53
|
+
? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'
|
|
54
54
|
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
55
55
|
let baseBorder = 'border-default';
|
|
56
56
|
if (isSelected) {
|
|
57
|
-
baseBorder = 'border-
|
|
57
|
+
baseBorder = 'border-icon-default';
|
|
58
58
|
}
|
|
59
59
|
else if (isInvalid) {
|
|
60
60
|
baseBorder = 'border-error-default';
|
|
@@ -65,7 +65,7 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
|
|
|
65
65
|
react_1.default.createElement("div", { className: "relative" },
|
|
66
66
|
react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
|
|
67
67
|
react_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
|
|
68
|
-
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.
|
|
68
|
+
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.IconInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
69
69
|
label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
|
|
70
70
|
react_1.default.createElement("span", null, label))) : null));
|
|
71
71
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAE/D,uDAA+C;AAC/C,4CAA8D;AAC9D,4CAA+B;AAIlB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const outerClassName = twMerge(\n 'inline-flex items-center',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n const checkboxClasses = twMerge(\n 'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n baseBg,\n baseBorder,\n checkboxContainerProps?.className,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none transition-opacity',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconProps?.className,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className=\"relative\">\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n {...inputProps}\n />\n <div className={checkboxClasses} {...checkboxContainerProps}>\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n className={iconClasses}\n />\n </div>\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
|
|
@@ -31,11 +31,11 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
|
|
|
31
31
|
useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
32
32
|
const outerClassName = twMerge('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
33
33
|
const baseBg = isSelected
|
|
34
|
-
? 'bg-
|
|
34
|
+
? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'
|
|
35
35
|
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
36
36
|
let baseBorder = 'border-default';
|
|
37
37
|
if (isSelected) {
|
|
38
|
-
baseBorder = 'border-
|
|
38
|
+
baseBorder = 'border-icon-default';
|
|
39
39
|
}
|
|
40
40
|
else if (isInvalid) {
|
|
41
41
|
baseBorder = 'border-error-default';
|
|
@@ -46,7 +46,7 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
|
|
|
46
46
|
React.createElement("div", { className: "relative" },
|
|
47
47
|
React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
|
|
48
48
|
React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
|
|
49
|
-
React.createElement(Icon, { name: IconName.Check, color: IconColor.
|
|
49
|
+
React.createElement(Icon, { name: IconName.Check, color: IconColor.IconInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
50
50
|
label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
|
|
51
51
|
React.createElement("span", null, label))) : null));
|
|
52
52
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;AACA,OAAO,QAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc;;AAE/D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,OAAO,CAC5B,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const outerClassName = twMerge(\n 'inline-flex items-center',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n const checkboxClasses = twMerge(\n 'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n baseBg,\n baseBorder,\n checkboxContainerProps?.className,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none transition-opacity',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconProps?.className,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className=\"relative\">\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n {...inputProps}\n />\n <div className={checkboxClasses} {...checkboxContainerProps}>\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n className={iconClasses}\n />\n </div>\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.1",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@floating-ui/react-dom": "^2.1.2",
|
|
51
|
-
"@metamask/design-system-shared": "^0.
|
|
51
|
+
"@metamask/design-system-shared": "^0.32.0",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|