@mirohq/design-system-icon-button 1.2.12-dropdown.0 → 1.2.12-dropdown.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.
Files changed (6) hide show
  1. package/dist/main.js +31 -4
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +31 -4
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +6 -6
  6. package/package.json +7 -7
package/dist/main.js CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var designSystemTooltip = require('@mirohq/design-system-tooltip');
7
7
  var designSystemBadge = require('@mirohq/design-system-badge');
8
8
  var designSystemUtils = require('@mirohq/design-system-utils');
9
+ var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
9
10
  var designSystemStitches = require('@mirohq/design-system-stitches');
10
11
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
11
12
 
@@ -15,7 +16,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
16
 
16
17
  const activeSelector = "&:active, &[data-pressed]";
17
18
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
19
+ const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
18
20
  const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
21
+ justifyContent: "center",
19
22
  variants: {
20
23
  variant: {
21
24
  "solid-prominent": {
@@ -96,17 +99,29 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
96
99
  medium: {
97
100
  height: designSystemBaseButton.sizes.medium,
98
101
  width: designSystemBaseButton.sizes.medium,
99
- paddingX: "$50"
102
+ paddingX: "$50",
103
+ [externalIconSelector]: {
104
+ ...designSystemBaseIcon.styles.size.small,
105
+ ...designSystemBaseIcon.styles.weight.thin
106
+ }
100
107
  },
101
108
  large: {
102
109
  height: designSystemBaseButton.sizes.large,
103
110
  width: designSystemBaseButton.sizes.large,
104
- paddingX: "$100"
111
+ paddingX: "$100",
112
+ [externalIconSelector]: {
113
+ ...designSystemBaseIcon.styles.size.medium,
114
+ ...designSystemBaseIcon.styles.weight.normal
115
+ }
105
116
  },
106
117
  "x-large": {
107
118
  height: designSystemBaseButton.sizes.xLarge,
108
119
  width: designSystemBaseButton.sizes.xLarge,
109
- paddingX: "$150"
120
+ paddingX: "$150",
121
+ [externalIconSelector]: {
122
+ ...designSystemBaseIcon.styles.size.medium,
123
+ ...designSystemBaseIcon.styles.weight.normal
124
+ }
110
125
  }
111
126
  }
112
127
  }
@@ -127,9 +142,20 @@ const IconButton = React__default["default"].forwardRef(
127
142
  "aria-label": ariaLabel,
128
143
  ...restProps
129
144
  }, forwardRef) => {
145
+ const isIcon = designSystemBaseIcon.isIconComponent(children);
146
+ const iconComponentProps = {
147
+ "data-icon-component": "",
148
+ size: size === "medium" ? "small" : "medium",
149
+ weight: size === "medium" ? "thin" : "normal"
150
+ };
130
151
  const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
131
- "aria-hidden": "true"
152
+ "aria-hidden": "true",
153
+ ...isIcon && iconComponentProps
132
154
  });
