@mirohq/design-system-icon-button 2.1.1 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +15 -6
- package/package.json +6 -3
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 { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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, { useId } from 'react'\nimport type { ElementRef } from 'react'\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'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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 */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\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 /**\n * Badge label used to make Badge recognisable 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 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 let newAriaDescribedBy = ariaDescribedBy\n\n if (showBadge && badgeAriaLabel !== undefined) {\n if (newAriaDescribedBy === undefined) {\n newAriaDescribedBy = badgeId\n } else {\n newAriaDescribedBy = `${newAriaDescribedBy} ${badgeId}`\n }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={newAriaDescribedBy}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","useId","addPropsToChildren","jsx","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'\nimport { focus } from '@mirohq/design-system-styles'\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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, { useId } from 'react'\nimport type { ElementRef } from 'react'\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'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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 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 let newAriaDescribedBy = ariaDescribedBy\n\n if (showBadge && badgeAriaLabel !== undefined) {\n if (newAriaDescribedBy === undefined) {\n newAriaDescribedBy = badgeId\n } else {\n newAriaDescribedBy = `${newAriaDescribedBy} ${badgeId}`\n }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={newAriaDescribedBy}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","useId","addPropsToChildren","jsx","Badge"],"mappings":"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"}
|
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 { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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, { useId } from 'react'\nimport type { ElementRef } from 'react'\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'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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 */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\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 /**\n * Badge label used to make Badge recognisable 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 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 let newAriaDescribedBy = ariaDescribedBy\n\n if (showBadge && badgeAriaLabel !== undefined) {\n if (newAriaDescribedBy === undefined) {\n newAriaDescribedBy = badgeId\n } else {\n newAriaDescribedBy = `${newAriaDescribedBy} ${badgeId}`\n }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={newAriaDescribedBy}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\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 { 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'\nimport { focus } from '@mirohq/design-system-styles'\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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 ...focus.css({\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, { useId } from 'react'\nimport type { ElementRef } from 'react'\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'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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 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 let newAriaDescribedBy = ariaDescribedBy\n\n if (showBadge && badgeAriaLabel !== undefined) {\n if (newAriaDescribedBy === undefined) {\n newAriaDescribedBy = badgeId\n } else {\n newAriaDescribedBy = `${newAriaDescribedBy} ${badgeId}`\n }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-describedby={newAriaDescribedBy}\n >\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":";;;;;;;;;AAMA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AACvB,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AACzB,MAAM,oBACJ,GAAA,oEAAA,CAAA;AAEW,MAAA,gBAAA,GAAmB,OAAO,UAAY,EAAA;AAAA,EACjD,cAAgB,EAAA,QAAA;AAAA,EAChB,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,QAEP,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,sCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QAEP,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,sBAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QACP,MAAQ,EAAA,4BAAA;AAAA,QAER,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,sBAAA;AAAA,UACX,WAAa,EAAA,sBAAA;AAAA,SACd,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,UACjB,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,UACjB,WAAa,EAAA,yBAAA;AAAA,SACf;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,sBAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,WAAa,EAAA,2BAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,aAAA;AAAA,QAEjB,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,KAAO,EAAA,yBAAA;AAAA,UACP,eAAiB,EAAA,cAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,KAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,KAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,IAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQ,KAAM,CAAA,KAAA;AAAA,QACd,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjFM,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,kBAAoB,EAAA,eAAA;AAAA,IACpB,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,MAAA,GAAS,gBAAgB,QAA4B,CAAA,CAAA;AAC3D,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,qBAAuB,EAAA,EAAA;AAAA,MACvB,IAAA,EAAM,IAAS,KAAA,QAAA,GAAW,OAAU,GAAA,QAAA;AAAA,MACpC,MAAA,EAAQ,IAAS,KAAA,QAAA,GAAW,MAAS,GAAA,QAAA;AAAA,KACvC,CAAA;AAEA,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AAEtB,IAAA,MAAM,iBAAoB,GAAA,kBAAA,CAAmB,QAAU,EAAA,MAAM,IAAM,EAAA;AAAA,MACjE,aAAe,EAAA,MAAA;AAAA,MACf,GAAI,MAAU,IAAA,kBAAA;AAAA,KACf,CAAA,CAAA;AAED,IAAA,IAAI,cAAc,EAAC,CAAA;AACnB,IAAA,IAAI,SAAS,QAAU,EAAA;AACrB,MAAA,WAAA,GACE,YAAiB,KAAA,KAAA,CAAA,IAAa,YAAiB,KAAA,EAAA,GAC3C,EAAE,OAAS,EAAA,CAAA,CAAA,EAAI,OAAS,EAAA,CAAA,CAAA,EACxB,GAAA,EAAE,OAAS,EAAA,CAAA,EAAG,SAAS,CAAG,CAAA,EAAA,CAAA;AAAA,KAClC;AAEA,IAAA,IAAI,kBAAqB,GAAA,eAAA,CAAA;AAEzB,IAAI,IAAA,SAAA,IAAa,mBAAmB,KAAW,CAAA,EAAA;AAC7C,MAAA,IAAI,uBAAuB,KAAW,CAAA,EAAA;AACpC,QAAqB,kBAAA,GAAA,OAAA,CAAA;AAAA,OAChB,MAAA;AACL,QAAqB,kBAAA,GAAA,EAAA,CAAG,2BAAkB,GAAI,CAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OAChD;AAAA,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACL,kBAAkB,EAAA,kBAAA;AAAA,QAElB,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,OAAA;AAAA,YACJ,YAAY,EAAA,cAAA;AAAA,YACX,GAAG,WAAA;AAAA,YACJ,IAAM,EAAA,SAAA;AAAA,YACN,OAAS,EAAA,YAAA;AAAA,YACT,UAAU,OAAY,KAAA,iBAAA;AAAA,YAErB,QAAA,EAAA,iBAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2468,14 +2468,17 @@ declare type IconButtonProps = {
|
|
|
2468
2468
|
'aria-label': string;
|
|
2469
2469
|
/**
|
|
2470
2470
|
* Change the Icon button style
|
|
2471
|
+
* @default 'ghost'
|
|
2471
2472
|
*/
|
|
2472
2473
|
variant?: StyledIconButtonProps['variant'];
|
|
2473
2474
|
/**
|
|
2474
|
-
* Change the Icon button size
|
|
2475
|
+
* Change the Icon button size.
|
|
2476
|
+
* @default 'large'
|
|
2475
2477
|
*/
|
|
2476
2478
|
size?: StyledIconButtonProps['size'];
|
|
2477
2479
|
/**
|
|
2478
2480
|
* Wraps the Icon button with a badge.
|
|
2481
|
+
* @default false
|
|
2479
2482
|
*/
|
|
2480
2483
|
showBadge?: boolean;
|
|
2481
2484
|
/**
|
|
@@ -2483,7 +2486,7 @@ declare type IconButtonProps = {
|
|
|
2483
2486
|
*/
|
|
2484
2487
|
badgeContent?: string;
|
|
2485
2488
|
/**
|
|
2486
|
-
* Badge label used to make Badge
|
|
2489
|
+
* Badge label used to make Badge recognizable by the screen readers.
|
|
2487
2490
|
*/
|
|
2488
2491
|
badgeAriaLabel?: string;
|
|
2489
2492
|
} & BaseButtonProps;
|
|
@@ -2494,14 +2497,17 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
2494
2497
|
'aria-label': string;
|
|
2495
2498
|
/**
|
|
2496
2499
|
* Change the Icon button style
|
|
2500
|
+
* @default 'ghost'
|
|
2497
2501
|
*/
|
|
2498
2502
|
variant?: StyledIconButtonProps['variant'];
|
|
2499
2503
|
/**
|
|
2500
|
-
* Change the Icon button size
|
|
2504
|
+
* Change the Icon button size.
|
|
2505
|
+
* @default 'large'
|
|
2501
2506
|
*/
|
|
2502
2507
|
size?: StyledIconButtonProps['size'];
|
|
2503
2508
|
/**
|
|
2504
2509
|
* Wraps the Icon button with a badge.
|
|
2510
|
+
* @default false
|
|
2505
2511
|
*/
|
|
2506
2512
|
showBadge?: boolean | undefined;
|
|
2507
2513
|
/**
|
|
@@ -2509,7 +2515,7 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
2509
2515
|
*/
|
|
2510
2516
|
badgeContent?: string | undefined;
|
|
2511
2517
|
/**
|
|
2512
|
-
* Badge label used to make Badge
|
|
2518
|
+
* Badge label used to make Badge recognizable by the screen readers.
|
|
2513
2519
|
*/
|
|
2514
2520
|
badgeAriaLabel?: string | undefined;
|
|
2515
2521
|
} & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
|
|
@@ -3007,14 +3013,17 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
3007
3013
|
'aria-label': string;
|
|
3008
3014
|
/**
|
|
3009
3015
|
* Change the Icon button style
|
|
3016
|
+
* @default 'ghost'
|
|
3010
3017
|
*/
|
|
3011
3018
|
variant?: StyledIconButtonProps['variant'];
|
|
3012
3019
|
/**
|
|
3013
|
-
* Change the Icon button size
|
|
3020
|
+
* Change the Icon button size.
|
|
3021
|
+
* @default 'large'
|
|
3014
3022
|
*/
|
|
3015
3023
|
size?: StyledIconButtonProps['size'];
|
|
3016
3024
|
/**
|
|
3017
3025
|
* Wraps the Icon button with a badge.
|
|
3026
|
+
* @default false
|
|
3018
3027
|
*/
|
|
3019
3028
|
showBadge?: boolean | undefined;
|
|
3020
3029
|
/**
|
|
@@ -3022,7 +3031,7 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
3022
3031
|
*/
|
|
3023
3032
|
badgeContent?: string | undefined;
|
|
3024
3033
|
/**
|
|
3025
|
-
* Badge label used to make Badge
|
|
3034
|
+
* Badge label used to make Badge recognizable by the screen readers.
|
|
3026
3035
|
*/
|
|
3027
3036
|
badgeAriaLabel?: string | undefined;
|
|
3028
3037
|
} & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-icon-button",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,10 +26,13 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-base-button": "^0.4.32",
|
|
30
29
|
"@mirohq/design-system-badge": "^0.3.29",
|
|
30
|
+
"@mirohq/design-system-base-button": "^0.4.34",
|
|
31
|
+
"@mirohq/design-system-base-icon": "^0.1.20",
|
|
31
32
|
"@mirohq/design-system-stitches": "^2.6.0",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
+
"@mirohq/design-system-styles": "^1.1.19",
|
|
34
|
+
"@mirohq/design-system-tooltip": "^3.3.1",
|
|
35
|
+
"@mirohq/design-system-utils": "^0.14.3"
|
|
33
36
|
},
|
|
34
37
|
"scripts": {
|
|
35
38
|
"build": "rollup -c ../../../rollup.config.js",
|