react-teams.md

Home > @fluentui/react-teams

react-teams package

Enumerations

Enumeration	Description
CommunicationOptions	The illustration, text, and actions (if any) to use by default as the content of this component.
EAvatarVariant	The stylistic variants available to the avatars used by these components.
EButtonVariants	The stylistic variants available to the buttons used by these components.
EChartTypes	Each chart type can be previewed in the [Data visualizations page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A4091), or in [this library’s Storybook](https://dev.teams.microsoft.com/storybook/main/index.html?path=/story/components-charts--line-chart).
EInlineInputType	The types of inline inputs.
EInputBlockType	The types of input blocks.
EInputWidth	An inline input’s width.
EWidgetSize	The widget’s target size in the Dashboard’s grid layout.
themeNames

Functions

Function	Description
Chart_2({ title, type, data })
Communication({ option, fields, onInteraction, })
Dashboard({ widgets, preferences, cacheKey, onInteraction, blockOnly, })

Interfaces

Interface	Description
IBoardInteractionUpdateItems	This payload is emitted when the user updates the Board’s items, which occurs when the user creates a new item, deletes an item, or edits an item.
IBoardInteractionUpdateLanes	This payload is emitted when the user updates the Board’s lanes, which occurs when the user adds or removes a lane, or rearranges the lanes.
IBoardItem	An item in a Board component.
IBoardItemCardLayout	The way a Board item’s content is mapped to the adaptive card used to represent the item.
IBoardProps	The Board component can be used to render kanban and task board experiences in your app. Designs for this component are available in the [Task board page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A3840).
IBubbleChartData	A vector datum for bubble charts and related types.
ICellButtonContent	Content for a table cell can be a button. When clicked, buttons emit an Interaction event.
IChartData	The data to display in this Chart.
IChartDataSet	One set of the Chart’s data.
IChartProps	The Chart component can be used to render data visualizations. Designs for this component are available in the [Data visualizations page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A4091).
IChartWidgetContent	A chart widget
ICheckboxesInput	A set of checkboxes.
IColumn
ICommunicationAction	An action rendered at the end of the Communication component’s content.
ICommunicationFields	The specific content to display in the component.
ICommunicationFieldsWithThemedImage	A variation of ICommunicationFields using a themedImage instead of image, which responds to the user’s active theme (light, dark, or high-contrast).
ICommunicationImage	The image to use at the beginning of a Communication component’s content. This does not respond to the user’s active theme, so will remain the same across themes.
ICommunicationThemedImage	The image to use at the beginning of a Communication component’s content. The user’s active theme determines which image to display.
IDashboard	The Dashboard component summarizes disparate types of information into a series of widgets. Designs for this component are available in the [Dashboard page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A3890).
IDashboardInteractionUpdatePreferences	The preferences update payload carries the preferences the developer should store for the user, if appropriate.
IDropdownInput	A single-select dropdown.
IDropdownMultipleInput	A multiple-select dropdown.
IEnumerableInputBase	Properties shared by all enumerable inputs (radio buttons, checkboxes, dropdowns).
IEnumerableInputOption	Properties for each option for Enumerable inputs (radio buttons, checkboxes, dropdowns).
IEnumerableMultipleInputBase	Properties shared by enumerable inputs supporting multiple selections (checkboxes, multiple-select dropdowns).
IEnumerableSingletonInputBase	Properties shared by singleton enumerable inputs (radio buttons, single-select dropdowns).
IFocusableIconProps	An icon which invokes a tooltip when focused.
IFormProps	The Form component can be used to render an interactive Form. Designs for this component are available in the [Forms page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=5271%3A221958).
IFormState	A collection of input values, keyed by input ID. If the input is a block of checkboxes or a dropdown with multiple selection, the value will be an array of option IDs.
IFormWizardStepProps	A Form which is a step in a Wizard has the same inputs as Form with an additional option to override the text of the Wizard’s back button for the current step.
IIconProps	An icon.
IInlineInputsBlock	A block containing a set of one or more text inputs or dropdowns.
IListProps	The List component can be used to display a list of items as a table which can be sorted, filtered, and searched.. Designs for this component are available in the [List page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A3790).
IMultilineTextInput	A multi-line text field.
IPreparedBoardItem	A prepared Board item places the item’s unique key within itself so the item can be handled on its own.
IRadioButtonsInput	A set of radio buttons (from which only one can be selected).
IRow	A collection of data to display for a row, keyed by the column ID except for actions, which contains the collection of actions to make available in the row’s overflow menu.
ISection
ITableProps	The Table component is used by the List template as its primary content.
ITextField	A single-line text field.
ITextInputBase	Properties shared by text inputs (single- and multi-line).
IThemeProviderProps	The Provider’s props configure how these components should be rendered: the color palette to use as themeName, the language as lang, and any languages to make available through translations. Its children should be a single component from this library. flexHeight tells the provider and its children to expect to have a flexible height instead of filling the viewport.
IToolbarProps	The Toolbar component can be used to render a Toolbar above the main view, which can make actions, find, and filter available. Designs for this component are available in the [Toolbar page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A4186).
IWidget	A Dashboard widget is rendered as a card of a certain size, containing the content specified.
IWidgetAction	An action item displayed in a widget’s overflow menu.
IWidgetBodyContent	A piece of content to make available in the widget.
IWidgetLink
IWizardProps	The Wizard component can be used to render a series of Forms. Designs for this component are available in the [Wizard page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A4233).
IWizardSidebarInteraction	An interaction payload triggered when the user clicks on a step in the sidebar. The subject will be in the form of wizard-step__{step_index}, where step_index is the index of the target step.

Variables

Variable	Description
Board
Form
List
Provider
Table
Toolbar
Wizard

Type Aliases

Type Alias	Description
actionKey
TAction	An action a user can apply to an entity.
TActionGroups	A collection of action groups, keyed by group ID.
TActions	A collection of actions, keyed by the action ID.
TBoardInteraction	The interaction payloads emitted by the Board component is either an update of the Board’s lanes, or an update of the Board’s items.
TBoardItems	The collection of a Board’s items, keyed by the items’ unique ID.
TBoardLane	Board lanes currently only need a title.
TBoardLanes	Each Board lane has a unique key, which is associated with the lane’s configuration.
TCacheKey	If undefined, the component should not attempt to save or load properties from local storage. Otherwise this string should be used to identify a component’s intention; user preferences and potentially other properties will be saved to and loaded from the local storage for a user’s client by this key.
TCellAvatarContent	Content for a table cell can be a name with an avatar. The avatar preceeds the name in the inline direction and the name labels the avatar.
TCellContent	The content for a table cell
TCommunicationFields
TCommunicationInteraction	The interaction payload emitted by this component will only come from click interactions on any action buttons specified in the props.
TCommunicationProps	The Communication component can be used to render empty state messages and other combinations of illustration, coaching text, and actions. Designs for this component are available in the [Empty state page of the Microsoft Teams UI Kit](https://www.figma.com/file/EOsbapNvZgEwcA1mShswfh/Microsoft-Teams-UI-Kit-Community?node-id=3789%3A4042).
TDashboardInteraction	A Dashboard will emit onInteraction payloads when the user updates any preferences.
TFormErrors	A collection of error messages associated with inputs, keyed by input ID.
TFormInteraction	An interaction event emitted by the Form component. The payload always contains the Form’s state, which contains the values of all the Form’s inputs.
TInlineField
TInputBlock	A block with a single input which occupies the full width of the form.
TListInteraction	List interactions are proxied from the Table, the Toolbar, or the empty state Communication component. All are clicks on actions.
TLocale	A locale as an [IETF BCP 47 language tag](https://tools.ietf.org/rfc/bcp/bcp47.txt).
TPhrasingContent	An ordered collection of elements that render inline as content.
TSortable	Currently only alphabetical sort is available.
TTableInteraction	An interaction payload emitted by Table.
TTextObject	Text content to display. When the preferred locale is not available, the plain string or the only available locale will be used instead.
TToolbarInteraction	The interaction payload sent when a user clicks on an action in the Toolbar. The action may have one or more subjects if the action applies to entities in the main view, or it may be null if the action has no subject.
TTranslations	A collection of strings for a certain locale. This library fetches translations by a stringKey, which is common between all translations.
TUser	A User entity, which certain components can use as part of their content.
TUsers	A collection of Users, keyed by their unique ID.
TWidgetContent	Widget content specifies a type, then a payload with a special key depending on the type of widget.
TWizardInteraction	An interaction event emitted by the Wizard component. The payload is either proxied from the Form component rendered in the primary area as the active step, or is triggered when the user interacts with any step listed in the sidebar.