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

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": "esteban.230@hotmail.com",
+ "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": "esteban.230@hotmail.com",
+ "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