chore: Update S2 TreeView and TableView to be more inline with new designs (#9249)

* update treeview not to have emphasizied/detached

removing for now, to be readded when designs settle

* update table colors

* make consistent with tree and future design

* fix lint

Author: LFDanLu

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

@@ -152,43 +152,6 @@ export const TreeSelection: StoryObj<typeof TreeExample> = {
   }
 };
 
-export const TreeIsDetached: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsEmphasized: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isEmphasized: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsDetachedIsEmphasized: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    isEmphasized: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsDetachedMobile: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
 interface TreeViewItemType {
   id: string,
   name: string,

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

@@ -908,7 +908,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                 </>
               }
               {selectionMode === 'multiple' &&
-                <Checkbox isEmphasized styles={selectAllCheckbox} slot="selection" />
+                <Checkbox styles={selectAllCheckbox} slot="selection" />
               }
             </>
           )}
@@ -1362,8 +1362,8 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
 };
 
 // Use color-mix instead of transparency so sticky cells work correctly.
-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 selectedBackground = colorMix('gray-25', 'gray-900', 7);
+const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
 const rowBackgroundColor = {
   default: {
     default: 'gray-25',
@@ -1462,7 +1462,7 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
         // The `spread` otherProps must be after className in Cell.
         // @ts-ignore
         <Cell isSticky className={checkboxCellStyle}>
-          <Checkbox isEmphasized slot="selection" />
+          <Checkbox slot="selection" />
         </Cell>
       )}
       <Collection items={columns} dependencies={[...dependencies, columns]}>

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

@@ -31,29 +31,23 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
+import {colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
 
 interface S2TreeProps {
-  // Only detatched is supported right now with the current styles from Spectrum
-  // See https://github.com/adobe/react-spectrum/pull/7343 for what remaining combinations are left
-  /** Whether the tree should be displayed with a [detached style](https://spectrum.adobe.com/page/tree-view/#Detached). */
-  isDetached?: boolean,
   /** Handler that is called when a user performs an action on a row. */
-  onAction?: (key: Key) => void,
-  /** Whether the tree should be displayed with a [emphasized style](https://spectrum.adobe.com/page/tree-view/#Emphasis). */
-  isEmphasized?: boolean
+  onAction?: (key: Key) => void
 }
 
 export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
@@ -77,8 +71,6 @@ interface TreeRendererContextValue {
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
 
-let InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean}>({});
-
 // 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
@@ -108,7 +100,7 @@ const tree = style({
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
 export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;
+  let {children, UNSAFE_className, UNSAFE_style} = props;
   let scale = useScale();
 
   let renderer;
@@ -122,48 +114,32 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
-        rowHeight: scale === 'large' ? 50 : 40,
-        gap: isDetached ? 2 : 0
+        rowHeight: scale === 'large' ? 50 : 40
       }}>
       <TreeRendererContext.Provider value={{renderer}}>
-        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
-          <Tree
-            {...props}
-            style={UNSAFE_style}
-            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}
-            selectionBehavior="toggle"
-            ref={domRef}>
-            {props.children}
-          </Tree>
-        </InternalTreeContext.Provider>
+        <Tree
+          {...props}
+          style={UNSAFE_style}
+          className={renderProps => (UNSAFE_className ?? '') + tree({...renderProps}, props.styles)}
+          selectionBehavior="toggle"
+          ref={domRef}>
+          {props.children}
+        </Tree>
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
 });
 
-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: '--s2-container-bg',
   isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),
   isHovered: colorMix('gray-25', 'gray-900', 7),
   isPressed: colorMix('gray-25', 'gray-900', 10),
   isSelected: {
     default: colorMix('gray-25', 'gray-900', 7),
-    isEmphasized: selectedBackground,
-    isFocusVisibleWithin: {
-      default: colorMix('gray-25', 'gray-900', 10),
-      isEmphasized: selectedActiveBackground
-    },
-    isHovered: {
-      default: colorMix('gray-25', 'gray-900', 10),
-      isEmphasized: selectedActiveBackground
-    },
-    isPressed: {
-      default: colorMix('gray-25', 'gray-900', 10),
-      isEmphasized: selectedActiveBackground
-    }
+    isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 10),
+    isHovered: colorMix('gray-25', 'gray-900', 10),
+    isPressed: colorMix('gray-25', 'gray-900', 10)
   },
   forcedColors: {
     default: 'Background'
@@ -230,21 +206,6 @@ const treeCellGrid = style({
       default: 'focus-ring',
       forcedColors: 'Highlight'
     }
-  },
-  borderColor: {
-    isDetached: {
-      default: 'transparent',
-      isSelected: '--rowSelectedBorderColor'
-    }
-  },
-  borderWidth: {
-    isDetached: 1
-  },
-  borderRadius: {
-    isDetached: 'default'
-  },
-  borderStyle: {
-    isDetached: 'solid'
   }
 });
 
@@ -282,17 +243,6 @@ const treeActionMenu = style({
   gridArea: 'actionmenu'
 });
 
-const cellFocus = {
-  outlineStyle: {
-    default: 'none',
-    isFocusVisible: 'solid'
-  },
-  outlineOffset: -2,
-  outlineWidth: 2,
-  outlineColor: 'focus-ring',
-  borderRadius: '[6px]'
-} as const;
-
 const treeRowFocusIndicator = raw(`
   &:before {
     content: "";
@@ -312,15 +262,14 @@ export const TreeViewItem = (props: TreeViewItemProps): ReactNode => {
   let {
     href
   } = props;
-  let {isDetached, isEmphasized} = useContext(InternalTreeContext);
 
   return (
     <TreeItem
       {...props}
       className={(renderProps) => treeRow({
         ...renderProps,
-        isLink: !!href, isEmphasized
-      }) + (renderProps.isFocusVisible && !isDetached ? ' ' + treeRowFocusIndicator : '')} />
+        isLink: !!href
+      }) + (renderProps.isFocusVisible ? ' ' + treeRowFocusIndicator : '')} />
   );
 };
 
@@ -333,12 +282,11 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
   let {
     children
   } = props;
-  let {isDetached, isEmphasized} = useContext(InternalTreeContext);
   let scale = useScale();
 
   return (
     <TreeItemContent>
-      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {
+      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isSelected, id, state}) => {
         let isNextSelected = false;
         let isNextFocused = false;
         let keyAfter = state.collection.getKeyAfter(id);
@@ -347,13 +295,11 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
         }
         let isFirst = state.collection.getFirstKey() === id;
         return (
-          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused, isDetached})}>
+          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused})}>
             {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
               // TODO: add transition?
               <div className={treeCheckbox}>
-                <Checkbox
-                  isEmphasized={isEmphasized}
-                  slot="selection" />
+                <Checkbox slot="selection" />
               </div>
             )}
             <div
@@ -374,7 +320,6 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
               ]}>
               {typeof children === 'string' ? <Text>{children}</Text> : children}
             </Provider>
-            {isFocusVisible && isDetached && <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />}
           </div>
         );
       }}

packages/dev/s2-docs/pages/s2/TreeView.mdx

@@ -14,7 +14,7 @@ export const description = 'Displays hierarchical data with selection and collap
 
 <PageDescription>{docs.exports.TreeView.description}</PageDescription>
 
-```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode', 'isDetached', 'isEmphasized']} initialProps={{selectionMode: 'multiple'}} type="s2"
+```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="s2"
 import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
 
 <TreeView