fix: badge text color inside listview (#8449)

* fix: badge text color inside listview

* fix lint

Author: snowystinger

packages/@react-spectrum/badge/src/Badge.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, ClearSlots, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
@@ -47,23 +47,25 @@ export const Badge = forwardRef(function Badge(props: SpectrumBadgeProps, ref: D
         styleProps.className
       )}
       ref={domRef}>
-      <SlotProvider
-        slots={{
-          icon: {
-            size: 'S',
-            UNSAFE_className: classNames(styles, 'spectrum-Badge-icon')
-          },
-          text: {
-            UNSAFE_className: classNames(styles, 'spectrum-Badge-label')
-          }
-        }}>
+      <ClearSlots>
+        <SlotProvider
+          slots={{
+            icon: {
+              size: 'S',
+              UNSAFE_className: classNames(styles, 'spectrum-Badge-icon')
+            },
+            text: {
+              UNSAFE_className: classNames(styles, 'spectrum-Badge-label')
+            }
+          }}>
 
-        {
-          typeof children === 'string' || isTextOnly
-            ? <Text>{children}</Text>
-            : children
-        }
-      </SlotProvider>
+          {
+            typeof children === 'string' || isTextOnly
+              ? <Text>{children}</Text>
+              : children
+          }
+        </SlotProvider>
+      </ClearSlots>
     </span>
   );
 });

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

@@ -2,6 +2,7 @@ import {action} from '@storybook/addon-actions';
 import {ActionBar, ActionBarContainer} from '@react-spectrum/actionbar';
 import {ActionButton, Button} from '@react-spectrum/button';
 import {ActionGroup} from '@react-spectrum/actiongroup';
+import {Badge} from '@react-spectrum/badge';
 import {Content} from '@react-spectrum/view';
 import Copy from '@spectrum-icons/workflow/Copy';
 import Delete from '@spectrum-icons/workflow/Delete';
@@ -144,7 +145,7 @@ export type ListViewStory = StoryObj<typeof ListView>;
 export const Default: ListViewStory = {
   render: (args) => (
     <ListView disabledKeys={['3']} width="250px" aria-label="default ListView" {...args}>
-      <Item key="1" textValue="Adobe Photoshop">Adobe Photoshop</Item>
+      <Item key="1" textValue="Adobe Photoshop"><Badge variant="neutral">2</Badge>Adobe Photoshop</Item>
       <Item key="2" textValue="Adobe Illustrator">Adobe Illustrator</Item>
       <Item key="3" textValue="Adobe XD">Adobe XD</Item>
     </ListView>