feat: S2 ListView HCM

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

@@ -694,7 +694,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
                 }],
                 [TextContext, {
                   slots: {
-                    'description': {styles: description({size})}
+                    'description': {styles: description({size, isFocused: false, isDisabled: false})}
                   }
                 }]
               ]}>

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

@@ -289,9 +289,15 @@ const listitem = style<GridListItemRenderProps & {
   color: {
     default: baseColor('neutral-subdued'),
     isSelected: baseColor('neutral'),
-    isDisabled: {
-      default: 'disabled',
-      forcedColors: 'GrayText'
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      selectionStyle: {
+        highlight: {
+          isSelected: 'HighlightText'
+        }
+      },
+      isDisabled: 'GrayText'
     }
   },
   position: 'relative',
@@ -346,12 +352,14 @@ const listitem = style<GridListItemRenderProps & {
   borderColor: {
     default: '--borderColor',
     isNextSelected: 'transparent',
-    isSelected: 'transparent'
+    isSelected: 'transparent',
+    forcedColors: 'ButtonBorder'
   },
   '--radius': {
     type: 'borderTopStartRadius',
     value: 'default'
-  }
+  },
+  forcedColorAdjust: 'none'
 });
 
 const insetBorderRadius = 'calc(var(--radius) - 1px)';
@@ -373,7 +381,8 @@ const listRowBackground = style<GridListItemRenderProps & {
     isSelected: '[-1px]',
     // Don't overlap focus ring of row above.
     isPrevSelected: 0,
-    isFirstItem: 0
+    isFirstItem: 0,
+    forcedColors: 0
   },
   left: 0,
   right: 0,
@@ -412,7 +421,12 @@ const listRowBackground = style<GridListItemRenderProps & {
       }
     },
     forcedColors: {
-      default: 'Background'
+      default: 'Background',
+      selectionStyle: {
+        highlight: {
+          isSelected: 'Highlight'
+        }
+      }
     }
   },
   borderTopStartRadius: {
@@ -513,9 +527,34 @@ const listRowBackground = style<GridListItemRenderProps & {
   }
 });
 
