@mirohq/design-system-icon-button 4.2.13 → 4.2.14
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/dist/main.js +20 -20
- package/dist/main.js.map +1 -1
- package/dist/module.js +20 -20
- package/dist/module.js.map +1 -1
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -21,31 +21,31 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
|
|
|
21
21
|
variants: {
|
|
22
22
|
variant: {
|
|
23
23
|
primary: {
|
|
24
|
-
backgroundColor: "$background-primary
|
|
25
|
-
color: "$icon-primary
|
|
24
|
+
backgroundColor: "$button-background-primary",
|
|
25
|
+
color: "$button-icon-on-primary",
|
|
26
26
|
_hover: {
|
|
27
|
-
backgroundColor: "$background-primary-
|
|
27
|
+
backgroundColor: "$button-background-primary-hover"
|
|
28
28
|
},
|
|
29
29
|
[activeSelector]: {
|
|
30
|
-
backgroundColor: "$background-primary-
|
|
30
|
+
backgroundColor: "$button-background-primary-pressed"
|
|
31
31
|
},
|
|
32
32
|
[disabledSelector]: {
|
|
33
|
-
backgroundColor: "$background-
|
|
34
|
-
color: "$icon-
|
|
33
|
+
backgroundColor: "$background-disabled",
|
|
34
|
+
color: "$icon-on-disabled"
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
secondary: {
|
|
38
|
-
backgroundColor: "$background-
|
|
39
|
-
color: "$icon-
|
|
38
|
+
backgroundColor: "$button-background-secondary",
|
|
39
|
+
color: "$button-icon-on-secondary",
|
|
40
40
|
_hover: {
|
|
41
|
-
backgroundColor: "$background-
|
|
41
|
+
backgroundColor: "$button-background-secondary-hover"
|
|
42
42
|
},
|
|
43
43
|
[disabledSelector]: {
|
|
44
|
-
backgroundColor: "$background-
|
|
45
|
-
color: "$icon-
|
|
44
|
+
backgroundColor: "$background-disabled",
|
|
45
|
+
color: "$icon-on-disabled"
|
|
46
46
|
},
|
|
47
47
|
[activeSelector]: {
|
|
48
|
-
backgroundColor: "$background-
|
|
48
|
+
backgroundColor: "$button-background-secondary-pressed"
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
outline: {
|
|
@@ -67,33 +67,33 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
|
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
69
|
ghost: {
|
|
70
|
-
color: "$icon-
|
|
70
|
+
color: "$icon-default",
|
|
71
71
|
backgroundColor: "transparent",
|
|
72
72
|
_hover: {
|
|
73
|
-
backgroundColor: "$background-
|
|
73
|
+
backgroundColor: "$button-background-ghost-hover"
|
|
74
74
|
},
|
|
75
75
|
[disabledSelector]: {
|
|
76
|
-
color: "$icon-
|
|
76
|
+
color: "$icon-on-disabled",
|
|
77
77
|
backgroundColor: "$transparent"
|
|
78
78
|
},
|
|
79
79
|
[activeSelector]: {
|
|
80
|
-
backgroundColor: "$background-
|
|
80
|
+
backgroundColor: "$button-background-ghost-pressed"
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
danger: {
|
|
84
|
-
color: "$icon-
|
|
84
|
+
color: "$icon-danger",
|
|
85
85
|
backgroundColor: "$transparent",
|
|
86
86
|
_hover: {
|
|
87
87
|
color: "$icon-danger-hover",
|
|
88
88
|
backgroundColor: "$background-danger-subtle-hover"
|
|
89
89
|
},
|
|
90
90
|
[activeSelector]: {
|
|
91
|
-
color: "$icon-danger-
|
|
91
|
+
color: "$icon-danger-active",
|
|
92
92
|
backgroundColor: "$background-danger-subtle-pressed"
|
|
93
93
|
},
|
|
94
94
|
[disabledSelector]: {
|
|
95
|
-
color: "$icon-
|
|
96
|
-
backgroundColor: "$background-
|
|
95
|
+
color: "$icon-on-disabled",
|
|
96
|
+
backgroundColor: "$background-disabled"
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
},
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n _hover: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\n// Omit used only to help the prop-docs generator to expose the omitted props\nexport type IconButtonProps = Omit<BaseButtonProps, 'aria-label'> & {\n /**\n * Icon button label used to provide a description.\n */\n 'aria-label': string\n\n /**\n * Change the Icon button style\n * @default 'ghost'\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size.\n * @default 'large'\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Wraps the Icon button with a badge.\n * @default false\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n\n /**\n * Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n) as React.ForwardRefExoticComponent<IconButtonProps>\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$button-background-primary',\n color: '$button-icon-on-primary',\n\n _hover: {\n backgroundColor: '$button-background-primary-hover',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-primary-pressed',\n },\n [disabledSelector]: {\n backgroundColor: '$background-disabled',\n color: '$icon-on-disabled',\n },\n },\n secondary: {\n backgroundColor: '$button-background-secondary',\n color: '$button-icon-on-secondary',\n\n _hover: {\n backgroundColor: '$button-background-secondary-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-disabled',\n color: '$icon-on-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-secondary-pressed',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-default',\n backgroundColor: 'transparent',\n\n _hover: {\n backgroundColor: '$button-background-ghost-hover',\n },\n [disabledSelector]: {\n color: '$icon-on-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-ghost-pressed',\n },\n },\n danger: {\n color: '$icon-danger',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-active',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-on-disabled',\n backgroundColor: '$background-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\n// Omit used only to help the prop-docs generator to expose the omitted props\nexport type IconButtonProps = Omit<BaseButtonProps, 'aria-label'> & {\n /**\n * Icon button label used to provide a description.\n */\n 'aria-label': string\n\n /**\n * Change the Icon button style\n * @default 'ghost'\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size.\n * @default 'large'\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Wraps the Icon button with a badge.\n * @default false\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n\n /**\n * Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n) as React.ForwardRefExoticComponent<IconButtonProps>\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -19,31 +19,31 @@ const StyledIconButton = styled(BaseButton, {
|
|
|
19
19
|
variants: {
|
|
20
20
|
variant: {
|
|
21
21
|
primary: {
|
|
22
|
-
backgroundColor: "$background-primary
|
|
23
|
-
color: "$icon-primary
|
|
22
|
+
backgroundColor: "$button-background-primary",
|
|
23
|
+
color: "$button-icon-on-primary",
|
|
24
24
|
_hover: {
|
|
25
|
-
backgroundColor: "$background-primary-
|
|
25
|
+
backgroundColor: "$button-background-primary-hover"
|
|
26
26
|
},
|
|
27
27
|
[activeSelector]: {
|
|
28
|
-
backgroundColor: "$background-primary-
|
|
28
|
+
backgroundColor: "$button-background-primary-pressed"
|
|
29
29
|
},
|
|
30
30
|
[disabledSelector]: {
|
|
31
|
-
backgroundColor: "$background-
|
|
32
|
-
color: "$icon-
|
|
31
|
+
backgroundColor: "$background-disabled",
|
|
32
|
+
color: "$icon-on-disabled"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
secondary: {
|
|
36
|
-
backgroundColor: "$background-
|
|
37
|
-
color: "$icon-
|
|
36
|
+
backgroundColor: "$button-background-secondary",
|
|
37
|
+
color: "$button-icon-on-secondary",
|
|
38
38
|
_hover: {
|
|
39
|
-
backgroundColor: "$background-
|
|
39
|
+
backgroundColor: "$button-background-secondary-hover"
|
|
40
40
|
},
|
|
41
41
|
[disabledSelector]: {
|
|
42
|
-
backgroundColor: "$background-
|
|
43
|
-
color: "$icon-
|
|
42
|
+
backgroundColor: "$background-disabled",
|
|
43
|
+
color: "$icon-on-disabled"
|
|
44
44
|
},
|
|
45
45
|
[activeSelector]: {
|
|
46
|
-
backgroundColor: "$background-
|
|
46
|
+
backgroundColor: "$button-background-secondary-pressed"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
outline: {
|
|
@@ -65,33 +65,33 @@ const StyledIconButton = styled(BaseButton, {
|
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
67
|
ghost: {
|
|
68
|
-
color: "$icon-
|
|
68
|
+
color: "$icon-default",
|
|
69
69
|
backgroundColor: "transparent",
|
|
70
70
|
_hover: {
|
|
71
|
-
backgroundColor: "$background-
|
|
71
|
+
backgroundColor: "$button-background-ghost-hover"
|
|
72
72
|
},
|
|
73
73
|
[disabledSelector]: {
|
|
74
|
-
color: "$icon-
|
|
74
|
+
color: "$icon-on-disabled",
|
|
75
75
|
backgroundColor: "$transparent"
|
|
76
76
|
},
|
|
77
77
|
[activeSelector]: {
|
|
78
|
-
backgroundColor: "$background-
|
|
78
|
+
backgroundColor: "$button-background-ghost-pressed"
|
|
79
79
|
}
|
|
80
80
|
},
|
|
81
81
|
danger: {
|
|
82
|
-
color: "$icon-
|
|
82
|
+
color: "$icon-danger",
|
|
83
83
|
backgroundColor: "$transparent",
|
|
84
84
|
_hover: {
|
|
85
85
|
color: "$icon-danger-hover",
|
|
86
86
|
backgroundColor: "$background-danger-subtle-hover"
|
|
87
87
|
},
|
|
88
88
|
[activeSelector]: {
|
|
89
|
-
color: "$icon-danger-
|
|
89
|
+
color: "$icon-danger-active",
|
|
90
90
|
backgroundColor: "$background-danger-subtle-pressed"
|
|
91
91
|
},
|
|
92
92
|
[disabledSelector]: {
|
|
93
|
-
color: "$icon-
|
|
94
|
-
backgroundColor: "$background-
|
|
93
|
+
color: "$icon-on-disabled",
|
|
94
|
+
backgroundColor: "$background-disabled"
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
},
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n _hover: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\n// Omit used only to help the prop-docs generator to expose the omitted props\nexport type IconButtonProps = Omit<BaseButtonProps, 'aria-label'> & {\n /**\n * Icon button label used to provide a description.\n */\n 'aria-label': string\n\n /**\n * Change the Icon button style\n * @default 'ghost'\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size.\n * @default 'large'\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Wraps the Icon button with a badge.\n * @default false\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n\n /**\n * Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n) as React.ForwardRefExoticComponent<IconButtonProps>\n"],"names":["baseIconStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$button-background-primary',\n color: '$button-icon-on-primary',\n\n _hover: {\n backgroundColor: '$button-background-primary-hover',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-primary-pressed',\n },\n [disabledSelector]: {\n backgroundColor: '$background-disabled',\n color: '$icon-on-disabled',\n },\n },\n secondary: {\n backgroundColor: '$button-background-secondary',\n color: '$button-icon-on-secondary',\n\n _hover: {\n backgroundColor: '$button-background-secondary-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-disabled',\n color: '$icon-on-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-secondary-pressed',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-default',\n backgroundColor: 'transparent',\n\n _hover: {\n backgroundColor: '$button-background-ghost-hover',\n },\n [disabledSelector]: {\n color: '$icon-on-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$button-background-ghost-pressed',\n },\n },\n danger: {\n color: '$icon-danger',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-active',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-on-disabled',\n backgroundColor: '$background-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\n// Omit used only to help the prop-docs generator to expose the omitted props\nexport type IconButtonProps = Omit<BaseButtonProps, 'aria-label'> & {\n /**\n * Icon button label used to provide a description.\n */\n 'aria-label': string\n\n /**\n * Change the Icon button style\n * @default 'ghost'\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size.\n * @default 'large'\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Wraps the Icon button with a badge.\n * @default false\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n\n /**\n * Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n) as React.ForwardRefExoticComponent<IconButtonProps>\n"],"names":["baseIconStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-icon-button",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.14",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@mirohq/design-system-badge": "^1.2.11",
|
|
30
30
|
"@mirohq/design-system-base-button": "^1.2.12",
|
|
31
31
|
"@mirohq/design-system-base-icon": "^1.2.1",
|
|
32
|
-
"@mirohq/design-system-stitches": "^3.3.9",
|
|
33
32
|
"@mirohq/design-system-styles": "^3.2.8",
|
|
33
|
+
"@mirohq/design-system-stitches": "^3.3.9",
|
|
34
34
|
"@mirohq/design-system-use-id": "^1.1.1",
|
|
35
35
|
"@mirohq/design-system-utils": "^1.3.0"
|
|
36
36
|
},
|