Fix S2 Dialog, TagGroup, and LinkButton (#7081)

* Fix Dialog and TagGroup using the wrong ImageContext

* Fix text slot in LinkButton

* lint

* Fix when a card collection has no previews

---------

Co-authored-by: Rob Snow <[email protected]>

Author: devongovett

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

@@ -64,13 +64,14 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
 export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
 export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
+const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const button = style<ButtonRenderProps & ButtonStyleProps>({
   ...focusRing(),
   position: 'relative',
   display: 'flex',
   alignItems: {
     default: 'baseline',
-    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': 'center'
+    [iconOnly]: 'center'
   },
   justifyContent: 'center',
   textAlign: 'start',
@@ -80,19 +81,19 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
   userSelect: 'none',
   minHeight: 'control',
   minWidth: {
-    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': 'control'
+    [iconOnly]: 'control'
   },
   borderRadius: 'pill',
   boxSizing: 'border-box',
   width: 'fit',
   textDecoration: 'none', // for link buttons
   paddingX: {
     default: 'pill',
-    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': 0
+    [iconOnly]: 0
   },
   paddingY: 0,
   aspectRatio: {
-    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': 'square'
+    [iconOnly]: 'square'
   },
   transition: 'default',
   borderStyle: 'solid',
@@ -110,7 +111,7 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
     type: 'marginTop',
     value: {
       default: fontRelative(-2),
-      ':has([slot=icon]):not(:has([data-rsp-slot=text]))': 0
+      [iconOnly]: 0
     }
   },
   borderColor: {
@@ -331,15 +332,18 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
       <Provider
         values={[
           [SkeletonContext, null],
-          [TextContext, {styles: style({
-            paddingY: '--labelPadding',
-            order: 1,
-            opacity: {
-              default: 1,
-              isProgressVisible: 0
-            }
+          [TextContext, {
+            styles: style({
+              paddingY: '--labelPadding',
+              order: 1,
+              opacity: {
+                default: 1,
+                isProgressVisible: 0
+              }
+            })({isProgressVisible}),
             // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-          })({isProgressVisible}), 'data-rsp-slot': 'text'}],
+            'data-rsp-slot': 'text'
+          }],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({
@@ -406,7 +410,11 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
       <Provider
         values={[
           [SkeletonContext, null],
-          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
+          [TextContext, {
+            styles: style({paddingY: '--labelPadding', order: 1}),
+            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+            'data-rsp-slot': 'text'
+          }],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})

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

@@ -11,7 +11,7 @@
  */
 
 import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
-import {createContext, forwardRef, ImgHTMLAttributes, ReactNode, useContext} from 'react';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {StyleString} from '../style/types';
 import {UnsafeStyles} from './style-utils';
@@ -172,5 +172,3 @@ function Footer(props: ContentProps, ref: DOMRef) {
 
 const _Footer = forwardRef(Footer);
 export {_Footer as Footer};
-
-export const ImageContext = createContext<ContextValue<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>({});

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

@@ -13,9 +13,10 @@
 import {PopoverProps as AriaPopoverProps, composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ButtonGroupContext} from './ButtonGroup';
 import {CloseButton} from './CloseButton';
-import {ContentContext, FooterContext, HeaderContext, HeadingContext, ImageContext} from './Content';
+import {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';
 import {createContext, forwardRef, RefObject, useContext} from 'react';
 import {DOMRef} from '@react-types/shared';
+import {ImageContext} from './Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Modal} from './Modal';
@@ -195,7 +196,7 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
           {/* Hero image */}
           <Provider
             values={[
-              [ImageContext, {className: image}],
+              [ImageContext, {styles: image}],
               [HeadingContext, {isHidden: true}],
               [HeaderContext, {isHidden: true}],
               [ContentContext, {isHidden: true}],

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

@@ -39,10 +39,11 @@ import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro'
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {IconContext} from './Icon';
-import {ImageContext, Text, TextContext} from './Content';
+import {ImageContext} from './Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -573,7 +574,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {
               styles: style({order: 0})
             }],
             [ImageContext, {
-              className: style({
+              styles: style({
                 size: fontRelative(20),
                 flexShrink: 0,
                 order: 0,

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

@@ -69,7 +69,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
     <Card id={item.id} textValue={item.description || item.alt_description}>
       {({size}) => (<>
         <CardPreview>
-          <Image 
+          <Image
             src={item.urls.regular}
             styles={style({
               width: 'full',
@@ -133,7 +133,7 @@ export const Example = (args: CardViewProps<any>, {viewMode}) => {
       {(loadingState === 'loading' || loadingState === 'loadingMore') && (
         <SkeletonCollection>
           {() => (
-            <PhotoCard 
+            <PhotoCard
               item={{
                 id: Math.random(),
                 user: {name: 'Devon Govett', profile_image: {small: ''}},
@@ -159,7 +159,7 @@ Example.args = {
 
 export const Empty = (args: CardViewProps<any>, {viewMode}) => {
   return (
-    <CardView 
+    <CardView
       aria-label="Assets"
       {...args}
       styles={cardViewStyles({viewMode})}
@@ -210,7 +210,7 @@ export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
         `https://api.unsplash.com/topics?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
         {signal}
       );
-      let items = await res.json();
+      let items = (await res.json()).filter((topic: Topic) => !!topic.preview_photos);
       return {items, cursor: items.length ? page + 1 : null};
     }
   });