chore(react-infobutton, react-components): Deprecate InfoButton and I…

…nfoLabel from react-infobutton (microsoft#29605) * chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-inflabel. * change file * api files * update dependency in field * update API * Update change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * deprecating all exported items * requested change --------- Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
micahgodbolt · Oct 24, 2023 · 61d4a29 · 61d4a29
1 parent 601e932
commit 61d4a29
Show file tree

Hide file tree

Showing 20 changed files with 86 additions and 41 deletions.
diff --git a/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-infolabel.",
+  "packageName": "@fluentui/react-components",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json b/change/@fluentui-react-infobutton-86ced938-d1e4-4669-84a3-f0645d576938.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Deprecate InfoLabel and InfoButton from react-infobutton in favor of react-infolabel.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
@@ -9,6 +9,7 @@ export {
 } from '@fluentui/react-alert';
 export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert';
 
+/* eslint-disable deprecation/deprecation */
 export {
   InfoButton,
   infoButtonClassNames,
@@ -29,6 +30,7 @@ export type {
   InfoLabelSlots,
   InfoLabelState,
 } from '@fluentui/react-infobutton';
+/* eslint-enable deprecation/deprecation */
 
 export {
   Virtualizer,

diff --git a/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx b/packages/react-components/react-field/stories/Field/FieldInfo.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Field, Input, LabelProps } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-components/unstable';
+import { InfoLabel } from '@fluentui/react-components';
 
 export const Info = () => (
   <Field

diff --git a/packages/react-components/react-infobutton/README.md b/packages/react-components/react-infobutton/README.md
@@ -2,28 +2,7 @@
 
 **React Infobutton components for [Fluent UI React](https://react.fluentui.dev/)**
 
-## STATUS: WIP 🚧
+# STATUS: Deprecated 🚧
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
-## Usage
-
-To import InfoButton:
-
-```js
-import { InfoButton } from '@fluentui/react-infobutton';
-```
-
-Once the InfoButton component graduates to a production release, the component will be available at:
-
-```js
-import { InfoButton } from '@fluentui/react-components';
-```
-
-### Examples
-
-```jsx
-const InfoButtonExample = () => {
-  return <InfoButton content="This is an InfoButton's content." />;
-};
-```
+This package has been deprecated and must no longer be used. We now provide an InfoLabel component in `@fluentui/react-components` and in `@fluentui/react-infolabel`.
+Please refer to these packages if the component is needed.
diff --git a/packages/react-components/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -16,65 +16,65 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-// @public
+// @public @deprecated
 export const InfoButton: ForwardRefComponent<InfoButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
 
-// @public
+// @public @deprecated
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
     size?: 'small' | 'medium' | 'large';
     inline?: boolean;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type InfoButtonSlots = {
     root: NonNullable<Slot<'button'>>;
     popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;
     info: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
-// @public
+// @public @deprecated
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
 
-// @public
+// @public @deprecated
 export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
 
-// @public
+// @public @deprecated
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
     info?: InfoButtonProps['info'];
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type InfoLabelSlots = {
     root: NonNullable<Slot<'span'>>;
     label: NonNullable<Slot<typeof Label>>;
     infoButton: Slot<typeof InfoButton>;
 };
 
-// @public
+// @public @deprecated
 export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
 
-// @public
+// @public @deprecated
 export const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
 
-// @public
+// @public @deprecated
 export const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
 
-// @public
+// @public @deprecated
 export const useInfoButton_unstable: (props: InfoButtonProps, ref: React_2.Ref<HTMLElement>) => InfoButtonState;
 
 // @public
 export const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
 
-// @public
+// @public @deprecated
 export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
 
-// @public
+// @public @deprecated
 export const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
 
 // (No @packageDocumentation comment for this package)

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import { InfoButton } from './InfoButton';
 import { isConformant } from '../../testing/isConformant';
 import { infoButtonClassNames } from './useInfoButtonStyles.styles';

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
 import { renderInfoButton_unstable } from './renderInfoButton';
@@ -7,6 +8,8 @@ import type { InfoButtonProps } from './InfoButton.types';
 
 /**
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {
   const state = useInfoButton_unstable(props, ref);

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
@@ -1,6 +1,10 @@
+/* eslint-disable deprecation/deprecation */
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export type InfoButtonSlots = {
   root: NonNullable<Slot<'button'>>;
 
@@ -17,6 +21,8 @@ export type InfoButtonSlots = {
 
 /**
  * InfoButton Props
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
   /**
@@ -36,5 +42,7 @@ export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'di
 
 /**
  * State used in rendering InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
@@ -7,6 +8,8 @@ import type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';
 
 /**
  * Render the final JSX of InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const renderInfoButton_unstable = (state: InfoButtonState) => {
   assertSlots<InfoButtonSlots>(state);

diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
 import {
@@ -33,6 +34,8 @@ const popoverSizeMap = {
  *
  * @param props - props from this instance of InfoButton
  * @param ref - reference to root HTMLElement of InfoButton
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {
   const { size = 'medium', inline = true } = props;

diff --git a/...react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts b/...react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts
@@ -1,10 +1,14 @@
+/* eslint-disable deprecation/deprecation */
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {
   root: 'fui-InfoButton',
   // this className won't be used, but it's needed to satisfy the type checker
@@ -14,6 +18,8 @@ export const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {
 
 /**
  * Styles for the root slot
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 const useButtonStyles = makeStyles({
   base: {

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.cy.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /// <reference types="cypress-real-events" />
 
 import * as React from 'react';

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import { fireEvent, render } from '@testing-library/react';

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -8,6 +9,8 @@ import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
 
 /**
  * InfoLabel component
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {
   const state = useInfoLabel_unstable(props, ref);

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts
@@ -1,8 +1,12 @@
+/* eslint-disable deprecation/deprecation */
 import { Label } from '@fluentui/react-label';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import { InfoButton } from '../InfoButton';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { InfoButtonProps } from '../InfoButton';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export type InfoLabelSlots = {
   root: NonNullable<Slot<'span'>>;
 
@@ -27,6 +31,8 @@ export type InfoLabelSlots = {
 
 /**
  * InfoLabel Props
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
   /**
@@ -37,5 +43,7 @@ export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> &
 
 /**
  * State used in rendering InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
@@ -6,6 +7,8 @@ import type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';
 
 /**
  * Render the final JSX of InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const renderInfoLabel_unstable = (state: InfoLabelState) => {
   assertSlots<InfoLabelSlots>(state);

diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 import * as React from 'react';
 
 import { Label } from '@fluentui/react-label';
@@ -13,6 +14,8 @@ import type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';
  *
  * @param props - props from this instance of InfoLabel
  * @param ref - reference to label element of InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {
   const {

diff --git a/...s/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts b/...s/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts
@@ -1,8 +1,12 @@
+/* eslint-disable deprecation/deprecation */
 import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';
 
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */
 export const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {
   root: 'fui-InfoLabel',
   label: 'fui-InfoLabel__label',
@@ -35,6 +39,8 @@ const useInfoButtonStyles = makeStyles({
 
 /**
  * Apply styling to the InfoLabel slots based on the state
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {
   state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);

diff --git a/packages/react-components/react-infobutton/src/index.ts b/packages/react-components/react-infobutton/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable deprecation/deprecation */
 export {
   InfoButton,
   infoButtonClassNames,