@mirohq/design-system-button 3.1.0 → 3.1.1-dropdown.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +46 -15
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +46 -15
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +12 -12
  6. package/package.json +9 -9
package/dist/main.js CHANGED
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var designSystemSpinner = require('@mirohq/design-system-spinner');
7
+ var designSystemUtils = require('@mirohq/design-system-utils');
8
+ var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
7
9
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
8
10
  var designSystemStitches = require('@mirohq/design-system-stitches');
9
11
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
@@ -23,6 +25,7 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
23
25
  const activeSelector = "&:active, &[data-pressed]";
24
26
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
25
27
  const iconSlotSelector = `& ${StyledIconSlot}`;
28
+ const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
26
29
  const solidDisabled = {
27
30
  [disabledSelector]: {
28
31
  backgroundColor: "$background-neutrals-disabled",
@@ -244,38 +247,36 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
244
247
  height: designSystemBaseButton.sizes.xLarge,
245
248
  fontSize: "$200",
246
249
  paddingX: `calc($200 + ${LABEL_OFFSET}px)`,
247
- [iconSlotSelector]: {
248
- width: "$icon-300",
249
- height: "$icon-300"
250
+ [externalIconSelector]: {
251
+ ...designSystemBaseIcon.styles.size.medium,
252
+ ...designSystemBaseIcon.styles.weight.normal
250
253
  }
251
254
  },
252
255
  large: {
253
256
  height: designSystemBaseButton.sizes.large,
254
257
  fontSize: "$200",
255
258
  paddingX: `calc($150 + ${LABEL_OFFSET}px)`,
256
- [iconSlotSelector]: {
257
- width: "$icon-300",
258
- height: "$icon-300"
259
+ [externalIconSelector]: {
260
+ ...designSystemBaseIcon.styles.size.medium,
261
+ ...designSystemBaseIcon.styles.weight.normal
259
262
  }
260
263
  },
261
264
  medium: {
262
265
  height: designSystemBaseButton.sizes.medium,
263
266
  fontSize: "$175",
264
267
  paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
265
- [iconSlotSelector]: {
266
- width: "$icon-200",
267
- height: "$icon-200",
268
- "--svg-stroke-width": "$stroke-width$thin"
268
+ [externalIconSelector]: {
269
+ ...designSystemBaseIcon.styles.size.small,
270
+ ...designSystemBaseIcon.styles.weight.thin
269
271
  }
270
272
  },
271
273
  small: {
272
274
  fontSize: "$175",
273
275
  height: "$6",
274
276
  paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
275
- [iconSlotSelector]: {
276
- width: "$icon-200",
277
- height: "$icon-200",
278
- "--svg-stroke-width": "$stroke-width$thin"
277
+ [externalIconSelector]: {
278
+ ...designSystemBaseIcon.styles.size.small,
279
+ ...designSystemBaseIcon.styles.weight.thin
279
280
  }
280
281
  }
281
282
  },
@@ -312,6 +313,18 @@ const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primi
312
313
  const Label = designSystemPrimitive.Primitive.span;
313
314
  Label.displayName = "Label";
314
315
 
316
+ const buttonIconSizes = {
317
+ small: "small",
318
+ medium: "small",
319
+ large: "medium",
320
+ "x-large": "medium"
321
+ };
322
+ const buttonIconWeights = {
323
+ small: "thin",
324
+ medium: "thin",
325
+ large: "normal",
326
+ "x-large": "normal"
327
+ };
315
328
  const Button = React__default["default"].forwardRef(
316
329
  ({
317
330
  variant = "solid-prominent",
@@ -328,9 +341,27 @@ const Button = React__default["default"].forwardRef(
328
341
  spinnerSize = "small";
329
342
  }
330
343
  const shouldHaveAriaDisabled = ariaDisabled === "true" || ariaDisabled === true || loading;
344
+ const formattedChildren = React__default["default"].Children.map(
345
+ React__default["default"].Children.toArray(children),
346
+ (child) => {
347
+ if (React__default["default"].isValidElement(child) && child.type === IconSlot) {
348
+ const iconSlotChildren = designSystemUtils.addPropsToChildren(
349
+ child.props.children,
350
+ (innerChild) => designSystemBaseIcon.isIconComponent(innerChild),
351
+ {
352
+ "data-icon-component": "",
353
+ size: buttonIconSizes[size],
354
+ weight: buttonIconWeights[size]
355
+ }
356
+ );
357
+ return React__default["default"].cloneElement(child, { ...child.props }, iconSlotChildren);
358
+ }
359
+ return child;
360
+ }
361
+ );
331
362
  const Content = loading ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(StyledSpinnerBox, null, /* @__PURE__ */ React__default["default"].createElement(designSystemSpinner.Spinner, {
332
363
  size: spinnerSize
333
- })), /* @__PURE__ */ React__default["default"].createElement(StyledHiddenContent, null, children)) : children;
364
+ })), /* @__PURE__ */ React__default["default"].createElement(StyledHiddenContent, null, formattedChildren)) : formattedChildren;
334
365
  return /* @__PURE__ */ React__default["default"].createElement(StyledButton, {
335
366
  ...restProps,
336
367
  variant,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {children}\n </StyledIconSlot>\n))\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\n\nconst solidDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst outlineDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst ghostDisabled: CSS = {\n [disabledSelector]: {\n color: '$text-neutrals-disabled',\n backgroundColor: '$transparent',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n userSelect: 'none',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n position: 'relative',\n width: 'fit-content',\n maxWidth: '100%',\n\n lineHeight: 1.5,\n border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n },\n\n [`& ${StyledIconSlot}:first-child`]: {\n marginLeft: -LABEL_OFFSET,\n marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n [`& ${StyledIconSlot}:last-child`]: {\n marginRight: -LABEL_OFFSET,\n marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-primary-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n\n ...solidDisabled,\n },\n 'outline-prominent': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n\n [iconSlotSelector]: {\n color: '$icon-primary',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n borderColor: '$border-primary-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n borderColor: '$border-primary-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-prominent': {\n backgroundColor: 'transparent',\n color: '$text-primary',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...ghostDisabled,\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...solidDisabled,\n },\n\n 'outline-subtle': {\n backgroundColor: '$background-neutrals',\n border: '1px solid $border-neutrals',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\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 ...outlineDisabled,\n },\n 'ghost-subtle': {\n backgroundColor: 'transparent',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...ghostDisabled,\n },\n 'solid-danger': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-danger-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-prominent-active',\n },\n ...solidDisabled,\n },\n 'outline-danger': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-danger',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-danger': {\n backgroundColor: 'transparent',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...ghostDisabled,\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-300',\n height: '$icon-300',\n },\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-300',\n height: '$icon-300',\n },\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-200',\n height: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n },\n small: {\n fontSize: '$175',\n height: '$6',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-200',\n height: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n fluid: {\n true: {\n display: 'flex',\n justifyContent: 'center',\n maxWidth: '100%',\n width: '100%',\n },\n },\n },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n StyledButton,\n StyledHiddenContent,\n StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n /**\n * Change the button style.\n */\n variant?: StyledButtonProps['variant']\n\n /**\n * Change the button size.\n */\n size?: StyledButtonProps['size']\n\n /**\n * Make button border rounded.\n */\n rounded?: StyledButtonProps['rounded']\n\n /**\n * Add spinner and disable.\n */\n loading?: boolean\n\n /**\n * Make width 100%.\n */\n fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n ElementRef<typeof StyledButton>,\n ButtonProps\n>(\n (\n {\n variant = 'solid-prominent',\n size = 'large',\n loading = false,\n rounded = false,\n fluid = false,\n 'aria-disabled': ariaDisabled,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const shouldHaveAriaDisabled =\n ariaDisabled === 'true' || ariaDisabled === true || loading\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{children}</StyledHiddenContent>\n </>\n ) : (\n children\n )\n\n return (\n <StyledButton\n {...restProps}\n variant={variant}\n rounded={rounded}\n fluid={fluid}\n size={size}\n // without undefined it will be aria-disabled=\"false\" in html\n aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n ref={forwardRef}\n >\n {Content}\n </StyledButton>\n )\n }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n IconSlot: typeof IconSlot\n Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["styled","Primitive","React","BaseButton","sizes","Spinner"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {children}\n </StyledIconSlot>\n))\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { 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 type { CSS } from '@mirohq/design-system-stitches'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst outlineDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst ghostDisabled: CSS = {\n [disabledSelector]: {\n color: '$text-neutrals-disabled',\n backgroundColor: '$transparent',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n userSelect: 'none',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n position: 'relative',\n width: 'fit-content',\n maxWidth: '100%',\n\n lineHeight: 1.5,\n border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n },\n\n [`& ${StyledIconSlot}:first-child`]: {\n marginLeft: -LABEL_OFFSET,\n marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n [`& ${StyledIconSlot}:last-child`]: {\n marginRight: -LABEL_OFFSET,\n marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-primary-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n\n ...solidDisabled,\n },\n 'outline-prominent': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n\n [iconSlotSelector]: {\n color: '$icon-primary',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n borderColor: '$border-primary-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n borderColor: '$border-primary-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-prominent': {\n backgroundColor: 'transparent',\n color: '$text-primary',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...ghostDisabled,\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...solidDisabled,\n },\n\n 'outline-subtle': {\n backgroundColor: '$background-neutrals',\n border: '1px solid $border-neutrals',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\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 ...outlineDisabled,\n },\n 'ghost-subtle': {\n backgroundColor: 'transparent',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...ghostDisabled,\n },\n 'solid-danger': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-danger-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-prominent-active',\n },\n ...solidDisabled,\n },\n 'outline-danger': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-danger',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-danger': {\n backgroundColor: 'transparent',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...ghostDisabled,\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n small: {\n fontSize: '$175',\n height: '$6',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n fluid: {\n true: {\n display: 'flex',\n justifyContent: 'center',\n maxWidth: '100%',\n width: '100%',\n },\n },\n },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import React from 'react'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { IconProps } from '@mirohq/design-system-icons'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n StyledButton,\n StyledHiddenContent,\n StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\ntype IconSizes = ExtractValidKeys<IconProps['size']>\ntype IconWeight = ExtractValidKeys<IconProps['weight']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n 'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeight } = {\n small: 'thin',\n medium: 'thin',\n large: 'normal',\n 'x-large': 'normal',\n}\n\nexport interface ButtonProps extends StyledButtonProps {\n /**\n * Change the button style.\n */\n variant?: StyledButtonProps['variant']\n\n /**\n * Change the button size.\n */\n size?: StyledButtonProps['size']\n\n /**\n * Make button border rounded.\n */\n rounded?: StyledButtonProps['rounded']\n\n /**\n * Add spinner and disable.\n */\n loading?: boolean\n\n /**\n * Make width 100%.\n */\n fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n ElementRef<typeof StyledButton>,\n ButtonProps\n>(\n (\n {\n variant = 'solid-prominent',\n size = 'large',\n loading = false,\n rounded = false,\n fluid = false,\n 'aria-disabled': ariaDisabled,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const shouldHaveAriaDisabled =\n ariaDisabled === 'true' || ariaDisabled === true || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\n )\n\n return (\n <StyledButton\n {...restProps}\n variant={variant}\n rounded={rounded}\n fluid={fluid}\n size={size}\n // without undefined it will be aria-disabled=\"false\" in html\n aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n ref={forwardRef}\n >\n {Content}\n </StyledButton>\n )\n }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n IconSlot: typeof IconSlot\n Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["styled","Primitive","React","BaseButton","sizes","baseIconStyles","addPropsToChildren","isIconComponent","Spinner"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Spinner } from '@mirohq/design-system-spinner';
3
+ import { addPropsToChildren } from '@mirohq/design-system-utils';
4
+ import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
3
5
  import { Primitive } from '@mirohq/design-system-primitive';
4
6
  import { styled } from '@mirohq/design-system-stitches';
5
7
  import { BaseButton, sizes } from '@mirohq/design-system-base-button';
@@ -15,6 +17,7 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => /*
15
17
  const activeSelector = "&:active, &[data-pressed]";
16
18
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
17
19
  const iconSlotSelector = `& ${StyledIconSlot}`;
20
+ const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
18
21
  const solidDisabled = {
19
22
  [disabledSelector]: {
20
23
  backgroundColor: "$background-neutrals-disabled",
@@ -236,38 +239,36 @@ const StyledButton = styled(BaseButton, {
236
239
  height: sizes.xLarge,
237
240
  fontSize: "$200",
238
241
  paddingX: `calc($200 + ${LABEL_OFFSET}px)`,
239
- [iconSlotSelector]: {
240
- width: "$icon-300",
241
- height: "$icon-300"
242
+ [externalIconSelector]: {
243
+ ...styles.size.medium,
244
+ ...styles.weight.normal
242
245
  }
243
246
  },
244
247
  large: {
245
248
  height: sizes.large,
246
249
  fontSize: "$200",
247
250
  paddingX: `calc($150 + ${LABEL_OFFSET}px)`,
248
- [iconSlotSelector]: {
249
- width: "$icon-300",
250
- height: "$icon-300"
251
+ [externalIconSelector]: {
252
+ ...styles.size.medium,
253
+ ...styles.weight.normal
251
254
  }
252
255
  },
253
256
  medium: {
254
257
  height: sizes.medium,
255
258
  fontSize: "$175",
256
259
  paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
257
- [iconSlotSelector]: {
258
- width: "$icon-200",
259
- height: "$icon-200",
260
- "--svg-stroke-width": "$stroke-width$thin"
260
+ [externalIconSelector]: {
261
+ ...styles.size.small,
262
+ ...styles.weight.thin
261
263
  }
262
264
  },
263
265
  small: {
264
266
  fontSize: "$175",
265
267
  height: "$6",
266
268
  paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
267
- [iconSlotSelector]: {
268
- width: "$icon-200",
269
- height: "$icon-200",
270
- "--svg-stroke-width": "$stroke-width$thin"
269
+ [externalIconSelector]: {
270
+ ...styles.size.small,
271
+ ...styles.weight.thin
271
272
  }
272
273
  }
273
274
  },
@@ -304,6 +305,18 @@ const StyledSpinnerBox = styled(Primitive.div, {
304
305
  const Label = Primitive.span;
305
306
  Label.displayName = "Label";
306
307
 
308
+ const buttonIconSizes = {
309
+ small: "small",
310
+ medium: "small",
311
+ large: "medium",
312
+ "x-large": "medium"
313
+ };
314
+ const buttonIconWeights = {
315
+ small: "thin",
316
+ medium: "thin",
317
+ large: "normal",
318
+ "x-large": "normal"
319
+ };
307
320
  const Button = React.forwardRef(
308
321
  ({
309
322
  variant = "solid-prominent",
@@ -320,9 +333,27 @@ const Button = React.forwardRef(
320
333
  spinnerSize = "small";
321
334
  }
322
335
  const shouldHaveAriaDisabled = ariaDisabled === "true" || ariaDisabled === true || loading;
336
+ const formattedChildren = React.Children.map(
337
+ React.Children.toArray(children),
338
+ (child) => {
339
+ if (React.isValidElement(child) && child.type === IconSlot) {
340
+ const iconSlotChildren = addPropsToChildren(
341
+ child.props.children,
342
+ (innerChild) => isIconComponent(innerChild),
343
+ {
344
+ "data-icon-component": "",
345
+ size: buttonIconSizes[size],
346
+ weight: buttonIconWeights[size]
347
+ }
348
+ );
349
+ return React.cloneElement(child, { ...child.props }, iconSlotChildren);
350
+ }
351
+ return child;
352
+ }
353
+ );
323
354
  const Content = loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
324
355
  size: spinnerSize
325
- })), /* @__PURE__ */ React.createElement(StyledHiddenContent, null, children)) : children;
356
+ })), /* @__PURE__ */ React.createElement(StyledHiddenContent, null, formattedChildren)) : formattedChildren;
326
357
  return /* @__PURE__ */ React.createElement(StyledButton, {
327
358
  ...restProps,
328
359
  variant,
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {children}\n </StyledIconSlot>\n))\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\n\nconst solidDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst outlineDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst ghostDisabled: CSS = {\n [disabledSelector]: {\n color: '$text-neutrals-disabled',\n backgroundColor: '$transparent',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n userSelect: 'none',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n position: 'relative',\n width: 'fit-content',\n maxWidth: '100%',\n\n lineHeight: 1.5,\n border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n },\n\n [`& ${StyledIconSlot}:first-child`]: {\n marginLeft: -LABEL_OFFSET,\n marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n [`& ${StyledIconSlot}:last-child`]: {\n marginRight: -LABEL_OFFSET,\n marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-primary-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n\n ...solidDisabled,\n },\n 'outline-prominent': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n\n [iconSlotSelector]: {\n color: '$icon-primary',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n borderColor: '$border-primary-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n borderColor: '$border-primary-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-prominent': {\n backgroundColor: 'transparent',\n color: '$text-primary',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...ghostDisabled,\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...solidDisabled,\n },\n\n 'outline-subtle': {\n backgroundColor: '$background-neutrals',\n border: '1px solid $border-neutrals',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\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 ...outlineDisabled,\n },\n 'ghost-subtle': {\n backgroundColor: 'transparent',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...ghostDisabled,\n },\n 'solid-danger': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-danger-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-prominent-active',\n },\n ...solidDisabled,\n },\n 'outline-danger': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-danger',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-danger': {\n backgroundColor: 'transparent',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...ghostDisabled,\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-300',\n height: '$icon-300',\n },\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-300',\n height: '$icon-300',\n },\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-200',\n height: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n },\n small: {\n fontSize: '$175',\n height: '$6',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [iconSlotSelector]: {\n width: '$icon-200',\n height: '$icon-200',\n '--svg-stroke-width': '$stroke-width$thin',\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n fluid: {\n true: {\n display: 'flex',\n justifyContent: 'center',\n maxWidth: '100%',\n width: '100%',\n },\n },\n },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n StyledButton,\n StyledHiddenContent,\n StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n /**\n * Change the button style.\n */\n variant?: StyledButtonProps['variant']\n\n /**\n * Change the button size.\n */\n size?: StyledButtonProps['size']\n\n /**\n * Make button border rounded.\n */\n rounded?: StyledButtonProps['rounded']\n\n /**\n * Add spinner and disable.\n */\n loading?: boolean\n\n /**\n * Make width 100%.\n */\n fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n ElementRef<typeof StyledButton>,\n ButtonProps\n>(\n (\n {\n variant = 'solid-prominent',\n size = 'large',\n loading = false,\n rounded = false,\n fluid = false,\n 'aria-disabled': ariaDisabled,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const shouldHaveAriaDisabled =\n ariaDisabled === 'true' || ariaDisabled === true || loading\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{children}</StyledHiddenContent>\n </>\n ) : (\n children\n )\n\n return (\n <StyledButton\n {...restProps}\n variant={variant}\n rounded={rounded}\n fluid={fluid}\n size={size}\n // without undefined it will be aria-disabled=\"false\" in html\n aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n ref={forwardRef}\n >\n {Content}\n </StyledButton>\n )\n }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n IconSlot: typeof IconSlot\n Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n {children}\n </StyledIconSlot>\n))\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { 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 type { CSS } from '@mirohq/design-system-stitches'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst outlineDisabled: CSS = {\n [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-neutrals-disabled',\n color: '$text-neutrals-disabled',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst ghostDisabled: CSS = {\n [disabledSelector]: {\n color: '$text-neutrals-disabled',\n backgroundColor: '$transparent',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n userSelect: 'none',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n position: 'relative',\n width: 'fit-content',\n maxWidth: '100%',\n\n lineHeight: 1.5,\n border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n },\n\n [`& ${StyledIconSlot}:first-child`]: {\n marginLeft: -LABEL_OFFSET,\n marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n [`& ${StyledIconSlot}:last-child`]: {\n marginRight: -LABEL_OFFSET,\n marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-primary-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n\n ...solidDisabled,\n },\n 'outline-prominent': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n\n [iconSlotSelector]: {\n color: '$icon-primary',\n },\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n borderColor: '$border-primary-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n borderColor: '$border-primary-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-prominent': {\n backgroundColor: 'transparent',\n color: '$text-primary',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$text-primary-hover',\n\n [iconSlotSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-subtle-active',\n color: '$text-primary-active',\n\n [iconSlotSelector]: {\n color: '$icon-primary-active',\n },\n },\n ...ghostDisabled,\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...solidDisabled,\n },\n\n 'outline-subtle': {\n backgroundColor: '$background-neutrals',\n border: '1px solid $border-neutrals',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\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 ...outlineDisabled,\n },\n 'ghost-subtle': {\n backgroundColor: 'transparent',\n color: '$text-neutrals',\n\n [iconSlotSelector]: {\n color: '$icon-neutrals',\n },\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n ...ghostDisabled,\n },\n 'solid-danger': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n\n [iconSlotSelector]: {\n color: '$icon-danger-inverted',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-prominent-active',\n },\n ...solidDisabled,\n },\n 'outline-danger': {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-danger',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...outlineDisabled,\n },\n 'ghost-danger': {\n backgroundColor: 'transparent',\n color: '$text-danger',\n\n [iconSlotSelector]: {\n color: '$icon-danger',\n },\n\n '&:hover': {\n backgroundColor: '$background-danger',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\n backgroundColor: '$background-danger-hover',\n color: '$text-danger-active',\n\n [iconSlotSelector]: {\n color: '$icon-danger-active',\n },\n },\n ...ghostDisabled,\n },\n },\n size: {\n 'x-large': {\n height: sizes.xLarge,\n fontSize: '$200',\n paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n large: {\n height: sizes.large,\n fontSize: '$200',\n paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n medium: {\n height: sizes.medium,\n fontSize: '$175',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n small: {\n fontSize: '$175',\n height: '$6',\n paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n fluid: {\n true: {\n display: 'flex',\n justifyContent: 'center',\n maxWidth: '100%',\n width: '100%',\n },\n },\n },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import React from 'react'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { IconProps } from '@mirohq/design-system-icons'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n StyledButton,\n StyledHiddenContent,\n StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\ntype IconSizes = ExtractValidKeys<IconProps['size']>\ntype IconWeight = ExtractValidKeys<IconProps['weight']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n 'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeight } = {\n small: 'thin',\n medium: 'thin',\n large: 'normal',\n 'x-large': 'normal',\n}\n\nexport interface ButtonProps extends StyledButtonProps {\n /**\n * Change the button style.\n */\n variant?: StyledButtonProps['variant']\n\n /**\n * Change the button size.\n */\n size?: StyledButtonProps['size']\n\n /**\n * Make button border rounded.\n */\n rounded?: StyledButtonProps['rounded']\n\n /**\n * Add spinner and disable.\n */\n loading?: boolean\n\n /**\n * Make width 100%.\n */\n fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n ElementRef<typeof StyledButton>,\n ButtonProps\n>(\n (\n {\n variant = 'solid-prominent',\n size = 'large',\n loading = false,\n rounded = false,\n fluid = false,\n 'aria-disabled': ariaDisabled,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size'] = 'medium'\n\n if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n spinnerSize = 'small'\n }\n\n const shouldHaveAriaDisabled =\n ariaDisabled === 'true' || ariaDisabled === true || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\n )\n\n return (\n <StyledButton\n {...restProps}\n variant={variant}\n rounded={rounded}\n fluid={fluid}\n size={size}\n // without undefined it will be aria-disabled=\"false\" in html\n aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n ref={forwardRef}\n >\n {Content}\n </StyledButton>\n )\n }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n IconSlot: typeof IconSlot\n Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["baseIconStyles"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -210,28 +210,28 @@ declare const StyledButton: react.ForwardRefExoticComponent<Pick<Omit<{
210
210
  readonly 'icon-400': "32px";
211
211
  };
212
212
  space: {
213
- readonly none: 0;
213
+ readonly 0: 0;
214
214
  readonly 50: "4px";
215
215
  readonly 100: "8px";
216
216
  readonly 150: "12px";
217
217
  readonly 200: "16px";
218
218
  readonly 300: "24px";
219
219
  readonly 400: "32px";
220
- readonly 500: "64px";
220
+ readonly 500: "40px";
221
221
  readonly 600: "48px";
222
222
  readonly 800: "64px";
223
223
  readonly 1200: "96px";
224
224
  readonly 1600: "128px";
225
225
  };
226
226
  'space-gap': {
227
- readonly none: any;
227
+ readonly 0: any;
228
228
  readonly 50: any;
229
229
  readonly 100: any;
230
230
  readonly 200: any;
231
231
  readonly 300: any;
232
232
  };
233
233
  'space-inset': {
234
- readonly none: any;
234
+ readonly 0: any;
235
235
  readonly 50: any;
236
236
  readonly 100: any;
237
237
  readonly 150: any;
@@ -244,7 +244,7 @@ declare const StyledButton: react.ForwardRefExoticComponent<Pick<Omit<{
244
244
  readonly 1600: any;
245
245
  };
246
246
  'space-offset': {
247
- readonly none: any;
247
+ readonly 0: any;
248
248
  readonly 50: any;
249
249
  readonly 100: any;
250
250
  readonly 150: any;
@@ -255,7 +255,7 @@ declare const StyledButton: react.ForwardRefExoticComponent<Pick<Omit<{
255
255
  readonly 800: any;
256
256
  readonly 1200: any;
257
257
  readonly 1600: any;
258
- readonly 'stacking-none': any;
258
+ readonly 'stacking-0': any;
259
259
  readonly 'stacking-100': any;
260
260
  readonly 'stacking-200': any;
261
261
  readonly 'stacking-300': any;
@@ -663,28 +663,28 @@ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Pick<Omit
663
663
  readonly 'icon-400': "32px";
664
664
  };
665
665
  space: {
666
- readonly none: 0;
666
+ readonly 0: 0;
667
667
  readonly 50: "4px";
668
668
  readonly 100: "8px";
669
669
  readonly 150: "12px";
670
670
  readonly 200: "16px";
671
671
  readonly 300: "24px";
672
672
  readonly 400: "32px";
673
- readonly 500: "64px";
673
+ readonly 500: "40px";
674
674
  readonly 600: "48px";
675
675
  readonly 800: "64px";
676
676
  readonly 1200: "96px";
677
677
  readonly 1600: "128px";
678
678
  };
679
679
  'space-gap': {
680
- readonly none: any;
680
+ readonly 0: any;
681
681
  readonly 50: any;
682
682
  readonly 100: any;
683
683
  readonly 200: any;
684
684
  readonly 300: any;
685
685
  };
686
686
  'space-inset': {
687
- readonly none: any;
687
+ readonly 0: any;
688
688
  readonly 50: any;
689
689
  readonly 100: any;
690
690
  readonly 150: any;
@@ -697,7 +697,7 @@ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Pick<Omit
697
697
  readonly 1600: any;
698
698
  };
699
699
  'space-offset': {
700
- readonly none: any;
700
+ readonly 0: any;
701
701
  readonly 50: any;
702
702
  readonly 100: any;
703
703
  readonly 150: any;
@@ -708,7 +708,7 @@ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Pick<Omit
708
708
  readonly 800: any;
709
709
  readonly 1200: any;
710
710
  readonly 1600: any;
711
- readonly 'stacking-none': any;
711
+ readonly 'stacking-0': any;
712
712
  readonly 'stacking-100': any;
713
713
  readonly 'stacking-200': any;
714
714
  readonly 'stacking-300': any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-button",
3
- "version": "3.1.0",
3
+ "version": "3.1.1-dropdown.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -31,19 +31,19 @@
31
31
  "@react-aria/link": "^3.3.0",
32
32
  "@react-aria/utils": "^3.13.0",
33
33
  "@react-types/button": "^3.5.0",
34
- "@mirohq/design-system-base-button": "^0.4.7",
35
- "@mirohq/design-system-styles": "^1.0.22",
36
- "@mirohq/design-system-stitches": "^2.3.0",
37
- "@mirohq/design-system-types": "^0.4.1",
38
- "@mirohq/design-system-utils": "^0.13.1",
39
- "@mirohq/design-system-spinner": "^1.1.10",
34
+ "@mirohq/design-system-base-button": "^0.4.8-dropdown.1",
35
+ "@mirohq/design-system-styles": "^1.0.24-dropdown.0",
36
+ "@mirohq/design-system-types": "^0.5.0",
37
+ "@mirohq/design-system-utils": "^0.13.2",
38
+ "@mirohq/design-system-stitches": "^2.3.2-dropdown.0",
39
+ "@mirohq/design-system-spinner": "^1.1.12-dropdown.0",
40
40
  "@mirohq/design-system-primitive": "^1.1.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@types/lodash.capitalize": "^4.2.7",
44
44
  "lodash.capitalize": "^3.0.0",
45
- "@mirohq/design-system-flex": "^2.1.10",
46
- "@mirohq/design-system-icons": "^0.16.0"
45
+ "@mirohq/design-system-flex": "^2.1.12-dropdown.0",
46
+ "@mirohq/design-system-icons": "^0.23.1-dropdown.0"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "rollup -c ../../../rollup.config.js",