chore(compat): add deprecation notice for all components (#8368)

Author: Lukas742

packages/compat/src/components/Loader/index.tsx

@@ -39,6 +39,8 @@ export interface LoaderPropTypes extends CommonProps {
  *
  * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.
  * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
+ *
+ * @deprecated Please use the `BusyIndicator` component instead.
  */
 const Loader = forwardRef<HTMLDivElement, LoaderPropTypes>((props, ref) => {
   const { className, type = LoaderType.Indeterminate, progress = '0px', slot, style, delay = 0, ...rest } = props;

packages/compat/src/components/OverflowToolbarButton/index.tsx

@@ -25,6 +25,8 @@ export interface OverflowToolbarButtonPropTypes extends Omit<ButtonPropTypes, 'c
  * The `OverflowToolbarButton` represents a push button that shows its text only when in the overflow area of a `Toolbar`.
  *
  * __Note:__ This component is only compatible with the `Toolbar` component from the `@ui5/webcomponents-react-compat` package.
+ *
+ * @deprecated Please use the `Toolbar` component from `@ui5/webcomponents-react` instead. You can achieve the same behavior via `ToolbarItem` and the `:state(overflowed)` CSS pseudo class.
  */
 const OverflowToolbarButton = forwardRef<ButtonDomRef, OverflowToolbarButtonPropTypes>((props, ref) => {
   const { children, ...rest } = props;

packages/compat/src/components/OverflowToolbarToggleButton/index.tsx

@@ -28,6 +28,8 @@ export interface OverflowToolbarToggleButtonPropTypes extends Omit<ToggleButtonP
  * The `OverflowToolbarToggleButton` represents a toggle button that shows its text only when in the overflow area of a `Toolbar`.
  *
  * __Note:__ This component is only compatible with the `Toolbar` component from the `@ui5/webcomponents-react-compat` package.
+ *
+ * @deprecated Please use the `Toolbar` component from `@ui5/webcomponents-react` instead. You can achieve the same behavior via `ToolbarItem` and the `:state(overflowed)` CSS pseudo class.
  */
 const OverflowToolbarToggleButton = forwardRef<ToggleButtonDomRef, OverflowToolbarToggleButtonPropTypes>(
   (props, ref) => {

packages/compat/src/components/Toolbar/index.tsx

@@ -143,6 +143,8 @@ const OVERFLOW_BUTTON_WIDTH = 36 + 8 + 8; // width + padding end + spacing start
  * __Note:__ To prevent duplicate child `id`s in the DOM, all child `id`s get an `-overflow` suffix. This is especially important when popovers are opened by id.
  *
  * __Note:__ When using React 19 with `StrictMode` enabled, overflow behavior may not work reliably. This only affects development mode, as `StrictMode` is not applied in production.
+ *
+ * @deprecated Please use the `Toolbar` component from `@ui5/webcomponents-react` instead.
  */
 const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   const {

packages/compat/src/components/ToolbarSeparator/index.tsx

@@ -12,6 +12,8 @@ export type ToolbarSeparatorPropTypes = CommonProps;
  * Creates a visual separator between the preceding and succeeding `Toolbar` item.
  *
  * __Note:__ This component is only compatible with the `Toolbar` component from the `@ui5/webcomponents-react-compat` package.
+ *
+ * @deprecated Please use the `Toolbar` component from `@ui5/webcomponents-react` instead.
  */
 const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorPropTypes>((props, ref) => {
   const { style, className, ...rest } = props;

packages/compat/src/components/ToolbarSpacer/index.tsx

@@ -6,6 +6,8 @@ export type ToolbarSpacerPropTypes = CommonProps;
  * Adds horizontal space between the items used within a `Toolbar`.
  *
  * __Note:__ This component is only compatible with the `Toolbar` component from the `@ui5/webcomponents-react-compat` package.
+ *
+ * @deprecated Please use the `Toolbar` component from `@ui5/webcomponents-react` instead.
  */
 const ToolbarSpacer = forwardRef<HTMLSpanElement, ToolbarSpacerPropTypes>((props, ref) => {
   return <span ref={ref} style={{ flexGrow: 1 }} className="spacer" {...props} data-component-name="ToolbarSpacer" />;