@mirohq/design-system-icon-button 2.0.1 → 2.1.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.
- package/dist/main.js +14 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +15 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +12 -0
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -133,8 +133,10 @@ const IconButton = React__default["default"].forwardRef(
|
|
|
133
133
|
children,
|
|
134
134
|
showBadge = false,
|
|
135
135
|
badgeContent,
|
|
136
|
+
badgeAriaLabel,
|
|
136
137
|
variant = "ghost",
|
|
137
138
|
size = "large",
|
|
139
|
+
"aria-describedby": ariaDescribedBy,
|
|
138
140
|
...restProps
|
|
139
141
|
}, forwardRef) => {
|
|
140
142
|
const isIcon = designSystemBaseIcon.isIconComponent(children);
|
|
@@ -143,6 +145,7 @@ const IconButton = React__default["default"].forwardRef(
|
|
|
143
145
|
size: size === "medium" ? "small" : "medium",
|
|
144
146
|
weight: size === "medium" ? "thin" : "normal"
|
|
145
147
|
};
|
|
148
|
+
const badgeId = React.useId();
|
|
146
149
|
const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
|
|
147
150
|
"aria-hidden": "true",
|
|
148
151
|
...isIcon && iconComponentProps
|
|
@@ -151,6 +154,14 @@ const IconButton = React__default["default"].forwardRef(
|
|
|
151
154
|
if (size === "medium") {
|
|
152
155
|
badgeOffset = badgeContent !== void 0 && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
|
|
153
156
|
}
|
|
157
|
+
let newAriaDescribedBy = ariaDescribedBy;
|
|
158
|
+
if (showBadge && badgeAriaLabel !== void 0) {
|
|
159
|
+
if (newAriaDescribedBy === void 0) {
|
|
160
|
+
newAriaDescribedBy = badgeId;
|
|
161
|
+
} else {
|
|
162
|
+
newAriaDescribedBy = "".concat(newAriaDescribedBy, " ").concat(badgeId);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
154
165
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
155
166
|
StyledIconButton,
|
|
156
167
|
{
|
|
@@ -158,9 +169,12 @@ const IconButton = React__default["default"].forwardRef(
|
|
|
158
169
|
variant,
|
|
159
170
|
size,
|
|
160
171
|
ref: forwardRef,
|
|
172
|
+
"aria-describedby": newAriaDescribedBy,
|
|
161
173
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
162
174
|
designSystemBadge.Badge,
|
|
163
175
|
{
|
|
176
|
+
id: badgeId,
|
|
177
|
+
"aria-label": badgeAriaLabel,
|
|
164
178
|
...badgeOffset,
|
|
165
179
|
show: showBadge,
|
|
166
180
|
content: badgeContent,
|
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 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} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n variant = 'ghost',\n size = 'large',\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 badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge\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","addPropsToChildren","jsx","Badge"],"mappings":";;;;;;;;;;;;;;;;;AAMA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AACvB,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AACzB,MAAM,oBACJ,GAAA,oEAAA,CAAA;AAEW,MAAA,gBAAA,GAAmBA,4BAAOC,iCAAY,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,GAAGC,yBAAM,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,GAAGA,yBAAM,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,GAAGA,yBAAM,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,GAAGA,yBAAM,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,QAAQC,4BAAM,CAAA,MAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,KAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,KAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,IAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQD,4BAAM,CAAA,KAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,KAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAQD,4BAAM,CAAA,MAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACzFM,MAAM,aAAaC,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,MAAA,GAASC,qCAAgB,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,iBAAoB,GAAAC,oCAAA,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,IACE,uBAAAC,cAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QAEL,QAAA,kBAAAA,cAAA;AAAA,UAACC,uBAAA;AAAA,UAAA;AAAA,YACE,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;;;;"}
|
|
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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"}
|
package/dist/module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { useId } from 'react';
|
|
3
3
|
import { Badge } from '@mirohq/design-system-badge';
|
|
4
4
|
import { addPropsToChildren } from '@mirohq/design-system-utils';
|
|
5
5
|
import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
|
|
@@ -125,8 +125,10 @@ const IconButton = React.forwardRef(
|
|
|
125
125
|
children,
|
|
126
126
|
showBadge = false,
|
|
127
127
|
badgeContent,
|
|
128
|
+
badgeAriaLabel,
|
|
128
129
|
variant = "ghost",
|
|
129
130
|
size = "large",
|
|
131
|
+
"aria-describedby": ariaDescribedBy,
|
|
130
132
|
...restProps
|
|
131
133
|
}, forwardRef) => {
|
|
132
134
|
const isIcon = isIconComponent(children);
|
|
@@ -135,6 +137,7 @@ const IconButton = React.forwardRef(
|
|
|
135
137
|
size: size === "medium" ? "small" : "medium",
|
|
136
138
|
weight: size === "medium" ? "thin" : "normal"
|
|
137
139
|
};
|
|
140
|
+
const badgeId = useId();
|
|
138
141
|
const formattedChildren = addPropsToChildren(children, () => true, {
|
|
139
142
|
"aria-hidden": "true",
|
|
140
143
|
...isIcon && iconComponentProps
|
|
@@ -143,6 +146,14 @@ const IconButton = React.forwardRef(
|
|
|
143
146
|
if (size === "medium") {
|
|
144
147
|
badgeOffset = badgeContent !== void 0 && badgeContent !== "" ? { offsetX: -7, offsetY: -5 } : { offsetX: 3, offsetY: -3 };
|
|
145
148
|
}
|
|
149
|
+
let newAriaDescribedBy = ariaDescribedBy;
|
|
150
|
+
if (showBadge && badgeAriaLabel !== void 0) {
|
|
151
|
+
if (newAriaDescribedBy === void 0) {
|
|
152
|
+
newAriaDescribedBy = badgeId;
|
|
153
|
+
} else {
|
|
154
|
+
newAriaDescribedBy = "".concat(newAriaDescribedBy, " ").concat(badgeId);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
146
157
|
return /* @__PURE__ */ jsx(
|
|
147
158
|
StyledIconButton,
|
|
148
159
|
{
|
|
@@ -150,9 +161,12 @@ const IconButton = React.forwardRef(
|
|
|
150
161
|
variant,
|
|
151
162
|
size,
|
|
152
163
|
ref: forwardRef,
|
|
164
|
+
"aria-describedby": newAriaDescribedBy,
|
|
153
165
|
children: /* @__PURE__ */ jsx(
|
|
154
166
|
Badge,
|
|
155
167
|
{
|
|
168
|
+
id: badgeId,
|
|
169
|
+
"aria-label": badgeAriaLabel,
|
|
156
170
|
...badgeOffset,
|
|
157
171
|
show: showBadge,
|
|
158
172
|
content: badgeContent,
|
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 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} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n variant = 'ghost',\n size = 'large',\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 badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge\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;;ACzFM,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,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,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,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QAEL,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACE,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;;;;"}
|
|
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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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2482,6 +2482,10 @@ declare type IconButtonProps = {
|
|
|
2482
2482
|
* The content to be displayed inside of the badge.
|
|
2483
2483
|
*/
|
|
2484
2484
|
badgeContent?: string;
|
|
2485
|
+
/**
|
|
2486
|
+
* Badge label used to make Badge recognisable by the screen readers.
|
|
2487
|
+
*/
|
|
2488
|
+
badgeAriaLabel?: string;
|
|
2485
2489
|
} & BaseButtonProps;
|
|
2486
2490
|
declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
2487
2491
|
/**
|
|
@@ -2504,6 +2508,10 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
2504
2508
|
* The content to be displayed inside of the badge.
|
|
2505
2509
|
*/
|
|
2506
2510
|
badgeContent?: string | undefined;
|
|
2511
|
+
/**
|
|
2512
|
+
* Badge label used to make Badge recognisable by the screen readers.
|
|
2513
|
+
*/
|
|
2514
|
+
badgeAriaLabel?: string | undefined;
|
|
2507
2515
|
} & 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<{}, {
|
|
2508
2516
|
'border-widths': {
|
|
2509
2517
|
readonly none: 0;
|
|
@@ -3013,6 +3021,10 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
|
|
|
3013
3021
|
* The content to be displayed inside of the badge.
|
|
3014
3022
|
*/
|
|
3015
3023
|
badgeContent?: string | undefined;
|
|
3024
|
+
/**
|
|
3025
|
+
* Badge label used to make Badge recognisable by the screen readers.
|
|
3026
|
+
*/
|
|
3027
|
+
badgeAriaLabel?: string | undefined;
|
|
3016
3028
|
} & 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<{}, {
|
|
3017
3029
|
'border-widths': {
|
|
3018
3030
|
readonly none: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-icon-button",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-badge": "^0.3.29",
|
|
30
29
|
"@mirohq/design-system-base-button": "^0.4.32",
|
|
30
|
+
"@mirohq/design-system-badge": "^0.3.29",
|
|
31
31
|
"@mirohq/design-system-stitches": "^2.6.0",
|
|
32
|
-
"@mirohq/design-system-tooltip": "^3.
|
|
32
|
+
"@mirohq/design-system-tooltip": "^3.3.0"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "rollup -c ../../../rollup.config.js",
|