@fluentui/react-button 0.0.0-nightly-20250702-0405.1 → 0.0.0-nightly-20250703-1103.1

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js

@@ -0,0 +1,241 @@
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+const useRootStyles = makeStyles({
+    // Base styles
+    base: {
+        height: 'auto',
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {
+    },
+    primary: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'HighlightText'
+            }
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2Pressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            }
+        }
+    },
+    transparent: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForeground2BrandPressed
+            }
+        }
+    },
+    // Size variations
+    small: {
+        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300
+    },
+    medium: {
+        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300
+    },
+    large: {
+        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400
+    },
+    // Disabled styles
+    disabled: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'GrayText'
+            },
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useRootIconOnlyStyles = makeStyles({
+    // Size variations
+    small: {
+        padding: tokens.spacingHorizontalXS,
+        maxWidth: '48px',
+        minWidth: '48px'
+    },
+    medium: {
+        padding: tokens.spacingHorizontalSNudge,
+        maxWidth: '52px',
+        minWidth: '52px'
+    },
+    large: {
+        padding: tokens.spacingHorizontalS,
+        maxWidth: '56px',
+        minWidth: '56px'
+    }
+});
+const useIconStyles = makeStyles({
+    // Base styles
+    base: {
+        fontSize: '40px',
+        height: '40px',
+        width: '40px'
+    },
+    // Icon position variations
+    before: {
+        marginRight: tokens.spacingHorizontalM
+    },
+    after: {
+        marginLeft: tokens.spacingHorizontalM
+    }
+});
+const useContentContainerStyles = makeStyles({
+    // Base styles
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'left'
+    }
+});
+const useSecondaryContentStyles = makeStyles({
+    // Base styles
+    base: {
+        lineHeight: '100%',
+        fontWeight: tokens.fontWeightRegular
+    },
+    // Size variations
+    small: {
+        fontSize: tokens.fontSizeBase200
+    },
+    medium: {
+        fontSize: tokens.fontSizeBase200
+    },
+    large: {
+        fontSize: tokens.fontSizeBase300
+    }
+});
+export const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const contentContainerStyles = useContentContainerStyles();
+    const secondaryContentStyles = useSecondaryContentStyles();
+    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles
+    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
+    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
+    iconOnly && rootIconOnlyStyles[size], // User provided class name
+    state.root.className);
+    state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    }
+    useButtonStyles_unstable(state);
+    return state;
+};

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Canvas',\n        },\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    padding: tokens.spacingHorizontalXS,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: tokens.spacingHorizontalSNudge,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: tokens.spacingHorizontalS,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","mergeClasses","makeStyles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","height","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js

@@ -0,0 +1,112 @@
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = makeStyles({
+    base: {
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    // Appearance variations
+    outline: {
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+        ...shorthands.borderWidth(tokens.strokeWidthThicker),
+        color: tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+        backgroundColor: tokens.colorBrandBackgroundSelected
+    },
+    secondary: {
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+        color: tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        color: tokens.colorNeutralForeground2Selected
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        color: tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useIconExpandedStyles = makeStyles({
+    // Appearance variations
+    outline: {
+        color: tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+    },
+    secondary: {
+        color: tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    },
+    transparent: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    },
+    highContrast: {
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight'
+            }
+        }
+    }
+});
+const useMenuIconStyles = makeStyles({
+    base: {
+        lineHeight: 0
+    },
+    // Size appearance
+    small: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: tokens.lineHeightBase200,
+        width: '12px'
+    },
+    medium: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: tokens.lineHeightBase200,
+        width: '12px'
+    },
+    large: {
+        fontSize: '16px',
+        height: '16px',
+        lineHeight: tokens.lineHeightBase400,
+        width: '16px'
+    },
+    // Not-icon only
+    notIconOnly: {
+        marginLeft: tokens.spacingHorizontalXS
+    }
+});
+export const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootExpandedStyles = useRootExpandedStyles();
+    const iconExpandedStyles = useIconExpandedStyles();
+    const menuIconStyles = useMenuIconStyles();
+    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+    }
+    useButtonStyles_unstable({
+        ...state,
+        iconPosition: 'before'
+    });
+    return state;
+};

package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  highContrast: {\n    // High contrast styles\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n      },\n    },\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  'use no memo';\n\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js

@@ -0,0 +1,158 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
+// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
+const MIN_TARGET_SIZE = '24px';
+const useFocusStyles = makeStyles({
+    primaryActionButton: createCustomFocusIndicatorStyle({
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+    }),
+    menuButton: createCustomFocusIndicatorStyle({
+        borderLeftWidth: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+    })
+});
+const useRootStyles = makeStyles({
+    // Base styles
+    base: {
+        display: 'inline-flex',
+        justifyContent: 'stretch',
+        position: 'relative',
+        verticalAlign: 'middle',
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+        },
+        [`& .${splitButtonClassNames.menuButton}`]: {
+            borderLeftWidth: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            minWidth: MIN_TARGET_SIZE
+        }
+    },
+    // Appearance variations
+    outline: {
+    },
+    primary: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorNeutralStrokeOnBrand
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'HighlightText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            },
+            ':hover:active': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            }
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    transparent: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    // Shape variations
+    circular: {},
+    rounded: {},
+    square: {},
+    // Disabled styles
+    disabled: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorNeutralStrokeDisabled
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeDisabled
+            }
+        },
+        ':hover:active': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'GrayText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+export const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const focusStyles = useFocusStyles();
+    const { appearance, disabled, disabledFocusable } = state;
+    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
+    if (state.menuButton) {
+        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+    }
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+    }
+    return state;
+};

package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: MIN_TARGET_SIZE,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'HighlightText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'Highlight',\n        },\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorTransparentBackground,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorTransparentBackgroundPressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}