-let listRowFocusRing = style({
+let listRowFocusRing = style<GridListItemRenderProps & {
+  selectionStyle?: 'highlight' | 'checkbox',
+  isFirstItem?: boolean,
+  isPrevSelected?: boolean,
+  isPrevNotSelected?: boolean,
+  isNextSelected?: boolean,
+  isNextNotSelected?: boolean,
+  isLastItem?: boolean,
+  isQuiet?: boolean
+}>({
   ...focusRing(),
-  outlineOffset: -2,
+  outlineOffset: {
+    default: -2,
+    forcedColors: -3
+  },
+  outlineWidth: {
+    default: 2,
+    forcedColors: '[3px]'
+  },
+  outlineColor: {
+    default: 'focus-ring',
+    forcedColors: {
+      default: 'Highlight',
+      selectionStyle: {
+        highlight: 'ButtonBorder'
+      }
+    }
+  },
   position: 'absolute',
   inset: 0,
   top: {
@@ -567,7 +606,8 @@ export let description = style({
   font: 'ui-sm',
   color: {
     default: baseColor('neutral-subdued'),
-    isDisabled: 'disabled'
+    isDisabled: 'disabled',
+    forcedColors: 'inherit'
   },
   transition: 'default'
 });
@@ -770,7 +810,7 @@ export function ListViewItem(props: ListViewItemProps): ReactNode {
                   isLastItem: isLastItem(id, state)
                 })
               } />
-            {renderProps.isFocusVisible && 
+            {renderProps.isFocusVisible &&
               <div
                 className={listRowFocusRing({
                   ...renderProps,

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

@@ -169,13 +169,11 @@ export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> &
   },
   color: {
     default: baseColor('neutral'),
+    isDisabled: 'disabled',
     forcedColors: {
       default: 'ButtonText',
-      isFocused: 'HighlightText'
-    },
-    isDisabled: {
-      default: 'disabled',
-      forcedColors: 'GrayText'
+      isFocused: 'HighlightText',
+      isDisabled: 'GrayText'
     }
   },
   position: 'relative',
@@ -278,7 +276,7 @@ export let label = style<{size: string}>({
   marginTop: '--labelPadding'
 });
 
-export let description = style({
+export let description = style<{size: 'S' | 'M' | 'L' | 'XL', isFocused: boolean, isDisabled: boolean}>({
   gridArea: 'description',
   font: {
     default: 'ui-sm',
@@ -294,7 +292,10 @@ export let description = style({
     // Ideally this would use the same token as hover, but we don't have access to that here.
     // TODO: should we always consider isHovered and isFocused to be the same thing?
     isFocused: 'gray-800',
-    isDisabled: 'disabled'
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'inherit'
+    }
   },
   transition: 'default'
 });
@@ -304,7 +305,7 @@ let value = style({
   marginStart: 8
 });
 
-let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
+let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean, isFocused: boolean}>({
   gridArea: 'keyboard',
   marginStart: 8,
   font: 'ui',
@@ -313,7 +314,7 @@ let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
     default: 'gray-600',
     isDisabled: 'disabled',
     forcedColors: {
-      isDisabled: 'GrayText'
+      default: 'inherit'
     }
   },
   unicodeBidi: 'plaintext'
@@ -386,7 +387,7 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
           }],
           [TextContext, {
             slots: {
-              'description': {styles: description({size})}
+              'description': {styles: description({size, isFocused: false, isDisabled: false})}
             }
           }],
           [InPopoverContext, false]
@@ -526,6 +527,7 @@ export function MenuItem(props: MenuItemProps): ReactNode {
       {(renderProps) => {
         let {children} = props;
         let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};
+        let isFocused = (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused;
         return (
           <>
             <Provider
@@ -540,11 +542,11 @@ export function MenuItem(props: MenuItemProps): ReactNode {
                   slots: {
                     [DEFAULT_SLOT]: {styles: label({size})},
                     label: {styles: label({size})},
-                    description: {styles: description({...renderProps, size})},
+                    description: {styles: description({...renderProps, size, isFocused})},
                     value: {styles: value}
                   }
                 }],
-                [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
+                [KeyboardContext, {styles: keyboard({...renderProps, size, isFocused})}],
                 [ImageContext, {styles: image({size})}]
               ]}>
               {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}

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

@@ -448,7 +448,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                       }],
                       [TextContext, {
                         slots: {
-                          description: {styles: description({size})}
+                          'description': {styles: description({size, isFocused: false, isDisabled: false})}
                         }
                       }]
                     ]}>

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

@@ -476,7 +476,10 @@ const cellFocus = {
   },
   outlineOffset: -2,
   outlineWidth: 2,
-  outlineColor: 'focus-ring',
+  outlineColor: {
+    default: 'focus-ring',
+    forcedColors: 'Highlight'
+  },
   borderRadius: '[6px]'
 } as const;
 

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

@@ -271,7 +271,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                     }],
                     [TextContext, {
                       slots: {
-                        description: {styles: description({size})}
+                        'description': {styles: description({size, isFocused: false, isDisabled: false})}
                       }
                     }]
                   ]}>

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

@@ -33,7 +33,8 @@ const meta: Meta<typeof ListView> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onSelectionChange'])
+    ...categorizeArgTypes('Events', ['onSelectionChange']),
+    children: {table: {disable: true}}
   },
   title: 'ListView',
   args: {

packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

@@ -366,6 +366,23 @@ describe('style-macro', () => {
     expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12 -macro-dynamic-37zkvn"');
   });
 
+  it('inherits parent default when nested branch has no default key', () => {
+    let {css, js} = testStyle({
+      color: {
+        forcedColors: {
+          default: 'ButtonText',
+          variant: {
+            highlight: {isSelected: 'HighlightText'}
+          }
+        }
+      }
+    });
+    // forcedColors.default should apply when variant=highlight but !isSelected
+    expect(css).toContain('ButtonText');
+    expect(js({variant: 'highlight'})).toMatchInlineSnapshot('"  plb12 -macro-dynamic-1owjb9s"');
+    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot('"  ple12 -macro-dynamic-37zkvn"');
+  });
+
   it('should expand shorthand properties to longhands', () => {
     let {js, css} = testStyle({
       padding: 24

packages/@react-spectrum/s2/style/style-macro.ts

@@ -223,7 +223,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     // We also check if this is globalThis, which happens in non-strict mode bundles.
     // Also allow style to be called as a normal function in tests.
     // @ts-ignore
-     
+
     if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') {
       throw new Error('The style macro must be imported with {type: "macro"}.');
     }
@@ -478,7 +478,14 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
           priority = Math.max(priority, subPriority);
         } else if (val && typeof val === 'object' && !Array.isArray(val)) {
           for (let key in val) {
-            let [subPriority, subRules] = conditionalToRules(val[key], rulePriority, currentConditions, subSkipConditions, fn);
+            let branchValue = val[key];
+            // If this branch has no default, inherit the parent's default so e.g. forcedColors.default
+            // applies when selectionStyle.highlight doesn't define its own default.
+            // eslint-disable-next-line max-depth
+            if (value.default !== undefined && branchValue && typeof branchValue === 'object' && !Array.isArray(branchValue) && !('default' in branchValue)) {
+              branchValue = {default: value.default, ...branchValue};
+            }
+            let [subPriority, subRules] = conditionalToRules(branchValue, rulePriority, currentConditions, subSkipConditions, fn);
             rules.push(...compileCondition(currentConditions, `${condition} === ${JSON.stringify(key)}`, priority, subRules));
             priority = Math.max(priority, subPriority);
           }
@@ -868,7 +875,7 @@ export function raw(this: MacroContext | void, css: string, layer = '_.a'): stri
   // We also check if this is globalThis, which happens in non-strict mode bundles.
   // Also allow style to be called as a normal function in tests.
   // @ts-ignore
-   
+
   if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') {
     throw new Error('The raw macro must be imported with {type: "macro"}.');
   }
@@ -898,7 +905,7 @@ export function keyframes(this: MacroContext | void, css: string): string {
   // We also check if this is globalThis, which happens in non-strict mode bundles.
   // Also allow style to be called as a normal function in tests.
   // @ts-ignore
-   
+
   if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') {
     throw new Error('The keyframes macro must be imported with {type: "macro"}.');
   }