Fix InlineAlert heading render in Dialog and use contexts from s2 (#185)

* Fix InlineAlert heading render in Dialog, use contexts from s2 where applicable

* fix tag group

Author: LFDanLu

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ButtonProps, ButtonRenderProps, Button as RACButton, Text, TextContext, Provider} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, Button as RACButton, Text, Provider} from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
 import {pressScale} from './pressScale';
 import {StyleProps, focusRing, getAllowedOverrides} from './style-utils' with { type: 'macro' };
@@ -19,6 +19,7 @@ import {useFocusableRef} from '@react-spectrum/utils';
 import {ReactNode, forwardRef} from 'react';
 import {IconContext} from './Icon';
 import {centerBaseline} from './CenterBaseline';
+import {TextContext} from './Content';
 
 export interface ActionButtonStyleProps {
   /**

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

@@ -12,11 +12,10 @@
 
 import {
   ColorField as AriaColorField,
-  ColorFieldProps as AriaColorFieldProps,
-  FormContext
+  ColorFieldProps as AriaColorFieldProps
 } from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {useFormProps} from './Form';
+import {FormContext, useFormProps} from './Form';
 import {StyleProps, field, getAllowedOverrides} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';

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

@@ -14,8 +14,8 @@ import {filterDOMProps} from '@react-aria/utils';
 import {forwardRef, ReactNode, useContext, createContext} from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IllustrationContext} from './Illustration';
-import {HeadingContext, Provider} from 'react-aria-components';
-import {ContentContext} from './Content';
+import {Provider} from 'react-aria-components';
+import {ContentContext, HeadingContext} from './Content';
 import {DOMProps, DOMRef} from '@react-types/shared';
 import {useDOMRef} from '@react-spectrum/utils';
 import {ButtonGroupContext} from './ButtonGroup';

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

@@ -21,8 +21,8 @@ import {ReactNode, forwardRef, useEffect, useRef} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusRing} from 'react-aria';
-import {Provider, HeadingContext} from 'react-aria-components';
-import {ContentContext} from './Content';
+import {Provider} from 'react-aria-components';
+import {ContentContext, HeadingContext} from './Content';
 import {IconContext} from './Icon';
 
 export interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps {
@@ -183,15 +183,15 @@ let ICONS = {
   neutral: undefined
 };
 
-const heading = style<InlineStylesProps>({
+const heading = style({
   marginTop: 0,
   gridArea: 'heading',
   fontSize: 'ui',
   lineHeight: 'ui',
   color: '[inherit]'
 });
 
-const content = style<InlineStylesProps>({
+const content = style({
   gridArea: 'content',
   fontSize: 'body-sm',
   lineHeight: 'body'
@@ -241,9 +241,7 @@ function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
         className={grid}>
         <Provider
           values={[
-            // @ts-ignore
             [HeadingContext, {className: heading}],
-            // @ts-ignore
             [ContentContext, {className: content}],
             [IconContext, {styles: icon({variant, fillStyle})}]
           ]}>

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

@@ -17,7 +17,7 @@ import {
   TagList,
   TagListProps,
   TagProps as AriaTagProps,
-  TextContext,
+  TextContext as RACTextContext,
   composeRenderProps,
   Provider
 } from 'react-aria-components';
@@ -30,7 +30,7 @@ import {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro'
 import {pressScale} from './pressScale';
 import {createContext, useContext, useRef, forwardRef, ReactNode} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
-import {Text, ImageContext} from './Content';
+import {Text, ImageContext, TextContext} from './Content';
 import {IconContext} from './Icon';
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {forwardRefType} from './types';
@@ -108,7 +108,7 @@ function TagGroup<T extends object>(
   let {size = 'M'} = props;
   let domRef = useDOMRef(ref);
 
-  let helpText = undefined; 
+  let helpText = undefined;
   if (!isInvalid && description) {
     helpText =  (
       <Text
@@ -161,7 +161,7 @@ function TagGroup<T extends object>(
         <FormContext.Provider value={{...formContext, size}}>
           <Provider
             values={[
-              [TextContext, undefined],
+              [RACTextContext, undefined],
               [TagGroupContext, {size, isEmphasized}]
             ]}>
             <TagList