@mirohq/design-system-icon-button 3.2.3 → 3.2.5

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 +42 -27
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +44 -29
  4. package/dist/module.js.map +1 -1
  5. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -6,10 +6,10 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
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');
10
9
  var designSystemUseId = require('@mirohq/design-system-use-id');
11
10
  var designSystemExperiments = require('@mirohq/design-system-experiments');
12
11
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
12
+ var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
13
13
  var designSystemStitches = require('@mirohq/design-system-stitches');
14
14
  var designSystemStyles = require('@mirohq/design-system-styles');
15
15
 
@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
 
20
20
  const activeSelector = "&:active, &[data-pressed]";
21
21
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
22
- const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
22
+ const iconSelector = "& svg, & img";
23
23
  const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
24
24
  justifyContent: "center",
25
25
  variants: {
@@ -111,7 +111,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
111
111
  medium: {
112
112
  height: designSystemBaseButton.sizes.medium,
113
113
  width: designSystemBaseButton.sizes.medium,
114
- [externalIconSelector]: {
114
+ [iconSelector]: {
115
115
  ...designSystemBaseIcon.styles.size.small,
116
116
  ...designSystemBaseIcon.styles.weight.thin
117
117
  }
@@ -119,7 +119,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
119
119
  large: {
120
120
  height: designSystemBaseButton.sizes.large,
121
121
  width: designSystemBaseButton.sizes.large,
122
- [externalIconSelector]: {
122
+ [iconSelector]: {
123
123
  ...designSystemBaseIcon.styles.size.medium,
124
124
  ...designSystemBaseIcon.styles.weight.normal
125
125
  }
@@ -127,7 +127,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
127
127
  "x-large": {
128
128
  height: designSystemBaseButton.sizes.xLarge,
129
129
  width: designSystemBaseButton.sizes.xLarge,
130
- [externalIconSelector]: {
130
+ [iconSelector]: {
131
131
  ...designSystemBaseIcon.styles.size.medium,
132
132
  ...designSystemBaseIcon.styles.weight.normal
133
133
  }
@@ -204,24 +204,49 @@ const IconButton = React__default["default"].forwardRef(
204
204
  variant = "ghost",
205
205
  size = "large",
206
206
  "aria-describedby": ariaDescribedBy,
207
+ asChild = false,
207
208
  ...restProps
208
209
  }, forwardRef) => {
209
210
  const [v1] = designSystemExperiments.useNewDesignLanguage();
210
- const isIcon = designSystemBaseIcon.isIconComponent(children);
211
- const iconComponentProps = {
212
- "data-icon-component": "",
213
- size: size === "medium" ? "small" : "medium",
214
- weight: size === "medium" ? "thin" : "normal"
215
- };
216
211
  const badgeId = designSystemUseId.useId();
217
- const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
218
- "aria-hidden": "true",
219
- ...isIcon && iconComponentProps
220
- });
221
212
  let badgeOffset = {};
222
213
  if (size === "medium") {
223
214
  badgeOffset = badgeContent !== void 0 && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
224
215
  }
216
+ let formattedChildren = children;
217
+ const isAsChildIsValid = asChild && React__default["default"].Children.count(children) === 1 && React__default["default"].isValidElement(children);
218
+ if (isAsChildIsValid) {
219
+ const firstLevelChild = React__default["default"].Children.only(children);
220
+ const { children: secondLevelChildren, ...childProps } = firstLevelChild.props;
221
+ formattedChildren = React__default["default"].cloneElement(firstLevelChild, {
222
+ ...childProps,
223
+ children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBadge ? /* @__PURE__ */ jsxRuntime.jsx(
224
+ designSystemBadge.Badge,
225
+ {
226
+ id: badgeId,
227
+ "aria-label": badgeAriaLabel,
228
+ ...badgeOffset,
229
+ show: showBadge,
230
+ content: badgeContent,
231
+ inverted: variant === "primary",
232
+ children: secondLevelChildren
233
+ }
234
+ ) : secondLevelChildren })
235
+ });
236
+ } else {
237
+ formattedChildren = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
238
+ designSystemBadge.Badge,
239
+ {
240
+ id: badgeId,
241
+ "aria-label": badgeAriaLabel,
242
+ ...badgeOffset,
243
+ show: showBadge,
244
+ content: badgeContent,
245
+ inverted: variant === "primary",
246
+ children
247
+ }
248
+ ) });
249
+ }
225
250
  return /* @__PURE__ */ jsxRuntime.jsx(
226
251
  StyledIconButton,
227
252
  {
@@ -229,23 +254,13 @@ const IconButton = React__default["default"].forwardRef(
229
254
  v1,
230
255
  variant,
231
256
  size,
257
+ asChild,
232
258
  ref: forwardRef,
233
259
  "aria-describedby": designSystemUtils.stringAttrValue(
234
260
  ariaDescribedBy,
235
261
  showBadge && badgeAriaLabel !== void 0 && badgeId
236
262
  ),
237
- children: /* @__PURE__ */ jsxRuntime.jsx(
238
- designSystemBadge.Badge,
239
- {
240
- id: badgeId,
241
- "aria-label": badgeAriaLabel,
242
- ...badgeOffset,
243
- show: showBadge,
244
- content: badgeContent,
245
- inverted: variant === "primary",
246
- children: formattedChildren
247
- }
248
- )
263
+ children: formattedChildren
249
264
  }
250
265
  );
251
266
  }
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 externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\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 [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [externalIconSelector]: {\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 {\n addPropsToChildren,\n stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\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 ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\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 badgeId = useId()\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 badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useNewDesignLanguage","isIconComponent","useId","addPropsToChildren","jsx","stringAttrValue","Badge"],"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 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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"}
package/dist/module.js CHANGED
@@ -1,17 +1,17 @@
1
- import { jsx } from 'react/jsx-runtime';
1
+ import { jsx, Fragment } from 'react/jsx-runtime';
2
2
  import React from 'react';
3
3
  import { Badge } from '@mirohq/design-system-badge';
4
- import { addPropsToChildren, stringAttrValue } from '@mirohq/design-system-utils';
5
- import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
4
+ import { stringAttrValue } from '@mirohq/design-system-utils';
6
5
  import { useId } from '@mirohq/design-system-use-id';
7
6
  import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
8
7
  import { BaseButton, sizes } from '@mirohq/design-system-base-button';
8
+ import { styles } from '@mirohq/design-system-base-icon';
9
9
  import { styled } from '@mirohq/design-system-stitches';
10
10
  import { focus } from '@mirohq/design-system-styles';
11
11
 
12
12
  const activeSelector = "&:active, &[data-pressed]";
13
13
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
14
- const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
14
+ const iconSelector = "& svg, & img";
15
15
  const StyledIconButton = styled(BaseButton, {
16
16
  justifyContent: "center",
17
17
  variants: {
@@ -103,7 +103,7 @@ const StyledIconButton = styled(BaseButton, {
103
103
  medium: {
104
104
  height: sizes.medium,
105
105
  width: sizes.medium,
106
- [externalIconSelector]: {
106
+ [iconSelector]: {
107
107
  ...styles.size.small,
108
108
  ...styles.weight.thin
109
109
  }
@@ -111,7 +111,7 @@ const StyledIconButton = styled(BaseButton, {
111
111
  large: {
112
112
  height: sizes.large,
113
113
  width: sizes.large,
114
- [externalIconSelector]: {
114
+ [iconSelector]: {
115
115
  ...styles.size.medium,
116
116
  ...styles.weight.normal
117
117
  }
@@ -119,7 +119,7 @@ const StyledIconButton = styled(BaseButton, {
119
119
  "x-large": {
120
120
  height: sizes.xLarge,
121
121
  width: sizes.xLarge,
122
- [externalIconSelector]: {
122
+ [iconSelector]: {
123
123
  ...styles.size.medium,
124
124
  ...styles.weight.normal
125
125
  }
@@ -196,24 +196,49 @@ const IconButton = React.forwardRef(
196
196
  variant = "ghost",
197
197
  size = "large",
198
198
  "aria-describedby": ariaDescribedBy,
199
+ asChild = false,
199
200
  ...restProps
200
201
  }, forwardRef) => {
201
202
  const [v1] = useNewDesignLanguage();
202
- const isIcon = isIconComponent(children);
203
- const iconComponentProps = {
204
- "data-icon-component": "",
205
- size: size === "medium" ? "small" : "medium",
206
- weight: size === "medium" ? "thin" : "normal"
207
- };
208
203
  const badgeId = useId();
209
- const formattedChildren = addPropsToChildren(children, () => true, {
210
- "aria-hidden": "true",
211
- ...isIcon && iconComponentProps
212
- });
213
204
  let badgeOffset = {};
214
205
  if (size === "medium") {
215
206
  badgeOffset = badgeContent !== void 0 && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
216
207
  }
208
+ let formattedChildren = children;
209
+ const isAsChildIsValid = asChild && React.Children.count(children) === 1 && React.isValidElement(children);
210
+ if (isAsChildIsValid) {
211
+ const firstLevelChild = React.Children.only(children);
212
+ const { children: secondLevelChildren, ...childProps } = firstLevelChild.props;
213
+ formattedChildren = React.cloneElement(firstLevelChild, {
214
+ ...childProps,
215
+ children: /* @__PURE__ */ jsx(Fragment, { children: showBadge ? /* @__PURE__ */ jsx(
216
+ Badge,
217
+ {
218
+ id: badgeId,
219
+ "aria-label": badgeAriaLabel,
220
+ ...badgeOffset,
221
+ show: showBadge,
222
+ content: badgeContent,
223
+ inverted: variant === "primary",
224
+ children: secondLevelChildren
225
+ }
226
+ ) : secondLevelChildren })
227
+ });
228
+ } else {
229
+ formattedChildren = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
230
+ Badge,
231
+ {
232
+ id: badgeId,
233
+ "aria-label": badgeAriaLabel,
234
+ ...badgeOffset,
235
+ show: showBadge,
236
+ content: badgeContent,
237
+ inverted: variant === "primary",
238
+ children
239
+ }
240
+ ) });
241
+ }
217
242
  return /* @__PURE__ */ jsx(
218
243
  StyledIconButton,
219
244
  {
@@ -221,23 +246,13 @@ const IconButton = React.forwardRef(
221
246
  v1,
222
247
  variant,
223
248
  size,
249
+ asChild,
224
250
  ref: forwardRef,
225
251
  "aria-describedby": stringAttrValue(
226
252
  ariaDescribedBy,
227
253
  showBadge && badgeAriaLabel !== void 0 && badgeId
228
254
  ),
229
- children: /* @__PURE__ */ jsx(
230
- Badge,
231
- {
232
- id: badgeId,
233
- "aria-label": badgeAriaLabel,
234
- ...badgeOffset,
235
- show: showBadge,
236
- content: badgeContent,
237
- inverted: variant === "primary",
238
- children: formattedChildren
239
- }
240
- )
255
+ children: formattedChildren
241
256
  }
242
257
  );
243
258
  }
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 externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\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 [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [externalIconSelector]: {\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 {\n addPropsToChildren,\n stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\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 ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\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 badgeId = useId()\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 badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {formattedChildren}\n </Badge>\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 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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-icon-button",
3
- "version": "3.2.3",
3
+ "version": "3.2.5",
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.4.6",
29
+ "@mirohq/design-system-badge": "^0.4.7",
30
+ "@mirohq/design-system-base-button": "^0.4.66",
30
31
  "@mirohq/design-system-base-icon": "^0.1.33",
31
- "@mirohq/design-system-stitches": "^2.6.28",
32
- "@mirohq/design-system-styles": "^1.2.28",
33
32
  "@mirohq/design-system-experiments": "^0.2.0",
33
+ "@mirohq/design-system-styles": "^1.2.29",
34
+ "@mirohq/design-system-stitches": "^2.6.29",
34
35
  "@mirohq/design-system-use-id": "^0.1.2",
35
- "@mirohq/design-system-base-button": "^0.4.65",
36
36
  "@mirohq/design-system-utils": "^0.15.4"
37
37
  },
38
38
  "scripts": {