feat(react-components): Add InfoButton to unstable exports (#25686)

* moving infobutton to unstable

* change files

* updating description

change/@fluentui-react-components-b533a13e-c80c-4f9f-a244-f2f6670310b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Adding InfoButton to unstable.",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-infobutton-409e40d3-73fc-4a7f-8310-df1b2db9abc3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Making the package public and preparing to add to unstable.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -65,6 +65,11 @@ import { FieldProps } from '@fluentui/react-field';
 import { FieldSlots } from '@fluentui/react-field';
 import { FieldState } from '@fluentui/react-field';
 import { getFieldClassNames } from '@fluentui/react-field';
+import { InfoButton } from '@fluentui/react-infobutton';
+import { infoButtonClassNames } from '@fluentui/react-infobutton';
+import { InfoButtonProps } from '@fluentui/react-infobutton';
+import { InfoButtonSlots } from '@fluentui/react-infobutton';
+import { InfoButtonState } from '@fluentui/react-infobutton';
 import { InputField_unstable as InputField } from '@fluentui/react-input';
 import { inputFieldClassNames } from '@fluentui/react-input';
 import { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input';
@@ -112,6 +117,7 @@ import { renderCardPreview_unstable } from '@fluentui/react-card';
 import { renderCombobox_unstable } from '@fluentui/react-combobox';
 import { renderDropdown_unstable } from '@fluentui/react-combobox';
 import { renderField_unstable } from '@fluentui/react-field';
+import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderListbox_unstable } from '@fluentui/react-combobox';
 import { renderOption_unstable } from '@fluentui/react-combobox';
 import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
@@ -237,6 +243,8 @@ import { useDropdown_unstable } from '@fluentui/react-combobox';
 import { useDropdownStyles_unstable } from '@fluentui/react-combobox';
 import { useField_unstable } from '@fluentui/react-field';
 import { useFieldStyles_unstable } from '@fluentui/react-field';
+import { useInfoButton_unstable } from '@fluentui/react-infobutton';
+import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
 import { useIsOverflowGroupVisible } from '@fluentui/react-overflow';
 import { useIsOverflowItemVisible } from '@fluentui/react-overflow';
 import { useListbox_unstable } from '@fluentui/react-combobox';
@@ -401,6 +409,16 @@ export { FieldState }
 
 export { getFieldClassNames }
 
+export { InfoButton }
+
+export { infoButtonClassNames }
+
+export { InfoButtonProps }
+
+export { InfoButtonSlots }
+
+export { InfoButtonState }
+
 export { InputField }
 
 export { inputFieldClassNames }
@@ -495,6 +513,8 @@ export { renderDropdown_unstable }
 
 export { renderField_unstable }
 
+export { renderInfoButton_unstable }
+
 export { renderListbox_unstable }
 
 export { renderOption_unstable }
@@ -746,6 +766,10 @@ export { useField_unstable }
 
 export { useFieldStyles_unstable }
 
+export { useInfoButton_unstable }
+
+export { useInfoButtonStyles_unstable }
+
 export { useIsOverflowGroupVisible }
 
 export { useIsOverflowItemVisible }

packages/react-components/react-components/package.json

@@ -43,6 +43,7 @@
     "@fluentui/react-divider": "^9.1.4",
     "@fluentui/react-field": "9.0.0-alpha.8",
     "@fluentui/react-image": "^9.0.11",
+    "@fluentui/react-infobutton": "9.0.0-beta.0",
     "@fluentui/react-input": "^9.2.5",
     "@fluentui/react-label": "^9.0.10",
     "@fluentui/react-link": "^9.0.11",

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

@@ -132,6 +132,15 @@ export type {
   ToolbarToggleButtonState,
 } from '@fluentui/react-toolbar';
 
+export {
+  InfoButton,
+  infoButtonClassNames,
+  useInfoButton_unstable,
+  useInfoButtonStyles_unstable,
+  renderInfoButton_unstable,
+} from '@fluentui/react-infobutton';
+export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from '@fluentui/react-infobutton';
+
 export {
   Overflow,
   OverflowItem,

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

@@ -2,4 +2,28 @@
 
 **React Infobutton components for [Fluent UI React](https://react.fluentui.dev/)**
 
+## STATUS: WIP 🚧
+
 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." />;
+};
+```

packages/react-components/react-infobutton/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-alpha.0",
-  "private": true,
+  "version": "9.0.0-beta.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/react-components/react-infobutton/src/stories/Infobutton/InfoButtonDescription.md

@@ -1 +1,14 @@
 InfoButtons provide a way to display additional information about a form field or an area in the UI.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { InfoButton } 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