@mirohq/design-system-icon-button 3.2.10 → 3.2.11

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.
Files changed (5) hide show
  1. package/dist/main.js +4 -27
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +4 -27
  4. package/dist/module.js.map +1 -1
  5. package/package.json +6 -6
package/dist/main.js CHANGED
@@ -22,14 +22,13 @@ const disabledSelector = '&[disabled], &[aria-disabled="true"]';
22
22
  const iconSelector = "& svg, & img";
23
23
  const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
24
24
  justifyContent: "center",
25
+ ...designSystemStyles.focus.css({
26
+ boxShadow: "$focus"
27
+ }),
25
28
  variants: {
26
29
  v1: {
27
30
  false: {},
28
- true: {
29
- ...designSystemStyles.focus.css({
30
- boxShadow: "$focus-v1"
31
- })
32
- }
31
+ true: {}
33
32
  },
34
33
  variant: {
35
34
  primary: {
@@ -61,10 +60,6 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
61
60
  backgroundColor: "$background-neutrals",
62
61
  color: "$icon-neutrals",
63
62
  border: "1px solid $border-neutrals",
64
- ...designSystemStyles.focus.css({
65
- boxShadow: "$focus-small-outline",
66
- borderColor: "$blue-400 !important"
67
- }),
68
63
  _hover: {
69
64
  backgroundColor: "$background-neutrals-subtle-hover",
70
65
  borderColor: "$border-neutrals-hover"
@@ -90,9 +85,6 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
90
85
  danger: {
91
86
  color: "$icon-neutrals",
92
87
  backgroundColor: "$transparent",
93
- ...designSystemStyles.focus.css({
94
- boxShadow: "$focus-small"
95
- }),
96
88
  _hover: {
97
89
  color: "$icon-danger-hover",
98
90
  backgroundColor: "$background-danger-subtle-hover"
@@ -135,22 +127,10 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
135
127
  }
136
128
  },
137
129
  compoundVariants: [
138
- {
139
- variant: "primary",
140
- v1: false,
141
- css: {
142
- ...designSystemStyles.focus.css({
143
- boxShadow: "$focus-small"
144
- })
145
- }
146
- },
147
130
  {
148
131
  variant: "secondary",
149
132
  v1: false,
150
133
  css: {
151
- ...designSystemStyles.focus.css({
152
- boxShadow: "$focus-small"
153
- }),
154
134
  [activeSelector]: {
155
135
  backgroundColor: "$background-neutrals-subtle-active"
156
136
  }
@@ -169,9 +149,6 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
169
149
  variant: "ghost",
170
150
  v1: false,
171
151
  css: {
172
- ...designSystemStyles.focus.css({
173
- boxShadow: "$focus-small"
174
- }),
175
152
  _hover: {
176
153
  backgroundColor: "$background-neutrals-subtle-hover"
177
154
  },
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 variants: {\n v1: {\n false: {},\n true: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n },\n },\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 },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\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 ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n },\n },\n {\n variant: 'secondary',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\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} & BaseButtonProps\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useNewDesignLanguage","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 v1: {\n false: {},\n true: {},\n },\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 },\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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\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 ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\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} & BaseButtonProps\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useNewDesignLanguage","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -14,14 +14,13 @@ const disabledSelector = '&[disabled], &[aria-disabled="true"]';
14
14
  const iconSelector = "& svg, & img";
15
15
  const StyledIconButton = styled(BaseButton, {
16
16
  justifyContent: "center",
17
+ ...focus.css({
18
+ boxShadow: "$focus"
19
+ }),
17
20
  variants: {
18
21
  v1: {
19
22
  false: {},
20
- true: {
21
- ...focus.css({
22
- boxShadow: "$focus-v1"
23
- })
24
- }
23
+ true: {}
25
24
  },
26
25
  variant: {
27
26
  primary: {
@@ -53,10 +52,6 @@ const StyledIconButton = styled(BaseButton, {
53
52
  backgroundColor: "$background-neutrals",
54
53
  color: "$icon-neutrals",
55
54
  border: "1px solid $border-neutrals",
56
- ...focus.css({
57
- boxShadow: "$focus-small-outline",
58
- borderColor: "$blue-400 !important"
59
- }),
60
55
  _hover: {
61
56
  backgroundColor: "$background-neutrals-subtle-hover",
62
57
  borderColor: "$border-neutrals-hover"
@@ -82,9 +77,6 @@ const StyledIconButton = styled(BaseButton, {
82
77
  danger: {
83
78
  color: "$icon-neutrals",
84
79
  backgroundColor: "$transparent",
85
- ...focus.css({
86
- boxShadow: "$focus-small"
87
- }),
88
80
  _hover: {
89
81
  color: "$icon-danger-hover",
90
82
  backgroundColor: "$background-danger-subtle-hover"
@@ -127,22 +119,10 @@ const StyledIconButton = styled(BaseButton, {
127
119
  }
128
120
  },
129
121
  compoundVariants: [
130
- {
131
- variant: "primary",
132
- v1: false,
133
- css: {
134
- ...focus.css({
135
- boxShadow: "$focus-small"
136
- })
137
- }
138
- },
139
122
  {
140
123
  variant: "secondary",
141
124
  v1: false,
142
125
  css: {
143
- ...focus.css({
144
- boxShadow: "$focus-small"
145
- }),
146
126
  [activeSelector]: {
147
127
  backgroundColor: "$background-neutrals-subtle-active"
148
128
  }
@@ -161,9 +141,6 @@ const StyledIconButton = styled(BaseButton, {
161
141
  variant: "ghost",
162
142
  v1: false,
163
143
  css: {
164
- ...focus.css({
165
- boxShadow: "$focus-small"
166
- }),
167
144
  _hover: {
168
145
  backgroundColor: "$background-neutrals-subtle-hover"
169
146
  },
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 variants: {\n v1: {\n false: {},\n true: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n },\n },\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 },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\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 ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n },\n },\n {\n variant: 'secondary',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\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} & BaseButtonProps\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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)\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 v1: {\n false: {},\n true: {},\n },\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 },\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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\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 ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\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} & BaseButtonProps\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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)\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": "3.2.10",
3
+ "version": "3.2.11",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,13 +26,13 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-badge": "^0.5.2",
30
- "@mirohq/design-system-base-button": "^0.5.2",
29
+ "@mirohq/design-system-badge": "^0.5.3",
30
+ "@mirohq/design-system-base-icon": "^0.1.33",
31
31
  "@mirohq/design-system-experiments": "^0.2.0",
32
+ "@mirohq/design-system-stitches": "^2.6.33",
33
+ "@mirohq/design-system-base-button": "^0.5.3",
34
+ "@mirohq/design-system-styles": "^1.2.33",
32
35
  "@mirohq/design-system-use-id": "^0.1.2",
33
- "@mirohq/design-system-styles": "^1.2.32",
34
- "@mirohq/design-system-stitches": "^2.6.32",
35
- "@mirohq/design-system-base-icon": "^0.1.33",
36
36
  "@mirohq/design-system-utils": "^0.15.6"
37
37
  },
38
38
  "scripts": {