diff --git a/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json b/change/@fluentui-react-components-21e38204-3b3e-4269-bb2e-ad6a29a8c919.json new file mode 100644 index 00000000000000..cb4c1d3bc6ed3d --- /dev/null +++ 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 new file mode 100644 index 00000000000000..6bd53c0a5943cc --- /dev/null +++ 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 index 3cdc2426a02c89..9f683bf65473ea 100644 --- 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 index a783f70fa423ef..396811ce62c487 100644 --- 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 = () => ( { - return ; -}; -``` +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 index eaef9267d548d4..c9d80fc87725c7 100644 --- 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; -// @public (undocumented) +// @public @deprecated (undocumented) export const infoButtonClassNames: SlotClassNames; -// @public +// @public @deprecated export type InfoButtonProps = Omit>, 'disabled'> & { size?: 'small' | 'medium' | 'large'; inline?: boolean; }; -// @public (undocumented) +// @public @deprecated (undocumented) export type InfoButtonSlots = { root: NonNullable>; popover: NonNullable>>>; info: NonNullable>; }; -// @public +// @public @deprecated export type InfoButtonState = ComponentState & Required>; -// @public +// @public @deprecated export const InfoLabel: ForwardRefComponent; -// @public (undocumented) +// @public @deprecated (undocumented) export const infoLabelClassNames: SlotClassNames; -// @public +// @public @deprecated export type InfoLabelProps = ComponentProps, 'label'> & { info?: InfoButtonProps['info']; }; -// @public (undocumented) +// @public @deprecated (undocumented) export type InfoLabelSlots = { root: NonNullable>; label: NonNullable>; infoButton: Slot; }; -// @public +// @public @deprecated export type InfoLabelState = ComponentState & Pick; -// @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) => InfoButtonState; // @public export const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState; -// @public +// @public @deprecated export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref) => 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 index 68c1fb065394c9..29174140eaa51b 100644 --- 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 index 626c887e3503f6..bfaa837a44d731 100644 --- 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 = 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 index d6327f0f00f959..a678c59a85831d 100644 --- 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>; @@ -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>, 'disabled'> & { /** @@ -36,5 +42,7 @@ export type InfoButtonProps = Omit>, '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 & Required>; diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx index 030e5e7e00ef3e..d7eeff7f4a4ed2 100644 --- 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(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 index ddef14e305557c..92918753e8ca46 100644 --- 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): InfoButtonState => { const { size = 'medium', inline = true } = props; diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts index 79fecc9c72d473..52447d92506305 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts +++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts @@ -1,3 +1,4 @@ +/* eslint-disable deprecation/deprecation */ import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; @@ -5,6 +6,9 @@ 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 = { 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 = { /** * 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 index f251f54f816da6..0021bc1ba9edfb 100644 --- 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 */ /// 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 index 15b0bd31454d92..811b3431c0499b 100644 --- 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 index 69b12ad1e0577c..83cb331526ba93 100644 --- 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 = 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 index f35a9f99533dff..18dcd839170d03 100644 --- 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>; @@ -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, 'label'> & { /** @@ -37,5 +43,7 @@ export type InfoLabelProps = ComponentProps, '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 & Pick; diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx index ebb947675bd8cc..486ae6bdb001fb 100644 --- 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(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 index 16d396cc600669..0512b7cb2aa03f 100644 --- 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): InfoLabelState => { const { diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts index 100f087f9fdec2..7327e19bc2e54a 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts +++ b/packages/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 = { 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 index 2f13cdd25b29d4..463d77df095f53 100644 --- 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,