chore: add notification badge to chromatic (#8068)

* chore: add notification badge to chromatic

* fix lint

Author: yihuiliao

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

@@ -11,7 +11,7 @@
  */
 
 import {ActionButton, Text} from '../src';
-import {Fonts, UnsafeClassName} from '../stories/ActionButton.stories';
+import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButton.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import type {Meta} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
@@ -52,7 +52,7 @@ const Template = (args) => {
         let button = <ActionButton key={key} data-testid={fullComboName} {...otherArgs} {...c}>{children ? children : key}</ActionButton>;
         if (c.staticColor != null) {
           return (
-            <StaticColorProvider staticColor={c.staticColor}>
+            <StaticColorProvider key={`static-${key}`} staticColor={c.staticColor}>
               {button}
             </StaticColorProvider>
           );
@@ -82,4 +82,4 @@ export const IconOnly = {
   }
 };
 
-export {Fonts, UnsafeClassName};
+export {Fonts, UnsafeClassName, NotificationBadges};

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

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {Meta, StoryObj} from '@storybook/react';
+import {NotificationBadge} from '../src/NotificationBadge';
+import {StaticColorDecorator} from '../stories/utils';
+
+const meta: Meta<typeof NotificationBadge> = {
+  component: NotificationBadge,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  decorators: [StaticColorDecorator],
+  title: 'S2 Chromatic/NotificationBadge'
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBadge>;
+export const Example: Story = {
+  render: (args) => {
+    return (
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 8, maxWidth: '600px'}}>
+        <NotificationBadge {...args} />
+        <NotificationBadge {...args} value={1} />
+        <NotificationBadge {...args} value={24} />
+        <NotificationBadge {...args} value={100} />
+      </div>
+    );
+  }
+};