save point

Author: snowystinger

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -26,13 +26,14 @@ import {
 import {Checkbox, IconContext, Text, TextContext} from '@react-spectrum/s2';
 import Chevron from '../ui-icons/Chevron';
 import {DOMRef, Key} from '@react-types/shared';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {colorMix, focusRing, lightDark, style} from '../style' with {type: 'macro'};
 import {isAndroid} from '@react-aria/utils';
 import React, {createContext, forwardRef, isValidElement, JSXElementConstructor, ReactElement, useContext, useRef} from 'react';
 import {StylesPropWithHeight, UnsafeStyles} from './style-utils';
 import {useButton} from '@react-aria/button';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale} from '@react-aria/i18n';
+import { raw } from '../style/style-macro';
 
 interface S2TreeProps {
   isDetached?: boolean,
@@ -62,15 +63,15 @@ function useTreeRendererContext(): TreeRendererContextValue {
 }
 
 
-let InternalTreeContext = createContext({});
+let InternalTreeContext = createContext<{isDetached?: boolean}>({});
 
 
 // TODO: add animations for rows appearing and disappearing
 
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
-const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
+const tree = style({
   borderWidth: 2,
   boxSizing: 'border-box',
   borderXWidth: 0,
@@ -91,8 +92,14 @@ const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
   height: {
     isEmpty: 'full'
   },
-  display: {
-    isEmpty: 'flex'
+  display: 'flex',
+  flexDirection: 'column',
+  gap: {
+    isDetached: 2
+  },
+  '--indent': {
+    type: 'width',
+    value: 16
   }
 });
 
@@ -109,7 +116,11 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <TreeRendererContext.Provider value={{renderer}}>
       <InternalTreeContext.Provider value={{isDetached}}>
-        <UNSTABLE_Tree {...props} className={({isEmpty}) => tree({isEmpty})} selectionBehavior="toggle" ref={domRef}>
+        <UNSTABLE_Tree
+          {...props}
+          className={({isEmpty}) => tree({isEmpty, isDetached})}
+          selectionBehavior="toggle"
+          ref={domRef}>
           {props.children}
         </UNSTABLE_Tree>
       </InternalTreeContext.Provider>
@@ -121,6 +132,28 @@ interface TreeRowRenderProps extends TreeItemRenderProps {
   isLink?: boolean
 }
 
+const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
+const selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));
+
+const rowBackgroundColor = {
+  default: {
+    default: 'gray-25',
+    isQuiet: '--s2-container-bg'
+  },
+  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+  isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+  isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color
+  isSelected: {
+    default: selectedBackground, // table-selected-row-background-color, opacity /10
+    isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+    isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+    isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15
+  },
+  forcedColors: {
+    default: 'Background'
+  }
+} as const;
+
 const treeRow = style<TreeRowRenderProps>({
   position: 'relative',
   display: 'flex',
@@ -135,17 +168,23 @@ const treeRow = style<TreeRowRenderProps>({
     default: 'default',
     isLink: 'pointer'
   },
-  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme
-  backgroundColor: {
-    isHovered: '[var(--spectrum-table-row-background-color-hover)]',
-    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',
-    isPressed: '[var(--spectrum-table-row-background-color-down)]',
-    isSelected: '[var(--spectrum-table-row-background-color-selected)]'
+  backgroundColor: '--rowBackgroundColor',
+  '--rowBackgroundColor': {
+    type: 'backgroundColor',
+    value: rowBackgroundColor
   },
-  '--indent': {
-    type: 'width',
-    value: 16
-  }
+  '--rowFocusIndicatorColor': {
+    type: 'outlineColor',
+    value: {
+      default: 'focus-ring',
+      forcedColors: 'Highlight'
+    }
+  },
+  borderTopWidth: 0,
+  borderBottomWidth: 0,
+  borderStartWidth: 0,
+  borderEndWidth: 0,
+  borderStyle: 'none'
 });
 
 const treeCellGrid = style({
@@ -184,26 +223,6 @@ const treeContent = style({
   overflow: 'hidden'
 });
 
-const treeRowOutline = style({
-  ...focusRing(),
-  content: '',
-  display: 'block',
-  position: 'absolute',
-  insetStart: '[8px]',
-  insetEnd: '[8px]',
-  top: {
-    default: '[8px]',
-    isFocusVisible: '[8px]',
-    isSelected: {
-      default: '[1px]',
-      isFocusVisible: '[8px]'
-    }
-  },
-  bottom: '[8px]',
-  pointerEvents: 'none',
-  forcedColorAdjust: 'none'
-});
-
 export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
   let {
     children,
@@ -215,6 +234,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
   let content;
   let nestedRows;
   let {renderer} = useTreeRendererContext();
+  let {isDetached} = useContext(InternalTreeContext);
   // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
   // a nested tree item
 
@@ -247,7 +267,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
       className={renderProps => treeRow({
         ...renderProps,
         isLink: !!href
-      })}>
+      }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}>
       <UNSTABLE_TreeItemContent>
         {({isExpanded, hasChildRows, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (
           <div className={treeCellGrid({isDisabled})}>
@@ -273,7 +293,6 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
               ]}>
               {content}
             </Provider>
-            <div className={treeRowOutline({isFocusVisible, isSelected})} />
           </div>
         )}
       </UNSTABLE_TreeItemContent>

packages/@react-spectrum/s2/stories/TreeView.stories.tsx

@@ -69,7 +69,12 @@ export default meta;
 
 const TreeExampleStatic = (args) => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
-    <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
+    <TreeView
+      {...args}
+      disabledKeys={['projects-1']}
+      aria-label="test static tree"
+      onExpandedChange={action('onExpandedChange')}
+      onSelectionChange={action('onSelectionChange')}>
       <TreeViewItem id="Photos" textValue="Photos">
         <Text>Photos</Text>
         <Folder />