drunk styles

microsoft · Sep 20, 2024 · fcccf2e · fcccf2e
1 parent ba426c1
commit fcccf2e
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 11 deletions.
diff --git a/...eact-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx b/...eact-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
@@ -46,7 +46,6 @@ export const useSplitNavItem_unstable = (
 
   const menuButtonShorthand = slot.optional(menuButton, {
     defaultProps: {
-      // size,
       icon: <MoreHorizontalFilled />,
       appearance: 'transparent',
     },

diff --git a/...nts/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts b/...nts/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
@@ -1,6 +1,8 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';
+import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
+import { tokens } from '@fluentui/react-theme';
 
 export const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {
   root: 'fui-SplitNavItem',
@@ -12,33 +14,113 @@ export const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {
 /**
  * Styles for the root slot
  */
-const useStyles = makeStyles({
-  root: {
-    display: 'flex',
+const useRootStyles = makeResetStyles({
+  gap: 'unset',
+  alignItems: 'center',
+  padding: 'unset',
+
+  backgroundColor: navItemTokens.backgroundColor,
+
+  transitionDuration: tokens.durationFaster,
+  transitionProperty: 'background',
+  transitionTimingFunction: tokens.curveEasyEase,
+
+  ':hover .fui-NavItem': {
+    backgroundColor: navItemTokens.backgroundColorHover,
+
+    transitionDuration: tokens.durationFaster,
+    transitionProperty: 'background',
+    transitionTimingFunction: tokens.curveEasyEase,
+  },
+  ':hover': {
+    backgroundColor: navItemTokens.backgroundColorHover,
   },
 
+  ':active': {
+    backgroundColor: navItemTokens.backgroundColorPressed,
+  },
   // TODO add additional classes for different states and/or slots
 });
 
+const usePrimaryNavItemStyles = makeResetStyles({
+  display: 'flex',
+  textTransform: 'none',
+  position: 'relative',
+  justifyContent: 'start',
+  gap: tokens.spacingVerticalL,
+  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,
+  backgroundColor: navItemTokens.backgroundColor,
+  borderRadius: tokens.borderRadiusMedium,
+  color: tokens.colorNeutralForeground2,
+  textDecorationLine: 'none',
+  border: 'none',
+  // this element can change between a button and an anchor
+  // so we need to reset box sizing to prevent horizontal overflow
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+
+  transitionDuration: tokens.durationFaster,
+  transitionProperty: 'background',
+  transitionTimingFunction: tokens.curveEasyEase,
+
+  width: '100%',
+  ':hover': {
+    backgroundColor: 'unset',
+  },
+  ':active': {
+    backgroundColor: 'unset',
+  },
+});
+
+const useSecondaryActionButtonStyles = makeResetStyles({
+  backgroundColor: navItemTokens.backgroundColorHover,
+
+  maxWidth: '24px',
+  minWidth: '24px',
+  padding: '4px',
+
+  transitionDuration: tokens.durationFaster,
+  transitionProperty: 'background',
+  transitionTimingFunction: tokens.curveEasyEase,
+  paddingLeft: '4px',
+  paddingRight: '4px',
+});
+
 /**
  * Apply styling to the SplitNavItem slots based on the state
  */
 export const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {
   'use no memo';
 
-  const styles = useStyles();
-  state.root.className = mergeClasses(splitNavItemClassNames.root, styles.root, state.root.className);
+  const localRootClassNames = useRootStyles();
+  const sharedRootClassNames = useRootDefaultClassName();
+  const primaryNavItemClassNames = usePrimaryNavItemStyles();
+  const secondaryActionButtonClassNames = useSecondaryActionButtonStyles();
+
+  state.root.className = mergeClasses(
+    splitNavItemClassNames.root,
+    sharedRootClassNames,
+    localRootClassNames,
+    state.root.className,
+  );
 
   if (state.primaryNavItem) {
-    state.primaryNavItem.className = mergeClasses(splitNavItemClassNames.primaryNavItem);
+    state.primaryNavItem.className = mergeClasses(
+      splitNavItemClassNames.primaryNavItem,
+      primaryNavItemClassNames,
+      state.primaryNavItem.className,
+    );
   }
 
   if (state.secondaryActionButton) {
-    state.secondaryActionButton.className = mergeClasses(splitNavItemClassNames.secondaryActionButton);
+    state.secondaryActionButton.className = mergeClasses(
+      splitNavItemClassNames.secondaryActionButton,
+      secondaryActionButtonClassNames,
+    );
   }
 
   if (state.menuButton) {
-    state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton);
+    state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, secondaryActionButtonClassNames);
   }
 
   return state;

diff --git a/...ges/react-components/react-nav-preview/stories/src/NavDrawer/NavDrawerDefault.stories.tsx b/...ges/react-components/react-nav-preview/stories/src/NavDrawer/NavDrawerDefault.stories.tsx
@@ -123,7 +123,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
           <AppItem icon={<PersonCircle32Regular />} as="a" href={linkDestination}>
             Contoso HR
           </AppItem>
-          <SplitNavItem href={linkDestination} icon={<Dashboard />} value="1">
+          <SplitNavItem href={linkDestination} icon={<Dashboard />} value="0">
             SomeNav Item
           </SplitNavItem>
           <NavItem href={linkDestination} icon={<Dashboard />} value="1">