npm - @fluentui/react-badge - Versions diffs - 9.4.3 → 9.4.5 - Mend

@fluentui/react-badge 9.4.3 → 9.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-badge
-This log was last generated on Thu, 07 Aug 2025 09:59:13 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:42:02 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.4.5)
+Mon, 08 Sep 2025 12:42:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.4.4..@fluentui/react-badge_v9.4.5)
+### Patches
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- fix: badge icon margin styling for falsy content ([PR #35110](https://github.com/microsoft/fluentui/pull/35110) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.4.4)
+Thu, 21 Aug 2025 12:25:27 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.4.3..@fluentui/react-badge_v9.4.4)
+### Patches
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 ## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.4.3)
-Thu, 07 Aug 2025 09:59:13 GMT
+Thu, 07 Aug 2025 10:03:33 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.4.2..@fluentui/react-badge_v9.4.3)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -146,7 +145,7 @@ export declare const presenceOofRegular: Record<PresenceBadgeState['size'], Reac
 export declare const presenceUnknownRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
-export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
+export declare const renderBadge_unstable: (state: BadgeState) => JSXElement;
 /**
  * Returns the props and state required to render the component

package/lib/components/Badge/renderBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGlE,EAAE"}
1	+ {"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState): JSXElement => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGlE,EAAE"}

package/lib/components/Badge/useBadgeStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const badgeClassNames = {
@@ -327,7 +328,8 @@ export const useBadgeStyles_unstable = state => {
   const iconStyles = useIconStyles();
   if (state.icon) {
     let iconPositionClass;
-    if (state.root.children) {
+    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+    if (React.Children.toArray(state.root.children).length > 0) {
       if (state.size === 'extra-large') {
         iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
       } else {

package/lib/components/Badge/useBadgeStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/*\n Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/*\n Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n if (React.Children.toArray(state.root.children).length > 0) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Badge/useBadgeStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const badgeClassNames = {
@@ -279,7 +280,8 @@ const useIconStyles = makeStyles({
     const iconStyles = useIconStyles();
     if (state.icon) {
         let iconPositionClass;
-        if (state.root.children) {
+        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+        if (React.Children.toArray(state.root.children).length > 0) {
             if (state.size === 'extra-large') {
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
             } else {

package/lib/components/Badge/useBadgeStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n if (React.Children.toArray(state.root.children).length > 0) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACvF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,uHAAuH;AACvH,uHAAuH;AACvH,MAAMC,cAAcL,OAAOM,oBAAoB;AAE/C,MAAMC,mBAAmBV,gBAAgB;IACvCW,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACV,GAAGX,iBAAiBY,cAAc;IAClCC,QAAQ;IACRC,UAAU;IACVC,SAAS,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,GAAG,EAAEZ,YAAY,CAAC,CAAC;IACjEa,cAAclB,OAAOmB,oBAAoB;IACzC,6FAA6F;IAC7FC,aAAapB,OAAOqB,sBAAsB;IAE1C,WAAW;QACTC,SAAS;QACTV,UAAU;QACVW,KAAK;QACLC,MAAM;QACNC,QAAQ;QACRC,OAAO;QACPC,aAAa;QACbP,aAAa;QACbQ,aAAa5B,OAAO6B,eAAe;QACnCX,cAAc;IAChB;AACF;AAEA,MAAMY,gBAAgBhC,WAAW;IAC/BiC,iBAAiB;QACf,GAAG9B,iBAAiB+B,cAAc;IACpC;IAEA,OAAO;IAEPC,MAAM;QACJC,OAAO;QACPpB,QAAQ;QACRqB,UAAU;QACVC,YAAY;QACZrB,UAAU;QACVC,SAAS;IACX;IACA,eAAe;QACbkB,OAAO;QACPpB,QAAQ;QACRqB,UAAU;QACVC,YAAY;QACZrB,UAAU;QACVC,SAAS;IACX;IACAqB,OAAO;QACLtB,UAAU;QACVD,QAAQ;QACRE,SAAS,CAAC,OAAO,EAAEhB,OAAOM,oBAAoB,CAAC,GAAG,EAAED,YAAY,CAAC,CAAC;IACpE;IACAiC,QAAQ;IAER;IACAC,OAAO;QACLxB,UAAU;QACVD,QAAQ;QACRE,SAAS,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,GAAG,EAAEZ,YAAY,CAAC,CAAC;IACnE;IACA,eAAe;QACbU,UAAU;QACVD,QAAQ;QACRE,SAAS,CAAC,OAAO,EAAEhB,OAAOwC,uBAAuB,CAAC,GAAG,EAAEnC,YAAY,CAAC,CAAC;IACvE;IAEA,QAAQ;IAERoC,QAAQ;QAAEvB,cAAclB,OAAO0C,gBAAgB;IAAC;IAChDC,SAAS;QAAEzB,cAAclB,OAAO4C,kBAAkB;IAAC;IACnDC,oBAAoB;QAAE3B,cAAclB,OAAO8C,iBAAiB;IAAC;IAC7DC,UAAU;IAEV;IACA,4CAA4C;IAE5CC,aAAa;QACX,0FAA0F;QAC1F,qGAAqG;QACrG,WAAW;YACTxC,SAAS;QACX;IACF;IAEA,qBAAqB;IAErByC,QAAQ;IAER;IACA,gBAAgB;QACdC,iBAAiBlD,OAAOmD,oBAAoB;QAC5CC,OAAOpD,OAAOqD,6BAA6B;IAC7C;IACA,iBAAiB;QACfH,iBAAiBlD,OAAOsD,0BAA0B;QAClDF,OAAOpD,OAAOqD,6BAA6B;IAC7C;IACA,oBAAoB;QAClBH,iBAAiBlD,OAAOuD,uBAAuB;QAC/CH,OAAOpD,OAAOwD,uBAAuB;IACvC;IACA,sBAAsB;QACpBN,iBAAiBlD,OAAOyD,uBAAuB;QAC/CL,OAAOpD,OAAO0D,uBAAuB;IACvC;IACA,iBAAiB;QACfR,iBAAiBlD,OAAO2D,iCAAiC;QACzDP,OAAOpD,OAAOqD,6BAA6B;IAC7C;IACA,iBAAiB;QACfH,iBAAiBlD,OAAOwD,uBAAuB;QAC/CJ,OAAOpD,OAAOuD,uBAAuB;IACvC;IACA,kBAAkB;QAChBL,iBAAiBlD,OAAO4D,4BAA4B;QACpDR,OAAOpD,OAAOqD,6BAA6B;IAC7C;IACA,kBAAkB;QAChBH,iBAAiBlD,OAAO6D,6BAA6B;QACrDT,OAAOpD,OAAO8D,6BAA6B;IAC7C;IAEA,oBAAoB;IAEpBC,OAAO;IAEP;IACA,eAAe;QACbX,OAAOpD,OAAOgE,qBAAqB;IACrC;IACA,gBAAgB;QACdZ,OAAOpD,OAAOiE,0BAA0B;IAC1C;IACA,mBAAmB;QACjBb,OAAOpD,OAAOuD,uBAAuB;IACvC;IACA,qBAAqB;QACnBH,OAAOpD,OAAO0D,uBAAuB;IACvC;IACA,gBAAgB;QACdN,OAAOpD,OAAOkE,iCAAiC;IACjD;IACA,gBAAgB;QACdd,OAAOpD,OAAOmE,oCAAoC;IACpD;IACA,iBAAiB;QACff,OAAOpD,OAAOoE,4BAA4B;IAC5C;IACA,iBAAiB;QACfhB,OAAOpD,OAAOqE,6BAA6B;IAC7C;IAEA,sBAAsB;IAEtBC,SAAS;QACP,GAAG1E,WAAWwB,WAAW,CAAC,eAAe;IAC3C;IACA,iBAAiB;QACfgC,OAAOpD,OAAOgE,qBAAqB;IACrC;IACA,kBAAkB;QAChBZ,OAAOpD,OAAOiE,0BAA0B;QACxC,GAAGrE,WAAWwB,WAAW,CAACpB,OAAOuE,sBAAsB,CAAC;IAC1D;IACA,qBAAqB;QACnBnB,OAAOpD,OAAO0D,uBAAuB;QACrC,GAAG9D,WAAWwB,WAAW,CAACpB,OAAOwE,4BAA4B,CAAC;IAChE;IACA,uBAAuB;QACrBpB,OAAOpD,OAAO0D,uBAAuB;QACrC,GAAG9D,WAAWwB,WAAW,CAACpB,OAAOyE,mBAAmB,CAAC;IACvD;IACA,kBAAkB;QAChBrB,OAAOpD,OAAOkE,iCAAiC;IACjD;IACA,kBAAkB;QAChBd,OAAOpD,OAAOmE,oCAAoC;IACpD;IACA,mBAAmB;QACjBf,OAAOpD,OAAOoE,4BAA4B;QAC1C,GAAGxE,WAAWwB,WAAW,CAACpB,OAAO0E,wBAAwB,CAAC;IAC5D;IACA,mBAAmB;QACjBtB,OAAOpD,OAAOqE,6BAA6B;IAC7C;IAEA,mBAAmB;IAEnBM,MAAM;IAEN;IACA,cAAc;QACZzB,iBAAiBlD,OAAO4E,qBAAqB;QAC7CxB,OAAOpD,OAAO6E,qBAAqB;QACnC,GAAGjF,WAAWwB,WAAW,CAACpB,OAAO8E,iBAAiB,CAAC;IACrD;IACA,eAAe;QACb5B,iBAAiBlD,OAAO+E,0BAA0B;QAClD3B,OAAOpD,OAAOgF,0BAA0B;QACxC,GAAGpF,WAAWwB,WAAW,CAACpB,OAAOiF,sBAAsB,CAAC;IAC1D;IACA,kBAAkB;QAChB/B,iBAAiBlD,OAAO0D,uBAAuB;QAC/CN,OAAOpD,OAAOwD,uBAAuB;QACrC,GAAG5D,WAAWwB,WAAW,CAACpB,OAAOqB,sBAAsB,CAAC;IAC1D;IACA,oBAAoB;QAClB6B,iBAAiBlD,OAAOkF,uBAAuB;QAC/C9B,OAAOpD,OAAO0D,uBAAuB;QACrC,GAAG9D,WAAWwB,WAAW,CAACpB,OAAOyE,mBAAmB,CAAC;IACvD;IACA,eAAe;QACbvB,iBAAiBlD,OAAOmF,iCAAiC;QACzD/B,OAAOpD,OAAOoF,iCAAiC;QAC/C,GAAGxF,WAAWwB,WAAW,CAACpB,OAAOqF,6BAA6B,CAAC;IACjE;IACA,eAAe;QACbnC,iBAAiBlD,OAAOwD,uBAAuB;QAC/CJ,OAAOpD,OAAO0D,uBAAuB;QACrC,GAAG9D,WAAWwB,WAAW,CAACpB,OAAOyE,mBAAmB,CAAC;IACvD;IACA,gBAAgB;QACdvB,iBAAiBlD,OAAOsF,4BAA4B;QACpDlC,OAAOpD,OAAOuF,4BAA4B;QAC1C,GAAG3F,WAAWwB,WAAW,CAACpB,OAAOwF,wBAAwB,CAAC;IAC5D;IACA,gBAAgB;QACdtC,iBAAiBlD,OAAOyF,6BAA6B;QACrDrC,OAAOpD,OAAO0F,6BAA6B;QAC3C,GAAG9F,WAAWwB,WAAW,CAACpB,OAAO2F,yBAAyB,CAAC;IAC7D;AACF;AAEA,MAAMC,uBAAuB/F,gBAAgB;IAC3CW,SAAS;IACT4B,YAAY;IACZyD,QAAQ,CAAC,YAAY,EAAExF,YAAY,CAAC,CAAC;IACrC8B,UAAU;AACZ;AAEA,MAAM2D,gBAAgBhG,WAAW;IAC/BiG,YAAY;QACVC,aAAa,CAAC,KAAK,EAAEhG,OAAOM,oBAAoB,CAAC,GAAG,EAAED,YAAY,CAAC,CAAC;IACtE;IACA4F,WAAW;QACTC,YAAY,CAAC,KAAK,EAAElG,OAAOM,oBAAoB,CAAC,GAAG,EAAED,YAAY,CAAC,CAAC;IACrE;IAEA8F,cAAc;QACZH,aAAa,CAAC,KAAK,EAAEhG,OAAOiB,mBAAmB,CAAC,GAAG,EAAEZ,YAAY,CAAC,CAAC;IACrE;IACA+F,aAAa;QACXF,YAAY,CAAC,KAAK,EAAElG,OAAOiB,mBAAmB,CAAC,GAAG,EAAEZ,YAAY,CAAC,CAAC;IACpE;IAEA,OAAO;IAEP4B,MAAM;QACJE,UAAU;IACZ;IACA,eAAe;QACbA,UAAU;IACZ;IACAE,OAAO;QACLF,UAAU;IACZ;IACAG,QAAQ;IAER;IACAC,OAAO;QACLJ,UAAU;IACZ;IACA,eAAe;QACbA,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMkE,0BAA0B,CAACC;IACtC;IAEA,MAAMC,gBAAgBhG;IACtB,MAAMiG,aAAa1E;IAEnB,MAAM2E,cAAcH,MAAMI,IAAI,KAAK,WAAWJ,MAAMI,IAAI,KAAK,iBAAiBJ,MAAMI,IAAI,KAAK;IAE7FJ,MAAMnG,IAAI,CAACwG,SAAS,GAAG5G,aACrBG,gBAAgBC,IAAI,EACpBoG,eACAE,eAAeD,WAAWzE,eAAe,EACzCyE,UAAU,CAACF,MAAMI,IAAI,CAAC,EACtBF,UAAU,CAACF,MAAMM,KAAK,CAAC,EACvBN,MAAMM,KAAK,KAAK,aAAaH,eAAeD,WAAW3D,kBAAkB,EACzEyD,MAAMO,UAAU,KAAK,WAAWL,WAAWxD,WAAW,EACtDwD,UAAU,CAACF,MAAMO,UAAU,CAAC,EAC5BL,UAAU,CAAC,GAAGF,MAAMO,UAAU,CAAC,CAAC,EAAEP,MAAMlD,KAAK,EAAE,CAAU,EACzDkD,MAAMnG,IAAI,CAACwG,SAAS;IAGtB,MAAMG,oBAAoBlB;IAC1B,MAAMmB,aAAajB;IACnB,IAAIQ,MAAMlG,IAAI,EAAE;QACd,IAAI4G;QACJ,yGAAyG;QACzG,IAAIrH,MAAMsH,QAAQ,CAACC,OAAO,CAACZ,MAAMnG,IAAI,CAACgH,QAAQ,EAAEC,MAAM,GAAG,GAAG;YAC1D,IAAId,MAAMI,IAAI,KAAK,eAAe;gBAChCM,oBAAoBV,MAAMe,YAAY,KAAK,UAAUN,WAAWX,WAAW,GAAGW,WAAWZ,YAAY;YACvG,OAAO;gBACLa,oBAAoBV,MAAMe,YAAY,KAAK,UAAUN,WAAWd,SAAS,GAAGc,WAAWhB,UAAU;YACnG;QACF;QAEAO,MAAMlG,IAAI,CAACuG,SAAS,GAAG5G,aACrBG,gBAAgBE,IAAI,EACpB0G,mBACAE,mBACAD,UAAU,CAACT,MAAMI,IAAI,CAAC,EACtBJ,MAAMlG,IAAI,CAACuG,SAAS;IAExB;IAEA,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/Badge/renderBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":";;;;+~~BAMaC~~;;;;;;~~4BALb~~,iCAAiD;gCAErB,4BAA4B;~~AAGjD~~,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGlE,EAAE"}
1	+ {"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState): JSXElement => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCAErB,4BAA4B;AAKjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGlE,EAAE"}

package/lib-commonjs/components/Badge/useBadgeStyles.styles.js CHANGED Viewed

@@ -16,7 +16,9 @@ _export(exports, {
         return useBadgeStyles_unstable;
     }
 });
-const _react = require("@griffel/react");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const badgeClassNames = {
     root: 'fui-Badge',
@@ -25,13 +27,13 @@ const badgeClassNames = {
 // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
 // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
 const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
-const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1iycov", "r115jdol", [
+const useRootClassName = /*#__PURE__*/ (0, _react1.__resetStyles)("r1iycov", "r115jdol", [
     ".r1iycov{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
     ".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}",
     ".r115jdol{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
     ".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"
 ]);
