diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 6f50359bcd9fe8..f2d8c9f86290e4 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -249,7 +249,7 @@ packages/react-components/react-timepicker-compat-preview @microsoft/teams-prg
packages/react-components/react-rating-preview @microsoft/cxe-red @tomi-msft
packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg
packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow
-packages/react-components/react-infolabel-preview @microsoft/cxe-red @sopranopillow
+packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow
# <%= NX-CODEOWNER-PLACEHOLDER %>
## Components
diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
index 6941dfc8843b10..84b1d46fc91ba7 100644
--- a/apps/public-docsite-v9/package.json
+++ b/apps/public-docsite-v9/package.json
@@ -42,7 +42,6 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-window": "^1.8.6",
- "tslib": "^2.1.0",
- "@fluentui/react-infolabel-preview": "*"
+ "tslib": "^2.1.0"
}
}
diff --git a/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json b/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json
new file mode 100644
index 00000000000000..d270bdbd4cdf4f
--- /dev/null
+++ b/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Moving react-infolabel to stable.",
+ "packageName": "@fluentui/react-components",
+ "email": "esteban.230@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json b/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json
new file mode 100644
index 00000000000000..5c8fb36dbc6c3a
--- /dev/null
+++ b/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Move InfoLabel to stable.",
+ "packageName": "@fluentui/react-infolabel",
+ "email": "esteban.230@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
index 64060c0bae77ee..dd086ad8ea043a 100644
--- a/packages/react-components/react-components/etc/react-components.api.md
+++ b/packages/react-components/react-components/etc/react-components.api.md
@@ -314,6 +314,11 @@ import { imageClassNames } from '@fluentui/react-image';
import { ImageProps } from '@fluentui/react-image';
import { ImageSlots } from '@fluentui/react-image';
import { ImageState } from '@fluentui/react-image';
+import { InfoLabel } from '@fluentui/react-infolabel';
+import { infoLabelClassNames } from '@fluentui/react-infolabel';
+import { InfoLabelProps } from '@fluentui/react-infolabel';
+import { InfoLabelSlots } from '@fluentui/react-infolabel';
+import { InfoLabelState } from '@fluentui/react-infolabel';
import { Input } from '@fluentui/react-input';
import { inputClassNames } from '@fluentui/react-input';
import { InputOnChangeData } from '@fluentui/react-input';
@@ -594,6 +599,7 @@ import { renderField_unstable } from '@fluentui/react-field';
import { renderFlatTree_unstable } from '@fluentui/react-tree';
import { renderFluentProvider_unstable } from '@fluentui/react-provider';
import { renderImage_unstable } from '@fluentui/react-image';
+import { renderInfoLabel_unstable } from '@fluentui/react-infolabel';
import { renderInput_unstable } from '@fluentui/react-input';
import { renderInteractionTag_unstable } from '@fluentui/react-tags';
import { renderInteractionTagPrimary_unstable } from '@fluentui/react-tags';
@@ -1087,6 +1093,8 @@ import { useHeadlessFlatTree_unstable } from '@fluentui/react-tree';
import { useId } from '@fluentui/react-utilities';
import { useImage_unstable } from '@fluentui/react-image';
import { useImageStyles_unstable } from '@fluentui/react-image';
+import { useInfoLabel_unstable } from '@fluentui/react-infolabel';
+import { useInfoLabelStyles_unstable } from '@fluentui/react-infolabel';
import { useInput_unstable } from '@fluentui/react-input';
import { useInputStyles_unstable } from '@fluentui/react-input';
import { useInteractionTag_unstable } from '@fluentui/react-tags';
@@ -1915,6 +1923,16 @@ export { ImageSlots }
export { ImageState }
+export { InfoLabel }
+
+export { infoLabelClassNames }
+
+export { InfoLabelProps }
+
+export { InfoLabelSlots }
+
+export { InfoLabelState }
+
export { Input }
export { inputClassNames }
@@ -2475,6 +2493,8 @@ export { renderFluentProvider_unstable }
export { renderImage_unstable }
+export { renderInfoLabel_unstable }
+
export { renderInput_unstable }
export { renderInteractionTag_unstable }
@@ -3461,6 +3481,10 @@ export { useImage_unstable }
export { useImageStyles_unstable }
+export { useInfoLabel_unstable }
+
+export { useInfoLabelStyles_unstable }
+
export { useInput_unstable }
export { useInputStyles_unstable }
diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json
index 54086736ac820c..f1386fa362f2ac 100644
--- a/packages/react-components/react-components/package.json
+++ b/packages/react-components/react-components/package.json
@@ -45,6 +45,7 @@
"@fluentui/react-field": "^9.1.38",
"@fluentui/react-image": "^9.1.43",
"@fluentui/react-infobutton": "9.0.0-beta.71",
+ "@fluentui/react-infolabel": "9.0.0-alpha.0",
"@fluentui/react-input": "^9.4.48",
"@fluentui/react-label": "^9.1.46",
"@fluentui/react-link": "^9.1.29",
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 7bd69278ad1c8f..4f9b3f0c5babd7 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -1414,3 +1414,12 @@ export type {
MessageBarGroupSlots,
MessageBarGroupState,
} from '@fluentui/react-message-bar';
+
+export {
+ InfoLabel,
+ infoLabelClassNames,
+ renderInfoLabel_unstable,
+ useInfoLabelStyles_unstable,
+ useInfoLabel_unstable,
+} from '@fluentui/react-infolabel';
+export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from '@fluentui/react-infolabel';
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md
deleted file mode 100644
index d1c867587ab35e..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-Best Practices
-
-
-### Don't
-
-- Because the Popover isn't always visible, don't include information in the InfoButton that people must know in order to complete the field.
-
-
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
deleted file mode 100644
index 76a4ab5c344a9f..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import { Link } from '@fluentui/react-components';
-import { InfoLabel, InfoLabelProps } from '@fluentui/react-components/unstable';
-
-export const Default = (props: Partial) => (
-
- This is example information for an InfoButton. Learn more
-
- }
- {...props}
- >
- Example label
-
-);
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md
deleted file mode 100644
index f57b24810daa51..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md
+++ /dev/null
@@ -1,15 +0,0 @@
-An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties.
-It can be used as a drop-in replacement for Label when an InfoButton is also needed.
-
-
-
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { InfoLabel } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx
deleted file mode 100644
index 573e742dea5720..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import { Field, Input, LabelProps, makeStyles } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-components/unstable';
-
-const useStyles = makeStyles({
- infoLabelSurface: {
- // Since we render the Popover inline and Input uses position: relative, we need to set a zIndex. If we don't,
- // the Popover surface will render behind the input. See #27891 for more details.
- zIndex: 1,
- },
-});
-
-export const InField = () => {
- const styles = useStyles();
-
- return (
- (
-
- Field with info label
-
- ),
- }}
- >
-
-
- );
-};
-
-InField.storyName = 'In a Field';
-InField.parameters = {
- docs: {
- description: {
- story:
- 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' +
- '[render function]' +
- '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' +
- 'support. See the code from this story for an example.',
- },
- },
-};
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx
deleted file mode 100644
index 2b12ba0cdc92b9..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import { InfoLabel } from '@fluentui/react-components/unstable';
-
-export const Required = () => (
-
- Required label
-
-);
-
-Required.parameters = {
- docs: {
- description: {
- story: 'When marked `required`, the indicator asterisk is placed before the InfoButton.',
- },
- },
-};
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx
deleted file mode 100644
index fd5b49b9600db5..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-components/unstable';
-
-const useStyles = makeStyles({
- container: {
- alignItems: 'start',
- display: 'flex',
- flexDirection: 'column',
- rowGap: tokens.spacingVerticalL,
- },
-});
-
-export const Size = () => {
- const styles = useStyles();
-
- return (
-
-
- Small label
-
-
- Medium label
-
-
- Large label
-
-
- );
-};
-
-Size.parameters = {
- docs: {
- description: {
- story: "InfoLabel's `size` prop affects the size of the Label and InfoButton. The default size is medium.",
- },
- },
-};
diff --git a/packages/react-components/react-infolabel-preview/README.md b/packages/react-components/react-infolabel-preview/README.md
deleted file mode 100644
index 4e67e5261d2e7b..00000000000000
--- a/packages/react-components/react-infolabel-preview/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# @fluentui/react-infolabel-preview
-
-**React Infolabel components for [Fluent UI React](https://react.fluentui.dev/)**
-
-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.
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDescription.md b/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDescription.md
deleted file mode 100644
index 646d691616acb3..00000000000000
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDescription.md
+++ /dev/null
@@ -1,15 +0,0 @@
-An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties.
-It can be used as a drop-in replacement for Label when an InfoButton is also needed.
-
-
-
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { InfoLabel } from '@fluentui/react-infolabel-preview';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx b/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx
deleted file mode 100644
index 5e7a5f310a1297..00000000000000
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import { Field, Input, LabelProps, makeStyles } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-infolabel-preview';
-
-const useStyles = makeStyles({
- infoLabelSurface: {
- // Since we render the Popover inline and Input uses position: relative, we need to set a zIndex. If we don't,
- // the Popover surface will render behind the input. See #27891 for more details.
- zIndex: 1,
- },
-});
-
-export const InField = () => {
- const styles = useStyles();
-
- return (
- (
-
- Field with info label
-
- ),
- }}
- >
-
-
- );
-};
-
-InField.storyName = 'In a Field';
-InField.parameters = {
- docs: {
- description: {
- story:
- 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' +
- '[render function]' +
- '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' +
- 'support. See the code from this story for an example.',
- },
- },
-};
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelPatternDecision.md b/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelPatternDecision.md
deleted file mode 100644
index 16886c13f7a589..00000000000000
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelPatternDecision.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-InfoButton/InfoLabel Pattern decision
-
-
-### What is an InfoLabel?
-
-An InfoLabel is composed of two components and a wrapper. The main component is a Label and the secondary component is an InfoButton.
-We packaged both components to be able to achieve the correct accessibility out of the box. We automatically link the label to the
-button from the InfoButton component and apply `aria-owns` to the wrapper when the InfoButton's Popover is open. In addition, InfoLabel
-allows you to render only the InfoButton if that's desired. The reason why we don't export InfoButton separately is to avoid having
-issues with `aria-owns`. The PopoverSurface must be linked to the wrapper of the InfoButton when open, not doing so results in a
-violation.
-
-### What is the InfoButton pattern?
-
-The InfoButton pattern is a button that exposes additional information about a field or a concept. To trigger the Popover, the user may
-activate the button by clicking on it and focusing on it and pressing enter or space. When the Popover is open, the focus is programmatically moved
-to the PopoverSurface. To close the Popover, the user may click the button again, click outside the popover, press the escape key, or tab out of
-the PopoverSurface.
-
-#### Why is focus moved to the PopoverSurface?
-
-The reason why we move focus to the PopoverSurface is to allow the user to navigate the Popover with the keyboard. This allows screen reader and keyboard
-users to read the content and interact with it without having to use the mouse and not have unreachable content. We move the focus specifically to the
-PopoverSurface and not the first focusable element because there might be a case where there's a paragraph of text and the first focusable element is at the
-bottom of the Surface. In this case, a screen reader user might not know there's more content above and therefore miss it.
-
-#### Can the InfoButton be opened on focus and not move focus to the PopoverSurface?
-
-InfoButtons can not be opened on focus. The pattern where you have an icon and a tooltip that appears on focus is not the InfoButton pattern. The tooltip
-pattern is meant to have short text and no interaction with the content. We believe that if the content is short or even a few words, it should be included
-in the label or a secondary label. If the content is longer and/or has interaction, then it must be an InfoButton.
-
-> If the tooltip + icon pattern is still needed, refer to the Icon example in tooltip on how to correctly achieve this pattern. Note that when using a
-> tooltip, the content must be short and not have interaction.
-
-
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx b/packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx
deleted file mode 100644
index 5f883e28e12a09..00000000000000
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { InfoLabel } from '@fluentui/react-infolabel-preview';
-
-import descriptionMd from './InfoLabelDescription.md';
-import bestPracticesMd from './InfoLabelBestPractices.md';
-import patternDecision from './InfoLabelPatternDecision.md';
-
-export { Default } from './InfoLabelDefault.stories';
-export { Required } from './InfoLabelRequired.stories';
-export { Size } from './InfoLabelSize.stories';
-export { InField } from './InfoLabelInField.stories';
-
-export default {
- title: 'Preview Components/InfoLabel',
- component: InfoLabel,
- parameters: {
- docs: {
- description: {
- component: [descriptionMd, bestPracticesMd, patternDecision].join('\n'),
- },
- },
- },
-};
diff --git a/packages/react-components/react-infolabel-preview/.babelrc.json b/packages/react-components/react-infolabel/.babelrc.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.babelrc.json
rename to packages/react-components/react-infolabel/.babelrc.json
diff --git a/packages/react-components/react-infolabel-preview/.eslintrc.json b/packages/react-components/react-infolabel/.eslintrc.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.eslintrc.json
rename to packages/react-components/react-infolabel/.eslintrc.json
diff --git a/packages/react-components/react-infolabel-preview/.npmignore b/packages/react-components/react-infolabel/.npmignore
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.npmignore
rename to packages/react-components/react-infolabel/.npmignore
diff --git a/packages/react-components/react-infolabel-preview/.storybook/main.js b/packages/react-components/react-infolabel/.storybook/main.js
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.storybook/main.js
rename to packages/react-components/react-infolabel/.storybook/main.js
diff --git a/packages/react-components/react-infolabel-preview/.storybook/preview.js b/packages/react-components/react-infolabel/.storybook/preview.js
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.storybook/preview.js
rename to packages/react-components/react-infolabel/.storybook/preview.js
diff --git a/packages/react-components/react-infolabel-preview/.storybook/tsconfig.json b/packages/react-components/react-infolabel/.storybook/tsconfig.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.storybook/tsconfig.json
rename to packages/react-components/react-infolabel/.storybook/tsconfig.json
diff --git a/packages/react-components/react-infolabel-preview/.swcrc b/packages/react-components/react-infolabel/.swcrc
similarity index 100%
rename from packages/react-components/react-infolabel-preview/.swcrc
rename to packages/react-components/react-infolabel/.swcrc
diff --git a/packages/react-components/react-infolabel-preview/CHANGELOG.json b/packages/react-components/react-infolabel/CHANGELOG.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/CHANGELOG.json
rename to packages/react-components/react-infolabel/CHANGELOG.json
diff --git a/packages/react-components/react-infolabel-preview/CHANGELOG.md b/packages/react-components/react-infolabel/CHANGELOG.md
similarity index 100%
rename from packages/react-components/react-infolabel-preview/CHANGELOG.md
rename to packages/react-components/react-infolabel/CHANGELOG.md
diff --git a/packages/react-components/react-infolabel-preview/LICENSE b/packages/react-components/react-infolabel/LICENSE
similarity index 100%
rename from packages/react-components/react-infolabel-preview/LICENSE
rename to packages/react-components/react-infolabel/LICENSE
diff --git a/packages/react-components/react-infolabel/README.md b/packages/react-components/react-infolabel/README.md
new file mode 100644
index 00000000000000..712dffdb951768
--- /dev/null
+++ b/packages/react-components/react-infolabel/README.md
@@ -0,0 +1,13 @@
+# @fluentui/react-infolabel
+
+**React Infolabel components for [Fluent UI React](https://react.fluentui.dev/)**
+
+To use InfoLabel import InfoLabel like this:
+
+```jsx
+import { InfoLabel } from '@fluentui/react-components';
+
+const InfoLabelExample = () => {
+ return Sample label;
+};
+```
diff --git a/packages/react-components/react-infolabel-preview/config/api-extractor.json b/packages/react-components/react-infolabel/config/api-extractor.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/config/api-extractor.json
rename to packages/react-components/react-infolabel/config/api-extractor.json
diff --git a/packages/react-components/react-infolabel-preview/config/tests.js b/packages/react-components/react-infolabel/config/tests.js
similarity index 100%
rename from packages/react-components/react-infolabel-preview/config/tests.js
rename to packages/react-components/react-infolabel/config/tests.js
diff --git a/packages/react-components/react-infolabel-preview/docs/Spec.md b/packages/react-components/react-infolabel/docs/Spec.md
similarity index 100%
rename from packages/react-components/react-infolabel-preview/docs/Spec.md
rename to packages/react-components/react-infolabel/docs/Spec.md
diff --git a/packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md b/packages/react-components/react-infolabel/etc/react-infolabel.api.md
similarity index 86%
rename from packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md
rename to packages/react-components/react-infolabel/etc/react-infolabel.api.md
index 35532d3b1aca2d..a4f9dc64ffcd52 100644
--- a/packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md
+++ b/packages/react-components/react-infolabel/etc/react-infolabel.api.md
@@ -1,9 +1,8 @@
-## API Report File for "@fluentui/react-infolabel-preview"
+## API Report File for "@fluentui/react-infolabel"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
-
///
import type { ComponentProps } from '@fluentui/react-utilities';
@@ -24,14 +23,14 @@ export const infoLabelClassNames: SlotClassNames;
// @public
export type InfoLabelProps = ComponentProps, 'label'> & {
- info?: InfoButtonProps['info'];
+ info?: InfoButtonProps['info'];
};
// @public (undocumented)
export type InfoLabelSlots = {
- root: NonNullable>;
- label: NonNullable>;
- infoButton: Slot;
+ root: NonNullable>;
+ label: NonNullable>;
+ infoButton: Slot;
};
// @public
@@ -47,5 +46,4 @@ export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref InfoLabelState;
// (No @packageDocumentation comment for this package)
-
```
diff --git a/packages/react-components/react-infolabel-preview/jest.config.js b/packages/react-components/react-infolabel/jest.config.js
similarity index 91%
rename from packages/react-components/react-infolabel-preview/jest.config.js
rename to packages/react-components/react-infolabel/jest.config.js
index 73c3e2678f83c8..3e2234c8dc5c05 100644
--- a/packages/react-components/react-infolabel-preview/jest.config.js
+++ b/packages/react-components/react-infolabel/jest.config.js
@@ -4,7 +4,7 @@
* @type {import('@jest/types').Config.InitialOptions}
*/
module.exports = {
- displayName: 'react-infolabel-preview',
+ displayName: 'react-infolabel',
preset: '../../../jest.preset.js',
transform: {
'^.+\\.tsx?$': [
diff --git a/packages/react-components/react-infolabel-preview/just.config.ts b/packages/react-components/react-infolabel/just.config.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/just.config.ts
rename to packages/react-components/react-infolabel/just.config.ts
diff --git a/packages/react-components/react-infolabel-preview/package.json b/packages/react-components/react-infolabel/package.json
similarity index 96%
rename from packages/react-components/react-infolabel-preview/package.json
rename to packages/react-components/react-infolabel/package.json
index 74b8deea2b2143..4acee781242962 100644
--- a/packages/react-components/react-infolabel-preview/package.json
+++ b/packages/react-components/react-infolabel/package.json
@@ -1,6 +1,6 @@
{
- "name": "@fluentui/react-infolabel-preview",
- "version": "0.1.0",
+ "name": "@fluentui/react-infolabel",
+ "version": "9.0.0-alpha.0",
"description": "InfoLabel component for Fluent UI v9",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
diff --git a/packages/react-components/react-infolabel-preview/project.json b/packages/react-components/react-infolabel/project.json
similarity index 58%
rename from packages/react-components/react-infolabel-preview/project.json
rename to packages/react-components/react-infolabel/project.json
index 86d54995e87f38..84be00e68e4d50 100644
--- a/packages/react-components/react-infolabel-preview/project.json
+++ b/packages/react-components/react-infolabel/project.json
@@ -1,8 +1,8 @@
{
- "name": "@fluentui/react-infolabel-preview",
+ "name": "@fluentui/react-infolabel",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
- "sourceRoot": "packages/react-components/react-infolabel-preview/src",
+ "sourceRoot": "packages/react-components/react-infolabel/src",
"tags": ["platform:web", "vNext"],
"implicitDependencies": []
}
diff --git a/packages/react-components/react-infolabel-preview/src/InfoButton.ts b/packages/react-components/react-infolabel/src/InfoButton.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/InfoButton.ts
rename to packages/react-components/react-infolabel/src/InfoButton.ts
diff --git a/packages/react-components/react-infolabel-preview/src/InfoLabel.ts b/packages/react-components/react-infolabel/src/InfoLabel.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/InfoLabel.ts
rename to packages/react-components/react-infolabel/src/InfoLabel.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/DefaultInfoButtonIcons.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/DefaultInfoButtonIcons.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/DefaultInfoButtonIcons.tsx
rename to packages/react-components/react-infolabel/src/components/InfoButton/DefaultInfoButtonIcons.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.test.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.test.tsx
rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.test.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.tsx
rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.types.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.types.ts
rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.types.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/index.ts b/packages/react-components/react-infolabel/src/components/InfoButton/index.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/index.ts
rename to packages/react-components/react-infolabel/src/components/InfoButton/index.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/renderInfoButton.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/renderInfoButton.tsx
rename to packages/react-components/react-infolabel/src/components/InfoButton/renderInfoButton.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButton.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButton.tsx
rename to packages/react-components/react-infolabel/src/components/InfoButton/useInfoButton.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButtonStyles.styles.ts
rename to packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx
similarity index 97%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx
rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx
index 7b419e4c717b61..684a82a9aa1c5f 100644
--- a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx
+++ b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import { mount as mountBase } from '@cypress/react';
import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme } from '@fluentui/react-theme';
-import { InfoLabel } from '@fluentui/react-infolabel-preview';
+import { InfoLabel } from '@fluentui/react-infolabel';
const mount = (element: JSX.Element) => {
mountBase({element});
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.test.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.test.tsx
rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.test.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.tsx
rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.types.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.types.ts
rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.types.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/index.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/index.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/index.ts
rename to packages/react-components/react-infolabel/src/components/InfoLabel/index.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/renderInfoLabel.tsx
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/renderInfoLabel.tsx
rename to packages/react-components/react-infolabel/src/components/InfoLabel/renderInfoLabel.tsx
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabel.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabel.ts
rename to packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabel.ts
diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabelStyles.styles.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabelStyles.styles.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabelStyles.styles.ts
rename to packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabelStyles.styles.ts
diff --git a/packages/react-components/react-infolabel-preview/src/index.ts b/packages/react-components/react-infolabel/src/index.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/index.ts
rename to packages/react-components/react-infolabel/src/index.ts
diff --git a/packages/react-components/react-infolabel-preview/src/testing/isConformant.ts b/packages/react-components/react-infolabel/src/testing/isConformant.ts
similarity index 100%
rename from packages/react-components/react-infolabel-preview/src/testing/isConformant.ts
rename to packages/react-components/react-infolabel/src/testing/isConformant.ts
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelBestPractices.md b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelBestPractices.md
similarity index 100%
rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelBestPractices.md
rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelBestPractices.md
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx
similarity index 70%
rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx
rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx
index 5e4e2aaafe29d3..b35a9e04363ba6 100644
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
-import { Link } from '@fluentui/react-components';
-import { InfoLabel, InfoLabelProps } from '@fluentui/react-infolabel-preview';
+import { InfoLabel, InfoLabelProps, Link } from '@fluentui/react-components';
export const Default = (props: Partial) => (
(
+ (
+
+ Field with info label
+
+ ),
+ }}
+ >
+
+
+);
+
+InField.storyName = 'In a Field';
+InField.parameters = {
+ docs: {
+ description: {
+ story:
+ 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' +
+ '[render function]' +
+ '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' +
+ 'support. See the code from this story for an example.',
+ },
+ },
+};
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelPatternDecision.md
similarity index 100%
rename from packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md
rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelPatternDecision.md
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx
similarity index 83%
rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx
rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx
index e2038a81bf143e..fcd5eec52df459 100644
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx
+++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { InfoLabel } from '@fluentui/react-infolabel-preview';
+import { InfoLabel } from '@fluentui/react-components';
export const Required = () => (
diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx
similarity index 86%
rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx
rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx
index 61710edb669145..e3b26aeaab408f 100644
--- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx
+++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { InfoLabel } from '@fluentui/react-infolabel-preview';
+import { InfoLabel, makeStyles, tokens } from '@fluentui/react-components';
const useStyles = makeStyles({
container: {
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx
similarity index 85%
rename from packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx
rename to packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx
index a5c3aa291b621d..1426287e4208bc 100644
--- a/packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx
+++ b/packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx
@@ -1,4 +1,4 @@
-import { InfoLabel } from '@fluentui/react-infobutton';
+import { InfoLabel } from '@fluentui/react-components';
import descriptionMd from './InfoLabelDescription.md';
import bestPracticesMd from './InfoLabelBestPractices.md';
@@ -10,7 +10,7 @@ export { Size } from './InfoLabelSize.stories';
export { InField } from './InfoLabelInField.stories';
export default {
- title: 'Preview Components/InfoLabel',
+ title: 'Components/InfoLabel',
component: InfoLabel,
parameters: {
docs: {
diff --git a/packages/react-components/react-infolabel-preview/tsconfig.json b/packages/react-components/react-infolabel/tsconfig.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/tsconfig.json
rename to packages/react-components/react-infolabel/tsconfig.json
diff --git a/packages/react-components/react-infolabel-preview/tsconfig.lib.json b/packages/react-components/react-infolabel/tsconfig.lib.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/tsconfig.lib.json
rename to packages/react-components/react-infolabel/tsconfig.lib.json
diff --git a/packages/react-components/react-infolabel-preview/tsconfig.spec.json b/packages/react-components/react-infolabel/tsconfig.spec.json
similarity index 100%
rename from packages/react-components/react-infolabel-preview/tsconfig.spec.json
rename to packages/react-components/react-infolabel/tsconfig.spec.json
diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json
index 8658aa8d4092e7..8b025a08a06ecc 100644
--- a/tsconfig.base.all.json
+++ b/tsconfig.base.all.json
@@ -147,6 +147,7 @@
"@fluentui/react-storybook-addon-codesandbox": [
"packages/react-components/react-storybook-addon-codesandbox/src/index.ts"
],
+ "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"],
"@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"],
"@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"],
"@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"],
@@ -168,8 +169,7 @@
"@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"],
"@fluentui/tokens": ["packages/tokens/src/index.ts"],
"@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"],
- "@fluentui/react-infolabel-preview": ["packages/react-components/react-infolabel-preview/src/index.ts"],
- "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"]
+ "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"]
}
}
}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 34547e5708eb86..4eae1f386653f4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -46,7 +46,7 @@
"@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"],
"@fluentui/react-image": ["packages/react-components/react-image/src/index.ts"],
"@fluentui/react-infobutton": ["packages/react-components/react-infobutton/src/index.ts"],
- "@fluentui/react-infolabel-preview": ["packages/react-components/react-infolabel-preview/src/index.ts"],
+ "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"],
"@fluentui/react-input": ["packages/react-components/react-input/src/index.ts"],
"@fluentui/react-jsx-runtime": ["packages/react-components/react-jsx-runtime/src/index.ts"],
"@fluentui/react-jsx-runtime/jsx-dev-runtime": [