feat: Deprecate Alert component

change/@fluentui-react-alert-5a7a5604-b13b-4904-b56d-4367ce6d5a81.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: deprecate component and utilities",
+  "packageName": "@fluentui/react-alert",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-c1038377-b836-46fb-9656-909af19aeea8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Deprecating Alert components and utilities.",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-alert/README.md

@@ -1,6 +1,8 @@
 # @fluentui/react-alert
 
-**React Alert component for [Fluent UI React](https://react.fluentui.dev)**
+## DEPRECATED
 
-> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
-> See the [spec.md](./Spec.md) for usage and component API details
+This component is deprecated please use the following components instead:
+
+- Toast - @fluentui/react-toast
+- MessageBar - @fluentui/react-message-bar

packages/react-components/react-alert/etc/react-alert.api.md

@@ -15,36 +15,36 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-// @public
+// @public @deprecated (undocumented)
 export const Alert: ForwardRefComponent<AlertProps>;
 
 // @public (undocumented)
 export const alertClassNames: SlotClassNames<AlertSlots>;
 
-// @public
+// @public @deprecated
 export type AlertProps = ComponentProps<AlertSlots> & {
     intent?: 'info' | 'success' | 'error' | 'warning';
     appearance?: 'primary' | 'inverted';
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type AlertSlots = {
     root: NonNullable<Slot<'div'>>;
     icon?: Slot<'span'>;
     action?: Slot<typeof Button>;
     avatar?: Slot<typeof Avatar>;
 };
 
-// @public
+// @public @deprecated
 export type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const renderAlert_unstable: (state: AlertState) => JSX.Element;
 
-// @public
+// @public @deprecated (undocumented)
 export const useAlert_unstable: (props: AlertProps, ref: React_2.Ref<HTMLElement>) => AlertState;
 
-// @public
+// @public @deprecated (undocumented)
 export const useAlertStyles_unstable: (state: AlertState) => AlertState;
 
 // (No @packageDocumentation comment for this package)

packages/react-components/react-alert/src/components/Alert/Alert.test.tsx

@@ -8,6 +8,7 @@ import { alertClassNames } from './useAlertStyles.styles';
 
 describe('Alert', () => {
   isConformant({
+    // eslint-disable-next-line deprecation/deprecation
     Component: Alert,
     displayName: 'Alert',
     testOptions: {
@@ -31,22 +32,26 @@ describe('Alert', () => {
   // TODO - add tests for aria attributes or any a11y behaviors
 
   it('renders a default state', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert>Test</Alert>);
     expect(screen.getByText('Test')).toBeTruthy();
   });
 
   it('renders an icon', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert icon={<div data-testid="foo" />}>Test</Alert>);
     expect(screen.getByTestId('foo')).toBeTruthy();
   });
 
   it('renders an avatar', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert avatar={{ name: 'John Doe' }}>Test</Alert>);
     expect(screen.getByText('JD')).toBeTruthy();
   });
 
   it('renders a button', () => {
     render(
+      // eslint-disable-next-line deprecation/deprecation
       <Alert action={{ children: 'Undo' }} appearance="inverted">
         Test
       </Alert>,
@@ -56,6 +61,7 @@ describe('Alert', () => {
 
   it('prioritizes icon over intent prop', () => {
     render(
+      // eslint-disable-next-line deprecation/deprecation
       <Alert intent="success" icon={<div data-testid="foo" />}>
         Test
       </Alert>,
@@ -66,9 +72,11 @@ describe('Alert', () => {
   it('sets alert role based on intent', () => {
     render(
       <>
+        {/* eslint-disable-next-line deprecation/deprecation */}
         <Alert intent="error" data-testid="error">
           Test
         </Alert>
+        {/* eslint-disable-next-line deprecation/deprecation */}
         <Alert intent="error" data-testid="warning">
           Test
         </Alert>
@@ -79,6 +87,7 @@ describe('Alert', () => {
   });
 
   it('sets status role by default', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert data-testid="default">Test</Alert>);
     expect(screen.getByTestId('default').getAttribute('role')).toBe('status');
   });

packages/react-components/react-alert/src/components/Alert/Alert.tsx

@@ -8,14 +8,21 @@ import type { AlertProps } from './Alert.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * An Alert component displays a brief, important message to attract a user's attention
  *  without interrupting their current task.
  */
+// eslint-disable-next-line deprecation/deprecation
 export const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {
+  // eslint-disable-next-line deprecation/deprecation
   const state = useAlert_unstable(props, ref);
 
+  // eslint-disable-next-line deprecation/deprecation
   useAlertStyles_unstable(state);
+  // eslint-disable-next-line deprecation/deprecation
   return renderAlert_unstable(state);
+  // eslint-disable-next-line deprecation/deprecation
 }) as ForwardRefComponent<AlertProps>;
 
+// eslint-disable-next-line deprecation/deprecation
 Alert.displayName = 'Alert';

packages/react-components/react-alert/src/components/Alert/Alert.types.ts

@@ -3,6 +3,9 @@ import { Button } from '@fluentui/react-button';
 
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
 export type AlertSlots = {
   /**
    * The root slot is the top level container for the alert component
@@ -24,7 +27,9 @@ export type AlertSlots = {
 
 /**
  * Alert Props
+ * @deprecated please use the Toast or MessageBar component
  */
+// eslint-disable-next-line deprecation/deprecation
 export type AlertProps = ComponentProps<AlertSlots> & {
   /**
    * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop
@@ -40,7 +45,11 @@ export type AlertProps = ComponentProps<AlertSlots> & {
 
 /**
  * State used in rendering Alert
+ * @deprecated please use the Toast or MessageBar component
  */
+// eslint-disable-next-line deprecation/deprecation
 export type AlertState = ComponentState<AlertSlots> &
+  // eslint-disable-next-line deprecation/deprecation
   Pick<AlertProps, 'intent'> &
+  // eslint-disable-next-line deprecation/deprecation
   Required<Pick<AlertProps, 'appearance'>>;

packages/react-components/react-alert/src/components/Alert/renderAlert.tsx

@@ -4,7 +4,12 @@ import { assertSlots } from '@fluentui/react-utilities';
 
 import type { AlertState, AlertSlots } from './Alert.types';
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
+// eslint-disable-next-line deprecation/deprecation
 export const renderAlert_unstable = (state: AlertState) => {
+  // eslint-disable-next-line deprecation/deprecation
   assertSlots<AlertSlots>(state);
 
   return (

packages/react-components/react-alert/src/components/Alert/useAlert.tsx

@@ -8,6 +8,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { AlertProps, AlertState } from './Alert.types';
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Create the state required to render Alert.
  *
  * The returned state can be modified with hooks such as useAlertStyles_unstable,
@@ -16,6 +17,7 @@ import type { AlertProps, AlertState } from './Alert.types';
  * @param props - props from this instance of Alert
  * @param ref - reference to root HTMLElement of Alert
  */
+// eslint-disable-next-line deprecation/deprecation
 export const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {
   const { appearance = 'primary', intent } = props;
 

packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts

@@ -4,6 +4,7 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+// eslint-disable-next-line deprecation/deprecation
 export const alertClassNames: SlotClassNames<AlertSlots> = {
   root: 'fui-Alert',
   icon: 'fui-Alert__icon',
@@ -89,8 +90,10 @@ const useActionButtonColorInverted = makeStyles({
 });
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Apply styling to the Alert slots based on the state
  */
+// eslint-disable-next-line deprecation/deprecation
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   const inverted = state.appearance === 'inverted';
   const styles = useStyles();

packages/react-components/react-alert/src/index.ts

@@ -1,2 +1,4 @@
+// eslint-disable-next-line deprecation/deprecation
 export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';
+// eslint-disable-next-line deprecation/deprecation
 export type { AlertProps, AlertSlots, AlertState } from './Alert';

packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx

@@ -5,9 +5,11 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Action = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="success" action="Undo">
       Message sent
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert
       intent="error"
       action={{

packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx

@@ -6,15 +6,19 @@ const renderAlerts = (appearance: 'primary' | 'inverted') => (
   <div style={{ flexGrow: 1 }}>
     <p>{appearance}</p>
     <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="success" action="Undo">
         Success text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="error" action="Retry">
         Error text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="warning" action="Review">
         Warning text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="info" action="Dismiss">
         Info text
       </Alert>

packages/react-components/react-alert/stories/Alert/AlertAvatar.stories.tsx

@@ -5,9 +5,11 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Avatar = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert action="Undo" avatar={{ name: 'Jane Doe', size: 24, color: 'dark-red' }}>
       sent you a message
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert
       action={{
         icon: <DismissCircleRegular />,

packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx

@@ -2,4 +2,5 @@ import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
 
+// eslint-disable-next-line deprecation/deprecation
 export const Default = () => <Alert>This is a default alert</Alert>;

packages/react-components/react-alert/stories/Alert/AlertIcon.stories.tsx

@@ -4,6 +4,7 @@ import { DeleteRegular } from '@fluentui/react-icons';
 import { Alert } from '@fluentui/react-alert';
 
 export const Icon = () => (
+  // eslint-disable-next-line deprecation/deprecation
   <Alert icon={<DeleteRegular />} action="Undo">
     Chat deleted
   </Alert>

packages/react-components/react-alert/stories/Alert/AlertIntent.stories.tsx

@@ -3,15 +3,19 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Intent = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="success" action="Undo">
       Success text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="error" action="Retry">
       Error text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="warning" action="Review">
       Warning text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="info" action="Dismiss">
       Info text
     </Alert>

packages/react-components/react-components/src/unstable/index.ts

@@ -1,5 +1,6 @@
 // Stub for unstable exports
 
+/* eslint-disable deprecation/deprecation */
 export {
   Alert,
   alertClassNames,
@@ -9,7 +10,6 @@ export {
 } from '@fluentui/react-alert';
 export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert';
 
-/* eslint-disable deprecation/deprecation */
 export {
   InfoButton,
   infoButtonClassNames,