@metamask/design-system-react 0.6.0 → 0.6.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 +16 -1
- package/dist/components/ButtonIcon/ButtonIcon.cjs +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs +3 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +3 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +3 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs +3 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.mjs +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.mjs.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.6.1]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Updated `@metamask/utils` peer dependency from 11.8.1 to 11.9.0 ([#867](https://github.com/MetaMask/metamask-design-system/pull/867))
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- Updated `ButtonIcon` component icon sizes and border radius to match Figma design specifications ([#873](https://github.com/MetaMask/metamask-design-system/pull/873))
|
|
19
|
+
- `ButtonIcon.Sm` now uses 20px icon (previously 16px)
|
|
20
|
+
- `ButtonIcon.Md` now uses 24px icon (previously 20px)
|
|
21
|
+
- `ButtonIcon.Lg` now uses 32px icon (previously 24px)
|
|
22
|
+
- Non-floating border radius now uses 8px for improved visual consistency
|
|
23
|
+
|
|
10
24
|
## [0.6.0]
|
|
11
25
|
|
|
12
26
|
### Added
|
|
@@ -109,7 +123,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
109
123
|
- Full TypeScript support with type definitions and enums
|
|
110
124
|
- Tailwind CSS integration with design token support
|
|
111
125
|
|
|
112
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.6.
|
|
126
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.6.1...HEAD
|
|
127
|
+
[0.6.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.6.0...@metamask/design-system-react@0.6.1
|
|
113
128
|
[0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.5.0...@metamask/design-system-react@0.6.0
|
|
114
129
|
[0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.4.1...@metamask/design-system-react@0.5.0
|
|
115
130
|
[0.4.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.4.0...@metamask/design-system-react@0.4.1
|
|
@@ -44,7 +44,7 @@ exports.ButtonIcon = (0, react_1.forwardRef)(({ className, iconName, iconProps,
|
|
|
44
44
|
],
|
|
45
45
|
// Non-floating styles
|
|
46
46
|
!isFloating && [
|
|
47
|
-
'rounded bg-transparent',
|
|
47
|
+
'rounded-lg bg-transparent',
|
|
48
48
|
// Only apply hover/active styles when interactive
|
|
49
49
|
isInteractive && 'hover:bg-hover active:bg-pressed',
|
|
50
50
|
!isInverse && 'text-icon-default',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,2BAA2B;QAC3B,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n (\n {\n className,\n iconName,\n iconProps,\n ariaLabel,\n isDisabled = false,\n isInverse = false,\n isFloating = false,\n size = ButtonIconSize.Md,\n style,\n ...props\n },\n ref,\n ) => {\n const isInteractive = !isDisabled;\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center p-0',\n // Size styles\n TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n // Floating styles\n isFloating && [\n 'rounded-full',\n !isInverse && 'bg-icon-default text-background-default',\n isInverse && 'bg-icon-default text-background-default',\n ],\n // Non-floating styles\n !isFloating && [\n 'rounded-lg bg-transparent',\n // Only apply hover/active styles when interactive\n isInteractive && 'hover:bg-hover active:bg-pressed',\n !isInverse && 'text-icon-default',\n isInverse && 'text-background-default',\n ],\n // Disabled state\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <button\n ref={ref}\n className={mergedClassName}\n disabled={isDisabled}\n aria-label={ariaLabel}\n style={style}\n {...props}\n >\n <Icon\n name={iconName}\n size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n className={twMerge('text-inherit', iconProps?.className)}\n {...iconProps}\n />\n </button>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}
|
|
@@ -9,8 +9,8 @@ exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
|
9
9
|
[types_1.ButtonIconSize.Lg]: 'h-10 w-10',
|
|
10
10
|
};
|
|
11
11
|
exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
12
|
-
[types_1.ButtonIconSize.Sm]: Icon_1.IconSize.
|
|
13
|
-
[types_1.ButtonIconSize.Md]: Icon_1.IconSize.
|
|
14
|
-
[types_1.ButtonIconSize.Lg]: Icon_1.IconSize.
|
|
12
|
+
[types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Md,
|
|
13
|
+
[types_1.ButtonIconSize.Md]: Icon_1.IconSize.Lg,
|
|
14
|
+
[types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Xl,
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=ButtonIcon.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAmC;AAEtB,QAAA,oCAAoC,GAAG;IAClD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAmC;AAEtB,QAAA,oCAAoC,GAAG;IAClD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
|
|
@@ -5,8 +5,8 @@ export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
|
5
5
|
readonly lg: "h-10 w-10";
|
|
6
6
|
};
|
|
7
7
|
export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
|
|
8
|
-
readonly sm: IconSize.
|
|
9
|
-
readonly md: IconSize.
|
|
10
|
-
readonly lg: IconSize.
|
|
8
|
+
readonly sm: IconSize.Md;
|
|
9
|
+
readonly md: IconSize.Lg;
|
|
10
|
+
readonly lg: IconSize.Xl;
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=ButtonIcon.constants.d.cts.map
|
|
@@ -5,8 +5,8 @@ export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
|
5
5
|
readonly lg: "h-10 w-10";
|
|
6
6
|
};
|
|
7
7
|
export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
|
|
8
|
-
readonly sm: IconSize.
|
|
9
|
-
readonly md: IconSize.
|
|
10
|
-
readonly lg: IconSize.
|
|
8
|
+
readonly sm: IconSize.Md;
|
|
9
|
+
readonly md: IconSize.Lg;
|
|
10
|
+
readonly lg: IconSize.Xl;
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=ButtonIcon.constants.d.mts.map
|
|
@@ -6,8 +6,8 @@ export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
|
6
6
|
[ButtonIconSize.Lg]: 'h-10 w-10',
|
|
7
7
|
};
|
|
8
8
|
export const MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
9
|
-
[ButtonIconSize.Sm]: IconSize.
|
|
10
|
-
[ButtonIconSize.Md]: IconSize.
|
|
11
|
-
[ButtonIconSize.Lg]: IconSize.
|
|
9
|
+
[ButtonIconSize.Sm]: IconSize.Md,
|
|
10
|
+
[ButtonIconSize.Md]: IconSize.Lg,
|
|
11
|
+
[ButtonIconSize.Lg]: IconSize.Xl,
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=ButtonIcon.constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
|
|
@@ -25,7 +25,7 @@ export const ButtonIcon = forwardRef(({ className, iconName, iconProps, ariaLabe
|
|
|
25
25
|
],
|
|
26
26
|
// Non-floating styles
|
|
27
27
|
!isFloating && [
|
|
28
|
-
'rounded bg-transparent',
|
|
28
|
+
'rounded-lg bg-transparent',
|
|
29
29
|
// Only apply hover/active styles when interactive
|
|
30
30
|
isInteractive && 'hover:bg-hover active:bg-pressed',
|
|
31
31
|
!isInverse && 'text-icon-default',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,oCAAoC,EACpC,4BAA4B,EAC7B,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,oCAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,oCAAoC,EACpC,4BAA4B,EAC7B,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,oCAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,2BAA2B;QAC3B,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n (\n {\n className,\n iconName,\n iconProps,\n ariaLabel,\n isDisabled = false,\n isInverse = false,\n isFloating = false,\n size = ButtonIconSize.Md,\n style,\n ...props\n },\n ref,\n ) => {\n const isInteractive = !isDisabled;\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center p-0',\n // Size styles\n TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n // Floating styles\n isFloating && [\n 'rounded-full',\n !isInverse && 'bg-icon-default text-background-default',\n isInverse && 'bg-icon-default text-background-default',\n ],\n // Non-floating styles\n !isFloating && [\n 'rounded-lg bg-transparent',\n // Only apply hover/active styles when interactive\n isInteractive && 'hover:bg-hover active:bg-pressed',\n !isInverse && 'text-icon-default',\n isInverse && 'text-background-default',\n ],\n // Disabled state\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <button\n ref={ref}\n className={mergedClassName}\n disabled={isDisabled}\n aria-label={ariaLabel}\n style={style}\n {...props}\n >\n <Icon\n name={iconName}\n size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n className={twMerge('text-inherit', iconProps?.className)}\n {...iconProps}\n />\n </button>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@metamask/design-system-shared": "^0.1.
|
|
53
|
+
"@metamask/design-system-shared": "^0.1.2",
|
|
54
54
|
"@metamask/jazzicon": "^2.0.0",
|
|
55
55
|
"@radix-ui/react-slot": "^1.1.0",
|
|
56
56
|
"blo": "^2.0.0",
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
"@jest/globals": "^29.7.0",
|
|
62
62
|
"@metamask/auto-changelog": "^5.3.0",
|
|
63
63
|
"@metamask/design-system-tailwind-preset": "^0.6.1",
|
|
64
|
-
"@metamask/utils": "^11.
|
|
65
|
-
"@storybook/react": "^9.
|
|
64
|
+
"@metamask/utils": "^11.9.0",
|
|
65
|
+
"@storybook/react": "^9.1.17",
|
|
66
66
|
"@svgr/cli": "^8.1.0",
|
|
67
67
|
"@testing-library/jest-dom": "^6.6.3",
|
|
68
68
|
"@testing-library/react": "^16.0.1",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"peerDependencies": {
|
|
84
84
|
"@metamask/design-system-tailwind-preset": "^0.6.0",
|
|
85
85
|
"@metamask/design-tokens": "^8.1.0",
|
|
86
|
-
"@metamask/utils": "^11.
|
|
86
|
+
"@metamask/utils": "^11.9.0",
|
|
87
87
|
"react": "^17.0.0 || ^18.0.0",
|
|
88
88
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
89
89
|
},
|