155
+ let badgeOffset = {};
156
+ if (size === "medium") {
157
+ badgeOffset = typeof badgeContent !== "undefined" && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
158
+ }
133
159
  return /* @__PURE__ */ React__default["default"].createElement(designSystemTooltip.Tooltip, {
134
160
  delayDuration: tooltipDelayDuration,
135
161
  skipDelayDuration: tooltipSkipDelayDuration
@@ -142,6 +168,7 @@ const IconButton = React__default["default"].forwardRef(
142
168
  ref: forwardRef,
143
169
  "aria-label": ariaLabel != null ? ariaLabel : label
144
170
  }, /* @__PURE__ */ React__default["default"].createElement(designSystemBadge.Badge, {
171
+ ...badgeOffset,
145
172
  show: showBadge,
146
173
  content: badgeContent,
147
174
  inverted: variant === "solid-prominent"
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 { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledIconButton = styled(BaseButton, {\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\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 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: 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 label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n })\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["styled","BaseButton","sizes","React","addPropsToChildren","Tooltip","Badge"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\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 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\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 type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: 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 label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n typeof badgeContent !== 'undefined' && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["styled","BaseButton","sizes","baseIconStyles","React","isIconComponent","addPropsToChildren","Tooltip","Badge"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -2,12 +2,15 @@ import React from 'react';
2
2
  import { Tooltip } from '@mirohq/design-system-tooltip';
3
3
  import { Badge } from '@mirohq/design-system-badge';
4
4
  import { addPropsToChildren } from '@mirohq/design-system-utils';
5
+ import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
5
6
  import { styled } from '@mirohq/design-system-stitches';
6
7
  import { BaseButton, sizes } from '@mirohq/design-system-base-button';
7
8
 
8
9
  const activeSelector = "&:active, &[data-pressed]";
9
10
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
11
+ const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
10
12
  const StyledIconButton = styled(BaseButton, {
13
+ justifyContent: "center",
11
14
  variants: {
12
15
  variant: {
13
16
  "solid-prominent": {
@@ -88,17 +91,29 @@ const StyledIconButton = styled(BaseButton, {
88
91
  medium: {
89
92
  height: sizes.medium,
90
93
  width: sizes.medium,
91
- paddingX: "$50"
94
+ paddingX: "$50",
95
+ [externalIconSelector]: {
96
+ ...styles.size.small,
97
+ ...styles.weight.thin
98
+ }
92
99
  },
93
100
  large: {
94
101
  height: sizes.large,
95
102
  width: sizes.large,
96
- paddingX: "$100"
103
+ paddingX: "$100",
104
+ [externalIconSelector]: {
105
+ ...styles.size.medium,
106
+ ...styles.weight.normal
107
+ }
97
108
  },
98
109
  "x-large": {
99
110
  height: sizes.xLarge,
100
111
  width: sizes.xLarge,
101
- paddingX: "$150"
112
+ paddingX: "$150",
113
+ [externalIconSelector]: {
114
+ ...styles.size.medium,
115
+ ...styles.weight.normal
116
+ }
102
117
  }
103
118
  }
104
119
  }
@@ -119,9 +134,20 @@ const IconButton = React.forwardRef(
119
134
  "aria-label": ariaLabel,
120
135
  ...restProps
121
136
  }, forwardRef) => {
137
+ const isIcon = isIconComponent(children);
138
+ const iconComponentProps = {
139
+ "data-icon-component": "",
140
+ size: size === "medium" ? "small" : "medium",
141
+ weight: size === "medium" ? "thin" : "normal"
142
+ };
122
143
  const formattedChildren = addPropsToChildren(children, () => true, {
123
- "aria-hidden": "true"
144
+ "aria-hidden": "true",
145
+ ...isIcon && iconComponentProps
124
146
  });
147
+ let badgeOffset = {};
148
+ if (size === "medium") {
149
+ badgeOffset = typeof badgeContent !== "undefined" && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
150
+ }
125
151
  return /* @__PURE__ */ React.createElement(Tooltip, {
126
152
  delayDuration: tooltipDelayDuration,
127
153
  skipDelayDuration: tooltipSkipDelayDuration
@@ -134,6 +160,7 @@ const IconButton = React.forwardRef(
134
160
  ref: forwardRef,
135
161
  "aria-label": ariaLabel != null ? ariaLabel : label
136
162
  }, /* @__PURE__ */ React.createElement(Badge, {
163
+ ...badgeOffset,
137
164
  show: showBadge,
138
165
  content: badgeContent,
139
166
  inverted: variant === "solid-prominent"
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 { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledIconButton = styled(BaseButton, {\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\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 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: 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 label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n })\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\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 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\n boxShadow: '$focus-small',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\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 type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: 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 label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n typeof badgeContent !== 'undefined' && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -206,28 +206,28 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Pick<Omit<{
206
206
  readonly 'icon-400': "32px";
207
207
  };
208
208
  space: {
209
- readonly none: 0;
209
+ readonly 0: 0;
210
210
  readonly 50: "4px";
211
211
  readonly 100: "8px";
212
212
  readonly 150: "12px";
213
213
  readonly 200: "16px";
214
214
  readonly 300: "24px";
215
215
  readonly 400: "32px";
216
- readonly 500: "64px";
216
+ readonly 500: "40px";
217
217
  readonly 600: "48px";
218
218
  readonly 800: "64px";
219
219
  readonly 1200: "96px";
220
220
  readonly 1600: "128px";
221
221
  };
222
222
  'space-gap': {
223
- readonly none: any;
223
+ readonly 0: any;
224
224
  readonly 50: any;
225
225
  readonly 100: any;
226
226
  readonly 200: any;
227
227
  readonly 300: any;
228
228
  };
229
229
  'space-inset': {
230
- readonly none: any;
230
+ readonly 0: any;
231
231
  readonly 50: any;
232
232
  readonly 100: any;
233
233
  readonly 150: any;
@@ -240,7 +240,7 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Pick<Omit<{
240
240
  readonly 1600: any;
241
241
  };
242
242
  'space-offset': {
243
- readonly none: any;
243
+ readonly 0: any;
244
244
  readonly 50: any;
245
245
  readonly 100: any;
246
246
  readonly 150: any;
@@ -251,7 +251,7 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Pick<Omit<{
251
251
  readonly 800: any;
252
252
  readonly 1200: any;
253
253
  readonly 1600: any;
254
- readonly 'stacking-none': any;
254
+ readonly 'stacking-0': any;
255
255
  readonly 'stacking-100': any;
256
256
  readonly 'stacking-200': any;
257
257
  readonly 'stacking-300': any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-icon-button",
3
- "version": "1.2.12-dropdown.0",
3
+ "version": "1.2.12-dropdown.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,14 +26,14 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-badge": "^0.3.8",
30
- "@mirohq/design-system-base-button": "^0.4.8-dropdown.0",
31
- "@mirohq/design-system-stitches": "^2.3.0",
32
- "@mirohq/design-system-tooltip": "^3.2.10"
29
+ "@mirohq/design-system-badge": "^0.3.10-dropdown.0",
30
+ "@mirohq/design-system-base-button": "^0.4.8-dropdown.1",
31
+ "@mirohq/design-system-stitches": "^2.3.2-dropdown.0",
32
+ "@mirohq/design-system-tooltip": "^3.2.12-dropdown.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@mirohq/design-system-flex": "^2.1.10",
36
- "@mirohq/design-system-icons": "^0.18.0"
35
+ "@mirohq/design-system-flex": "^2.1.12-dropdown.0",
36
+ "@mirohq/design-system-icons": "^0.23.1-dropdown.0"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "rollup -c ../../../rollup.config.js",