-const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+const useRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     fontSmallToTiny: {
         Bahqtrf: "fk6fouc",
         Be2twd7: "f13mqy1h",
@@ -509,10 +511,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"
     ]
 });
-const useIconRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rttl5z0", null, [
+const useIconRootClassName = /*#__PURE__*/ (0, _react1.__resetStyles)("rttl5z0", null, [
     ".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"
 ]);
-const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+const useIconStyles = /*#__PURE__*/ (0, _react1.__styles)({
     beforeText: {
         t21cq0: [
             "f1t8l4o1",
@@ -571,19 +573,20 @@ const useBadgeStyles_unstable = (state)=>{
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
-    state.root.className = (0, _react.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
     const iconRootClassName = useIconRootClassName();
     const iconStyles = useIconStyles();
     if (state.icon) {
         let iconPositionClass;
-        if (state.root.children) {
+        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+        if (_react.Children.toArray(state.root.children).length > 0) {
             if (state.size === 'extra-large') {
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
             } else {
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
             }
         }
-        state.icon.className = (0, _react.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+        state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
     }
     return state;
 };

package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/*\n Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"mappings":"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"}
1	+ {"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/*\n Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n if (React.Children.toArray(state.root.children).length > 0) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}

package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js CHANGED Viewed

@@ -16,7 +16,9 @@ _export(exports, {
         return useBadgeStyles_unstable;
     }
 });
-const _react = require("@griffel/react");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const badgeClassNames = {
     root: 'fui-Badge',
@@ -25,7 +27,7 @@ const badgeClassNames = {
 // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
 // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
 const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
-const useRootClassName = (0, _react.makeResetStyles)({
+const useRootClassName = (0, _react1.makeResetStyles)({
     display: 'inline-flex',
     boxSizing: 'border-box',
     alignItems: 'center',
@@ -51,7 +53,7 @@ const useRootClassName = (0, _react.makeResetStyles)({
         borderRadius: 'inherit'
     }
 });
-const useRootStyles = (0, _react.makeStyles)({
+const useRootStyles = (0, _react1.makeStyles)({
     fontSmallToTiny: {
         ..._reacttheme.typographyStyles.caption2Strong
     },
@@ -169,22 +171,22 @@ const useRootStyles = (0, _react.makeStyles)({
     },
     // appearance: outline
     outline: {
-        ..._react.shorthands.borderColor('currentColor')
+        ..._react1.shorthands.borderColor('currentColor')
     },
     'outline-brand': {
         color: _reacttheme.tokens.colorBrandForeground1
     },
     'outline-danger': {
         color: _reacttheme.tokens.colorPaletteRedForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
     },
     'outline-important': {
         color: _reacttheme.tokens.colorNeutralForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
     },
     'outline-informative': {
         color: _reacttheme.tokens.colorNeutralForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
     },
     'outline-severe': {
         color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
@@ -194,7 +196,7 @@ const useRootStyles = (0, _react.makeStyles)({
     },
     'outline-success': {
         color: _reacttheme.tokens.colorPaletteGreenForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
     },
     'outline-warning': {
         color: _reacttheme.tokens.colorPaletteYellowForeground2
@@ -204,51 +206,51 @@ const useRootStyles = (0, _react.makeStyles)({
     'tint-brand': {
         backgroundColor: _reacttheme.tokens.colorBrandBackground2,
         color: _reacttheme.tokens.colorBrandForeground2,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
     },
     'tint-danger': {
         backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
         color: _reacttheme.tokens.colorPaletteRedForeground1,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
     },
     'tint-important': {
         backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
         color: _reacttheme.tokens.colorNeutralBackground1,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
     },
     'tint-informative': {
         backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
         color: _reacttheme.tokens.colorNeutralForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
     },
     'tint-severe': {
         backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
         color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
     },
     'tint-subtle': {
         backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
         color: _reacttheme.tokens.colorNeutralForeground3,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
     },
     'tint-success': {
         backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
         color: _reacttheme.tokens.colorPaletteGreenForeground1,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
     },
     'tint-warning': {
         backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
         color: _reacttheme.tokens.colorPaletteYellowForeground1,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
     }
 });
-const useIconRootClassName = (0, _react.makeResetStyles)({
+const useIconRootClassName = (0, _react1.makeResetStyles)({
     display: 'flex',
     lineHeight: '1',
     margin: `0 calc(-1 * ${textPadding})`,
     fontSize: '12px'
 });
-const useIconStyles = (0, _react.makeStyles)({
+const useIconStyles = (0, _react1.makeStyles)({
     beforeText: {
         marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
     },
@@ -284,19 +286,20 @@ const useBadgeStyles_unstable = (state)=>{
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
-    state.root.className = (0, _react.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
     const iconRootClassName = useIconRootClassName();
     const iconStyles = useIconStyles();
     if (state.icon) {
         let iconPositionClass;
-        if (state.root.children) {
+        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+        if (_react.Children.toArray(state.root.children).length > 0) {
             if (state.size === 'extra-large') {
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
             } else {
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
             }
         }
-        state.icon.className = (0, _react.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+        state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
     }
     return state;
 };

package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' \|\| state.size === 'extra-small' \|\| state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n if (React.Children.toArray(state.root.children).length > 0) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.4.3",
+  "version": "9.4.5",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,18 +19,18 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.5",
-    "@fluentui/react-shared-contexts": "^9.24.1",
+    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-shared-contexts": "^9.25.1",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.23.2",
+    "@fluentui/react-utilities": "^9.24.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [