feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js

@@ -0,0 +1,99 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { motionTokens } from '@fluentui/react-motion';
+import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
+export const splitNavItemClassNames = {
+    root: 'fui-SplitNavItem',
+    navItem: 'fui-SplitNavItem__navItem',
+    actionButton: 'fui-SplitNavItem__actionButton',
+    toggleButton: 'fui-SplitNavItem__toggleButton',
+    menuButton: 'fui-SplitNavItem__menuButton',
+    /**
+   * Tooltips don't have a class name prop, so this is just to satisfy the linter.
+   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
+    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
+    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
+};
+// Don't use makeResetStyles here because the sub components call it once and
+// This links says that makeResetStyles should only be called once per element
+// https://griffel.js.org/react/api/make-reset-styles/#limitations
+const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
+const buttonHoverStyles = {
+    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
+        opacity: 1,
+        pointerEvents: 'auto'
+    }
+};
+/**
+ * Styles for the root slot
+ */ const useSplitNaveItemStyles = makeStyles({
+    baseRoot: {
+        display: 'flex',
+        gap: 'unset',
+        alignItems: 'stretch',
+        padding: 'unset',
+        textAlign: 'unset',
+        backgroundColor: navItemTokens.backgroundColor,
+        ...navItemTokens.transitionTokens,
+        ':hover': {
+            backgroundColor: navItemTokens.backgroundColorHover,
+            ...buttonHoverStyles
+        },
+        ':focus-within': buttonHoverStyles,
+        ':active': {
+            backgroundColor: navItemTokens.backgroundColorPressed
+        }
+    },
+    baseNavItem: {
+        // styles that we want to disagree with the default on
+        display: 'flex',
+        textTransform: 'none',
+        alignSelf: 'stretch',
+        textAlign: 'left',
+        position: 'relative',
+        justifyContent: 'start',
+        gap: tokens.spacingVerticalL,
+        backgroundColor: 'transparent'
+    },
+    baseSecondary: {
+        minWidth: '28px',
+        paddingInlineEnd: '12px',
+        paddingInlineStart: '5px',
+        paddingBlockStart: '5px',
+        alignItems: 'start'
+    },
+    baseMedium: {
+        paddingBlockStart: '9px'
+    },
+    baseLarge: {
+        paddingBlockStart: '12px'
+    },
+    hoverAction: {
+        opacity: 0,
+        pointerEvents: 'none',
+        transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,
+        willChange: 'opacity'
+    }
+});
+/**
+ * Apply styling to the SplitNavItem slots based on the state
+ */ export const useSplitNavItemStyles_unstable = (state)=>{
+    'use no memo';
+    const splitNavItemStyles = useSplitNaveItemStyles();
+    const sharedRootClassNames = useRootDefaultClassName();
+    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
+    if (state.navItem) {
+        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
+    }
+    if (state.actionButton) {
+        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+    }
+    if (state.toggleButton) {
+        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+    }
+    if (state.menuButton) {
+        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+    }
+    return state;
+};