├── .githooks └── pre-commit ├── .github ├── ISSUE_TEMPLATE │ ├── bug.md │ └── config.yml └── workflows │ ├── pr.yml │ ├── prerelease.yml │ ├── release.yml │ └── unrelease.yml ├── .gitignore ├── .storybook ├── main.js ├── manager.js ├── preview.js └── theme.js ├── CHANGELOG.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── SECURITY.md ├── api-extractor.json ├── change └── @fluentui-react-teams-2d43a9c9-6b66-41ac-ab45-1c47f2f489b0.json ├── docs ├── index.md ├── react-teams.actionkey.md ├── react-teams.board.md ├── react-teams.chart_2.md ├── react-teams.communication.md ├── react-teams.communicationoptions.md ├── react-teams.dashboard.md ├── react-teams.eavatarvariant.md ├── react-teams.ebuttonvariants.md ├── react-teams.echarttypes.md ├── react-teams.einlineinputtype.md ├── react-teams.einputblocktype.md ├── react-teams.einputwidth.md ├── react-teams.ewidgetsize.md ├── react-teams.form.md ├── react-teams.iboardinteractionupdateitems.event.md ├── react-teams.iboardinteractionupdateitems.items.md ├── react-teams.iboardinteractionupdateitems.md ├── react-teams.iboardinteractionupdateitems.target.md ├── react-teams.iboardinteractionupdatelanes.event.md ├── react-teams.iboardinteractionupdatelanes.lanes.md ├── react-teams.iboardinteractionupdatelanes.md ├── react-teams.iboardinteractionupdatelanes.target.md ├── react-teams.iboarditem.badges.md ├── react-teams.iboarditem.body.md ├── react-teams.iboarditem.lane.md ├── react-teams.iboarditem.md ├── react-teams.iboarditem.order.md ├── react-teams.iboarditem.preview.md ├── react-teams.iboarditem.subtitle.md ├── react-teams.iboarditem.title.md ├── react-teams.iboarditem.users.md ├── react-teams.iboarditemcardlayout.md ├── react-teams.iboarditemcardlayout.overflowposition.md ├── react-teams.iboarditemcardlayout.previewposition.md ├── react-teams.iboardprops.boarditemcardlayout.md ├── react-teams.iboardprops.emptystate.md ├── react-teams.iboardprops.items.md ├── react-teams.iboardprops.lanes.md ├── react-teams.iboardprops.md ├── react-teams.iboardprops.oninteraction.md ├── react-teams.iboardprops.users.md ├── react-teams.ibubblechartdata.md ├── react-teams.ibubblechartdata.r.md ├── react-teams.ibubblechartdata.x.md ├── react-teams.ibubblechartdata.y.md ├── react-teams.icellbuttoncontent.actionid.md ├── react-teams.icellbuttoncontent.content.md ├── react-teams.icellbuttoncontent.icon.md ├── react-teams.icellbuttoncontent.md ├── react-teams.icellbuttoncontent.type.md ├── react-teams.icellbuttoncontent.variant.md ├── react-teams.ichartdata.datasets.md ├── react-teams.ichartdata.labels.md ├── react-teams.ichartdata.md ├── react-teams.ichartdataset.data.md ├── react-teams.ichartdataset.hidden.md ├── react-teams.ichartdataset.label.md ├── react-teams.ichartdataset.md ├── react-teams.ichartprops.data.md ├── react-teams.ichartprops.md ├── react-teams.ichartprops.title.md ├── react-teams.ichartprops.type.md ├── react-teams.ichartwidgetcontent.chart.md ├── react-teams.ichartwidgetcontent.md ├── react-teams.ichartwidgetcontent.type.md ├── react-teams.icheckboxesinput.md ├── react-teams.icheckboxesinput.type.md ├── react-teams.icolumn.hideable.md ├── react-teams.icolumn.hidepriority.md ├── react-teams.icolumn.icon.md ├── react-teams.icolumn.md ├── react-teams.icolumn.minwidth.md ├── react-teams.icolumn.sortable.md ├── react-teams.icolumn.textselectable.md ├── react-teams.icolumn.title.md ├── react-teams.icommunicationaction.label.md ├── react-teams.icommunicationaction.md ├── react-teams.icommunicationaction.target.md ├── react-teams.icommunicationfields.actions.md ├── react-teams.icommunicationfields.desc.md ├── react-teams.icommunicationfields.image.md ├── react-teams.icommunicationfields.md ├── react-teams.icommunicationfields.title.md ├── react-teams.icommunicationfieldswiththemedimage.md ├── react-teams.icommunicationfieldswiththemedimage.themedimage.md ├── react-teams.icommunicationimage.arialabel.md ├── react-teams.icommunicationimage.md ├── react-teams.icommunicationimage.src.md ├── react-teams.icommunicationthemedimage.md ├── react-teams.icommunicationthemedimage.teamsdarktheme.md ├── react-teams.icommunicationthemedimage.teamshighcontrasttheme.md ├── react-teams.icommunicationthemedimage.teamstheme.md ├── react-teams.idashboard.blockonly.md ├── react-teams.idashboard.cachekey.md ├── react-teams.idashboard.md ├── react-teams.idashboard.oninteraction.md ├── react-teams.idashboard.preferences.md ├── react-teams.idashboard.widgets.md ├── react-teams.idashboardinteractionupdatepreferences.event.md ├── react-teams.idashboardinteractionupdatepreferences.md ├── react-teams.idashboardinteractionupdatepreferences.preferences.md ├── react-teams.idashboardinteractionupdatepreferences.target.md ├── react-teams.idropdowninput.md ├── react-teams.idropdowninput.multiple.md ├── react-teams.idropdowninput.type.md ├── react-teams.idropdowninput.width.md ├── react-teams.idropdownmultipleinput.md ├── react-teams.idropdownmultipleinput.multiple.md ├── react-teams.idropdownmultipleinput.type.md ├── react-teams.idropdownmultipleinput.width.md ├── react-teams.ienumerableinputbase.inputid.md ├── react-teams.ienumerableinputbase.md ├── react-teams.ienumerableinputbase.options.md ├── react-teams.ienumerableinputbase.title.md ├── react-teams.ienumerableinputoption.md ├── react-teams.ienumerableinputoption.title.md ├── react-teams.ienumerableinputoption.value.md ├── react-teams.ienumerablemultipleinputbase.initialvalues.md ├── react-teams.ienumerablemultipleinputbase.md ├── react-teams.ienumerablesingletoninputbase.initialvalue.md ├── react-teams.ienumerablesingletoninputbase.md ├── react-teams.ifocusableiconprops.md ├── react-teams.ifocusableiconprops.tooltip.md ├── react-teams.iformprops.cancel.md ├── react-teams.iformprops.errors.md ├── react-teams.iformprops.headersection.md ├── react-teams.iformprops.md ├── react-teams.iformprops.oninteraction.md ├── react-teams.iformprops.sections.md ├── react-teams.iformprops.submit.md ├── react-teams.iformprops.toperror.md ├── react-teams.iformstate.md ├── react-teams.iformwizardstepprops.back.md ├── react-teams.iformwizardstepprops.md ├── react-teams.iiconprops.icon.md ├── react-teams.iiconprops.md ├── react-teams.iinlineinputsblock.fields.md ├── react-teams.iinlineinputsblock.md ├── react-teams.iinlineinputsblock.type.md ├── react-teams.ilistprops.emptyselectionactiongroups.md ├── react-teams.ilistprops.emptystate.md ├── react-teams.ilistprops.filters.md ├── react-teams.ilistprops.filterssingleselect.md ├── react-teams.ilistprops.find.md ├── react-teams.ilistprops.md ├── react-teams.ilistprops.oninteraction.md ├── react-teams.imultilinetextinput.md ├── react-teams.imultilinetextinput.type.md ├── react-teams.ipreparedboarditem.itemkey.md ├── react-teams.ipreparedboarditem.md ├── react-teams.iradiobuttonsinput.md ├── react-teams.iradiobuttonsinput.type.md ├── react-teams.irow.actions.md ├── react-teams.irow.md ├── react-teams.isection.inputblocks.md ├── react-teams.isection.md ├── react-teams.isection.preface.md ├── react-teams.isection.title.md ├── react-teams.itableprops.columns.md ├── react-teams.itableprops.label.md ├── react-teams.itableprops.md ├── react-teams.itableprops.oninteraction.md ├── react-teams.itableprops.rows.md ├── react-teams.itableprops.selectable.md ├── react-teams.itableprops.truncate.md ├── react-teams.itextfield.md ├── react-teams.itextfield.type.md ├── react-teams.itextfield.width.md ├── react-teams.itextinputbase.initialvalue.md ├── react-teams.itextinputbase.inputid.md ├── react-teams.itextinputbase.md ├── react-teams.itextinputbase.placeholder.md ├── react-teams.itextinputbase.title.md ├── react-teams.ithemeproviderprops.children.md ├── react-teams.ithemeproviderprops.flexheight.md ├── react-teams.ithemeproviderprops.lang.md ├── react-teams.ithemeproviderprops.md ├── react-teams.ithemeproviderprops.themename.md ├── react-teams.ithemeproviderprops.translations.md ├── react-teams.itoolbarprops.actiongroups.md ├── react-teams.itoolbarprops.filters.md ├── react-teams.itoolbarprops.filterssingleselect.md ├── react-teams.itoolbarprops.find.md ├── react-teams.itoolbarprops.md ├── react-teams.itoolbarprops.oninteraction.md ├── react-teams.iwidget.body.md ├── react-teams.iwidget.bodybyfilter.md ├── react-teams.iwidget.desc.md ├── react-teams.iwidget.id.md ├── react-teams.iwidget.initialfilter.md ├── react-teams.iwidget.link.md ├── react-teams.iwidget.md ├── react-teams.iwidget.size.md ├── react-teams.iwidget.title.md ├── react-teams.iwidget.widgetactiongroup.md ├── react-teams.iwidget.widgetfiltergroup.md ├── react-teams.iwidgetaction.icon.md ├── react-teams.iwidgetaction.id.md ├── react-teams.iwidgetaction.md ├── react-teams.iwidgetaction.title.md ├── react-teams.iwidgetbodycontent.content.md ├── react-teams.iwidgetbodycontent.id.md ├── react-teams.iwidgetbodycontent.md ├── react-teams.iwidgetbodycontent.title.md ├── react-teams.iwidgetlink.href.md ├── react-teams.iwidgetlink.md ├── react-teams.iwidgetlink.title.md ├── react-teams.iwizardprops.activestep.md ├── react-teams.iwizardprops.activestepindex.md ├── react-teams.iwizardprops.md ├── react-teams.iwizardprops.oninteraction.md ├── react-teams.iwizardprops.steptitles.md ├── react-teams.iwizardsidebarinteraction.event.md ├── react-teams.iwizardsidebarinteraction.md ├── react-teams.iwizardsidebarinteraction.subject.md ├── react-teams.iwizardsidebarinteraction.target.md ├── react-teams.list.md ├── react-teams.md ├── react-teams.provider.md ├── react-teams.table.md ├── react-teams.taction.md ├── react-teams.tactiongroups.md ├── react-teams.tactions.md ├── react-teams.tboardinteraction.md ├── react-teams.tboarditems.md ├── react-teams.tboardlane.md ├── react-teams.tboardlanes.md ├── react-teams.tcachekey.md ├── react-teams.tcellavatarcontent.md ├── react-teams.tcellcontent.md ├── react-teams.tcommunicationfields.md ├── react-teams.tcommunicationinteraction.md ├── react-teams.tcommunicationprops.md ├── react-teams.tdashboardinteraction.md ├── react-teams.tformerrors.md ├── react-teams.tforminteraction.md ├── react-teams.themenames.md ├── react-teams.tinlinefield.md ├── react-teams.tinputblock.md ├── react-teams.tlistinteraction.md ├── react-teams.tlocale.md ├── react-teams.toolbar.md ├── react-teams.tphrasingcontent.md ├── react-teams.tsortable.md ├── react-teams.ttableinteraction.md ├── react-teams.ttextobject.md ├── react-teams.ttoolbarinteraction.md ├── react-teams.ttranslations.md ├── react-teams.tuser.md ├── react-teams.tusers.md ├── react-teams.twidgetcontent.md ├── react-teams.twizardinteraction.md └── react-teams.wizard.md ├── eslint.config.js ├── jest.config.js ├── just.config.ts ├── lint-staged.config.js ├── package.json ├── pipelines └── azure-pipelines-deploy-storybook.yml ├── pretter.config.js ├── scripts ├── DeleteBlob.ps1 ├── UpdateBlobProperties.ps1 ├── prepare.js └── tasks │ └── storybook.ts ├── src ├── components │ ├── Board │ │ ├── Board.tsx │ │ ├── BoardItem.tsx │ │ ├── BoardItemDialog.tsx │ │ ├── BoardLane.tsx │ │ └── BoardTheme.tsx │ ├── Chart │ │ ├── Chart.tsx │ │ ├── ChartPatterns.ts │ │ ├── ChartTheme.tsx │ │ ├── ChartTypes.ts │ │ ├── ChartUtils.ts │ │ ├── Charts │ │ │ ├── Bar.tsx │ │ │ ├── BarHorizontal.tsx │ │ │ ├── BarHorizontalStacked.tsx │ │ │ ├── BarStacked.tsx │ │ │ ├── Bubble.tsx │ │ │ ├── ChartContainer.tsx │ │ │ ├── Doughnut.tsx │ │ │ ├── EmptyState.tsx │ │ │ ├── ErrorState.tsx │ │ │ ├── Line.tsx │ │ │ ├── LineArea.tsx │ │ │ ├── LineStacked.tsx │ │ │ ├── Pie.tsx │ │ │ └── index.ts │ │ └── index.ts │ ├── Communication │ │ ├── Communication.tsx │ │ ├── CommunicationOptions │ │ │ ├── Default.tsx │ │ │ ├── Empty.tsx │ │ │ ├── Error.tsx │ │ │ ├── Hello.tsx │ │ │ ├── Thanks.tsx │ │ │ ├── Welcome.tsx │ │ │ └── index.ts │ │ ├── CommunicationTypes.ts │ │ ├── Illustration │ │ │ ├── Illustration.tsx │ │ │ └── index.ts │ │ └── index.ts │ ├── Dashboard │ │ ├── Dashboard.tsx │ │ ├── DashboardCallout.tsx │ │ ├── DashboardTheme.tsx │ │ ├── DashboardWidget.tsx │ │ ├── DescriptionList.tsx │ │ ├── Placeholder.tsx │ │ └── Sidebar.tsx │ ├── Form │ │ ├── Form.tsx │ │ ├── FormContent.tsx │ │ ├── FormTheme.tsx │ │ └── index.ts │ ├── List │ │ └── List.tsx │ ├── Table │ │ ├── Table.tsx │ │ ├── TableTheme.tsx │ │ └── tableBreakpoints.ts │ ├── Toolbar │ │ ├── Toolbar.tsx │ │ ├── ToolbarFilter.tsx │ │ ├── ToolbarFind.tsx │ │ └── ToolbarTheme.tsx │ └── Wizard │ │ └── Wizard.tsx ├── index.ts ├── lib │ ├── Avatar.tsx │ ├── CustomScrollArea.tsx │ ├── Icon.tsx │ ├── Phrasing.tsx │ ├── SignifiedOverflow.tsx │ ├── isImage.tsx │ ├── setMultiple.ts │ ├── withStorybookTheme.tsx │ └── withTheme.tsx ├── themes │ ├── constants.ts │ ├── index.ts │ ├── shared │ │ ├── components │ │ │ ├── Avatar │ │ │ │ └── avatar-styles.ts │ │ │ ├── Button │ │ │ │ ├── button-styles.ts │ │ │ │ └── buttonContent-styles.ts │ │ │ ├── Card │ │ │ │ └── card-styles.ts │ │ │ ├── Checkbox │ │ │ │ └── checkbox-styles.ts │ │ │ ├── Dialog │ │ │ │ └── dialog-styles.ts │ │ │ ├── Dropdown │ │ │ │ └── dropdown-styles.ts │ │ │ ├── Form │ │ │ │ └── formMessage-styles.ts │ │ │ ├── Input │ │ │ │ └── input-styles.ts │ │ │ ├── Radiogroup │ │ │ │ └── radiogroupItem-styles.ts │ │ │ ├── Table │ │ │ │ ├── tableCell-styles.ts │ │ │ │ └── tableRow-styles.ts │ │ │ └── Tree │ │ │ │ └── treeTitle-styles.ts │ │ ├── index.ts │ │ └── static-styles.ts │ ├── teams-dark-v2 │ │ ├── components │ │ │ ├── Alert │ │ │ │ └── alert-styles.ts │ │ │ ├── Flex │ │ │ │ └── flex-styles.ts │ │ │ └── Tree │ │ │ │ └── tree-styles.ts │ │ ├── site-variables.ts │ │ ├── static-styles.ts │ │ └── theme.ts │ ├── teams-high-contrast │ │ ├── components │ │ │ ├── Button │ │ │ │ └── button-styles.ts │ │ │ └── Card │ │ │ │ └── card-styles.ts │ │ ├── site-variables.ts │ │ ├── static-styles.ts │ │ └── theme.ts │ └── teams-v2 │ │ ├── components │ │ ├── Alert │ │ │ └── alert-styles.ts │ │ └── Flex │ │ │ └── flex-styles.ts │ │ ├── site-variables.ts │ │ ├── static-styles.ts │ │ └── theme.ts ├── translations │ └── index.ts └── types │ └── types.ts ├── stories ├── Board.stories.tsx ├── Chart.stories.tsx ├── Communication.stories.tsx ├── Dashboard.stories.tsx ├── Form.stories.tsx ├── List.stories.tsx ├── Table.stories.tsx ├── Toolbar.stories.tsx └── Wizard.stories.tsx ├── tsconfig.json └── yarn.lock /.githooks/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | if (!fs.existsSync(path.resolve(__dirname, '../node_modules/lint-staged'))) { 7 | console.error('lint-staged is not installed. Please run `yarn` then try again.'); 8 | process.exit(1); 9 | } else if (!fs.existsSync(path.resolve(__dirname, '../node_modules/lint-staged/bin/lint-staged.js'))) { 10 | // If someone updates from master but doesn't run yarn, by default they'd be unable to commit 11 | // with some cryptic error. Explicitly detect that condition and show a helpful error. 12 | console.error('lint-staged version is out of date! Please run `yarn` to update dependencies.'); 13 | process.exit(1); 14 | } 15 | 16 | require('lint-staged/bin/lint-staged.js'); 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Open a new issue if something isn't working as expected. 4 | --- 5 | 6 | 12 | 13 | ### Reproduction 14 | 15 | 25 | 26 | ### Expected Behavior 27 | 28 | 29 | 30 | ### Actual Behavior 31 | 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true -------------------------------------------------------------------------------- /.github/workflows/pr.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: PR 5 | 6 | on: 7 | pull_request: 8 | branches: 9 | - main 10 | - alpha 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [12.x] 19 | 20 | steps: 21 | - uses: actions/checkout@v2 22 | - name: Use Node.js ${{ matrix.node-version }} 23 | uses: actions/setup-node@v1 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | - run: yarn 27 | - run: yarn lint 28 | - run: yarn checkchange 29 | - run: yarn build 30 | -------------------------------------------------------------------------------- /.github/workflows/prerelease.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Prerelease 5 | 6 | on: 7 | workflow_dispatch: 8 | push: 9 | branches: [alpha] 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [12.x] 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | with: 22 | token: ${{ secrets.REPO_PAT }} 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | - run: yarn 28 | - run: yarn lint 29 | - run: yarn checkchange 30 | - run: yarn build 31 | - run: | 32 | git config user.email "teamsappstudio@microsoft.com" 33 | git config user.name "Automation" 34 | - run: yarn releasealpha -y -n $NPM_TOKEN 35 | env: 36 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 37 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Release 5 | 6 | on: 7 | workflow_dispatch: 8 | push: 9 | branches: [latest] 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [12.x] 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | with: 22 | token: ${{ secrets.REPO_PAT }} 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | - run: yarn 28 | - run: yarn build 29 | - run: | 30 | git config user.email "teamsappstudio@microsoft.com" 31 | git config user.name "Automation" 32 | - run: yarn release -y -n $NPM_TOKEN 33 | env: 34 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | -------------------------------------------------------------------------------- /.github/workflows/unrelease.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Unrelease 5 | 6 | on: 7 | workflow_dispatch: 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [12.x] 16 | 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | token: ${{ secrets.REPO_PAT }} 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | - run: | 26 | git config user.email "teamsappstudio@microsoft.com" 27 | git config user.name "Automation" 28 | - run: npm unpublish @fluentui/react-teams@6.0.0-alpha.1 29 | env: 30 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 31 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const tsconfig = path.resolve(__dirname, "../tsconfig.json"); 3 | 4 | module.exports = { 5 | stories: ["../stories/**/*.stories.+(ts|tsx)"], 6 | addons: [ 7 | "@storybook/addon-actions", 8 | "@storybook/addon-links", 9 | // Disabled because we don't have any documentation in Storybook yet, 10 | // so the Docs tab is just a blank page. 11 | // Keeping the plugin here because we probably should have docs... 12 | // "@storybook/addon-docs", 13 | "@storybook/addon-viewport", 14 | "@storybook/addon-a11y", 15 | "@storybook/addon-knobs", 16 | "@storybook/theming", 17 | "storybook-addon-designs", 18 | ], 19 | typescript: { 20 | check: true, 21 | checkOptions: { tsconfig }, 22 | reactDocgen: "react-docgen-typescript", 23 | reactDocgenTypescriptOptions: { 24 | shouldExtractLiteralValuesFromEnum: true, 25 | propFilter: (prop) => 26 | prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, 27 | }, 28 | }, 29 | core: { 30 | channelOptions: { 31 | allowFunction: false 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | import TeamsPlatformUITheme from "./theme"; 3 | 4 | addons.setConfig({ 5 | theme: TeamsPlatformUITheme, 6 | }); 7 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { withKnobs } from "@storybook/addon-knobs"; 2 | import { withA11y } from "@storybook/addon-a11y"; 3 | import { withStorybookTheme } from "../src/lib/withStorybookTheme"; 4 | 5 | export const parameters = { 6 | options: { 7 | storySort: { 8 | order: [ 9 | "UI Templates", 10 | [ 11 | "Dashboards", 12 | "Lists", 13 | "Forms", 14 | "Task boards", 15 | // "Wizards" 16 | ], 17 | "Components", 18 | "Welcome", 19 | ], 20 | }, 21 | }, 22 | // Remove an additional padding in canvas body (Added in v.6) 23 | layout: "fullscreen", 24 | }; 25 | 26 | export const decorators = [withKnobs, withA11y, withStorybookTheme]; 27 | -------------------------------------------------------------------------------- /.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming/create"; 2 | 3 | export default create({ 4 | base: "light", 5 | brandTitle: "React Teams", 6 | brandImage: "https://i.ibb.co/T1GptPT/react-library-logo-v2.jpg", 7 | 8 | colorPrimary: "#6264A7", 9 | colorSecondary: "#616161", 10 | 11 | // UI 12 | appBg: "#EBEBEB", 13 | appContentBg: "rgb(245, 245, 245)", 14 | appBorderColor: "#E0E0E0", 15 | appBorderRadius: 4, 16 | 17 | // Typography 18 | fontBase: `"Segoe UI", Segoe UI, system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif`, 19 | fontCode: "monospace", 20 | 21 | // Text colors 22 | textColor: "#242424", 23 | textInverseColor: "rgba(255,255,255,0.9)", 24 | 25 | // Toolbar default and active colors 26 | barTextColor: "#616161", 27 | barSelectedColor: "#6264A7", 28 | barBg: "#F5F5F5", 29 | 30 | // Form colors 31 | inputBg: "white", 32 | inputBorder: "#E0E0E0", 33 | inputTextColor: "#242424", 34 | inputBorderRadius: 4, 35 | }); 36 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /change/@fluentui-react-teams-2d43a9c9-6b66-41ac-ab45-1c47f2f489b0.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Release #133, #128 and #127.", 4 | "packageName": "@fluentui/react-teams", 5 | "email": "willshown@microsoft.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) 4 | 5 | ## API Reference 6 | 7 | ## Packages 8 | 9 | | Package | Description | 10 | | --- | --- | 11 | | [@fluentui/react-teams](./react-teams.md) | | 12 | 13 | -------------------------------------------------------------------------------- /docs/react-teams.actionkey.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [actionKey](./react-teams.actionkey.md) 4 | 5 | ## actionKey type 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare type actionKey = string; 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.board.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Board](./react-teams.board.md) 4 | 5 | ## Board variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | Board: (props: IBoardProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.chart_2.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Chart\_2](./react-teams.chart_2.md) 4 | 5 | ## Chart\_2() function 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare function Chart({ title, type, data }: IChartProps): JSX.Element; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | | Parameter | Type | Description | 17 | | --- | --- | --- | 18 | | { title, type, data } | [IChartProps](./react-teams.ichartprops.md) | | 19 | 20 | Returns: 21 | 22 | JSX.Element 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.communication.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Communication](./react-teams.communication.md) 4 | 5 | ## Communication() function 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare function Communication({ option, fields, onInteraction, }: TCommunicationProps): JSX.Element; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | | Parameter | Type | Description | 17 | | --- | --- | --- | 18 | | { option, fields, onInteraction, } | [TCommunicationProps](./react-teams.tcommunicationprops.md) | | 19 | 20 | Returns: 21 | 22 | JSX.Element 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.communicationoptions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [CommunicationOptions](./react-teams.communicationoptions.md) 4 | 5 | ## CommunicationOptions enum 6 | 7 | The illustration, text, and actions (if any) to use by default as the content of this component. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum CommunicationOptions 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | Default | "default" | | 20 | | Empty | "empty" | | 21 | | Error | "error" | | 22 | | Hello | "hello" | | 23 | | Thanks | "thanks" | | 24 | | Welcome | "welcome" | | 25 | 26 | -------------------------------------------------------------------------------- /docs/react-teams.dashboard.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Dashboard](./react-teams.dashboard.md) 4 | 5 | ## Dashboard() function 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare function Dashboard({ widgets, preferences, cacheKey, onInteraction, blockOnly, }: IDashboard): JSX.Element; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | | Parameter | Type | Description | 17 | | --- | --- | --- | 18 | | { widgets, preferences, cacheKey, onInteraction, blockOnly, } | [IDashboard](./react-teams.idashboard.md) | | 19 | 20 | Returns: 21 | 22 | JSX.Element 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.eavatarvariant.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EAvatarVariant](./react-teams.eavatarvariant.md) 4 | 5 | ## EAvatarVariant enum 6 | 7 | The stylistic variants available to the avatars used by these components. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EAvatarVariant 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | bot | "bot" | | 20 | | entity | "entity" | | 21 | | human | "human" | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.ebuttonvariants.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EButtonVariants](./react-teams.ebuttonvariants.md) 4 | 5 | ## EButtonVariants enum 6 | 7 | The stylistic variants available to the buttons used by these components. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EButtonVariants 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | default | "default" | | 20 | | primary | "primary" | | 21 | | text | "text" | | 22 | | tinted | "tinted" | | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.einlineinputtype.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EInlineInputType](./react-teams.einlineinputtype.md) 4 | 5 | ## EInlineInputType enum 6 | 7 | The types of inline inputs. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EInlineInputType 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | dropdown | "dropdown" | | 20 | | text | "text" | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.einputblocktype.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EInputBlockType](./react-teams.einputblocktype.md) 4 | 5 | ## EInputBlockType enum 6 | 7 | The types of input blocks. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EInputBlockType 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | checkboxes | "checkboxes" | | 20 | | dropdown | "dropdown" | | 21 | | inlineInputs | "inline-inputs" | | 22 | | multilineText | "multiline-text" | | 23 | | radioButtons | "radio-buttons" | | 24 | 25 | -------------------------------------------------------------------------------- /docs/react-teams.einputwidth.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EInputWidth](./react-teams.einputwidth.md) 4 | 5 | ## EInputWidth enum 6 | 7 | An inline input’s width. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EInputWidth 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | full | "full" | The input should occupy the full width of the Form | 20 | | split | "split" | The input should share the width with the other inline inputs. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ewidgetsize.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [EWidgetSize](./react-teams.ewidgetsize.md) 4 | 5 | ## EWidgetSize enum 6 | 7 | The widget’s target size in the Dashboard’s grid layout. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare enum EWidgetSize 13 | ``` 14 | 15 | ## Enumeration Members 16 | 17 | | Member | Value | Description | 18 | | --- | --- | --- | 19 | | Box | "box" | The widget will occupy 2×2 grid cells. | 20 | | Double | "double" | The widget will occupy 2×1 grid cells. | 21 | | Single | "single" | The widget will occupy 1×1 grid cells. | 22 | | Triple | "triple" | The widget will occupy 3×1 grid cells. | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.form.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Form](./react-teams.form.md) 4 | 5 | ## Form variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | Form: ({ cancel, errors, headerSection, sections, submit, topError, onInteraction, }: IFormProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdateitems.event.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateItems](./react-teams.iboardinteractionupdateitems.md) > [event](./react-teams.iboardinteractionupdateitems.event.md) 4 | 5 | ## IBoardInteractionUpdateItems.event property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | event: "update"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdateitems.items.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateItems](./react-teams.iboardinteractionupdateitems.md) > [items](./react-teams.iboardinteractionupdateitems.items.md) 4 | 5 | ## IBoardInteractionUpdateItems.items property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | items: IPreparedBoardItems; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdateitems.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateItems](./react-teams.iboardinteractionupdateitems.md) 4 | 5 | ## IBoardInteractionUpdateItems interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IBoardInteractionUpdateItems 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [event](./react-teams.iboardinteractionupdateitems.event.md) | "update" | | 20 | | [items](./react-teams.iboardinteractionupdateitems.items.md) | IPreparedBoardItems | | 21 | | [target](./react-teams.iboardinteractionupdateitems.target.md) | "items" | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdateitems.target.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateItems](./react-teams.iboardinteractionupdateitems.md) > [target](./react-teams.iboardinteractionupdateitems.target.md) 4 | 5 | ## IBoardInteractionUpdateItems.target property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | target: "items"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdatelanes.event.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateLanes](./react-teams.iboardinteractionupdatelanes.md) > [event](./react-teams.iboardinteractionupdatelanes.event.md) 4 | 5 | ## IBoardInteractionUpdateLanes.event property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | event: "update"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdatelanes.lanes.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateLanes](./react-teams.iboardinteractionupdatelanes.md) > [lanes](./react-teams.iboardinteractionupdatelanes.lanes.md) 4 | 5 | ## IBoardInteractionUpdateLanes.lanes property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | lanes: TBoardLanes; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdatelanes.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateLanes](./react-teams.iboardinteractionupdatelanes.md) 4 | 5 | ## IBoardInteractionUpdateLanes interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IBoardInteractionUpdateLanes 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [event](./react-teams.iboardinteractionupdatelanes.event.md) | "update" | | 20 | | [lanes](./react-teams.iboardinteractionupdatelanes.lanes.md) | [TBoardLanes](./react-teams.tboardlanes.md) | | 21 | | [target](./react-teams.iboardinteractionupdatelanes.target.md) | "lanes" | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.iboardinteractionupdatelanes.target.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardInteractionUpdateLanes](./react-teams.iboardinteractionupdatelanes.md) > [target](./react-teams.iboardinteractionupdatelanes.target.md) 4 | 5 | ## IBoardInteractionUpdateLanes.target property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | target: "lanes"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.badges.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [badges](./react-teams.iboarditem.badges.md) 4 | 5 | ## IBoardItem.badges property 6 | 7 | A collection of badges for enumerating specific associations on the item. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | badges?: IBoardItemBadges; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.body.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [body](./react-teams.iboarditem.body.md) 4 | 5 | ## IBoardItem.body property 6 | 7 | The item’s body text, or description. If this is provided as an array of text objects, each one becomes a paragraph with some spacing between. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | body?: TTextObject | TTextObject[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.lane.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [lane](./react-teams.iboarditem.lane.md) 4 | 5 | ## IBoardItem.lane property 6 | 7 | The key of the lane where the item should be displayed. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | lane: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.order.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [order](./react-teams.iboarditem.order.md) 4 | 5 | ## IBoardItem.order property 6 | 7 | A number which indicates where in the lane the item should be rendered. Items are sorted from lowest value to highest value. Items in the same lane do not need unique values for this property, however when unique values are not supplied a specific order is not guaranteed. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | order: number; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.preview.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [preview](./react-teams.iboarditem.preview.md) 4 | 5 | ## IBoardItem.preview property 6 | 7 | A URL to an image representing the item. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | preview?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.subtitle.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [subtitle](./react-teams.iboarditem.subtitle.md) 4 | 5 | ## IBoardItem.subtitle property 6 | 7 | The item’s subtitle. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | subtitle?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [title](./react-teams.iboarditem.title.md) 4 | 5 | ## IBoardItem.title property 6 | 7 | The item’s title. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditem.users.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItem](./react-teams.iboarditem.md) > [users](./react-teams.iboarditem.users.md) 4 | 5 | ## IBoardItem.users property 6 | 7 | An array of keys for users tagged in the item. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | users?: string[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditemcardlayout.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItemCardLayout](./react-teams.iboarditemcardlayout.md) 4 | 5 | ## IBoardItemCardLayout interface 6 | 7 | The way a Board item’s content is mapped to the adaptive card used to represent the item. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IBoardItemCardLayout 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [overflowPosition](./react-teams.iboarditemcardlayout.overflowposition.md) | "preview" \| "header" \| "footer" | Whether the overflow menu’s trigger, a ‘…’ button, should appear: - in the card’s preview, when there is one, or the header when there is no preview - in the card’s header at all times - in the card’s footer at all times (this causes all items to have a footer) | 20 | | [previewPosition](./react-teams.iboarditemcardlayout.previewposition.md) | "top" \| "afterHeader" | Whether the image thumbnail for the item, when there is one, should be displayed at the top of the card, or below the header for the card. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditemcardlayout.overflowposition.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItemCardLayout](./react-teams.iboarditemcardlayout.md) > [overflowPosition](./react-teams.iboarditemcardlayout.overflowposition.md) 4 | 5 | ## IBoardItemCardLayout.overflowPosition property 6 | 7 | Whether the overflow menu’s trigger, a ‘…’ button, should appear: - in the card’s preview, when there is one, or the header when there is no preview - in the card’s header at all times - in the card’s footer at all times (this causes all items to have a footer) 8 | 9 | Signature: 10 | 11 | ```typescript 12 | overflowPosition: "preview" | "header" | "footer"; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboarditemcardlayout.previewposition.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardItemCardLayout](./react-teams.iboarditemcardlayout.md) > [previewPosition](./react-teams.iboarditemcardlayout.previewposition.md) 4 | 5 | ## IBoardItemCardLayout.previewPosition property 6 | 7 | Whether the image thumbnail for the item, when there is one, should be displayed at the top of the card, or below the header for the card. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | previewPosition: "top" | "afterHeader"; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.boarditemcardlayout.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [boardItemCardLayout](./react-teams.iboardprops.boarditemcardlayout.md) 4 | 5 | ## IBoardProps.boardItemCardLayout property 6 | 7 | If the cards representing the Board’s items should be different from the default, that design can be configured here. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | boardItemCardLayout?: IBoardItemCardLayout; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.emptystate.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [emptyState](./react-teams.iboardprops.emptystate.md) 4 | 5 | ## IBoardProps.emptyState property 6 | 7 | The empty state Communication component to render if this Component has no content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | emptyState?: TCommunicationProps; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.items.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [items](./react-teams.iboardprops.items.md) 4 | 5 | ## IBoardProps.items property 6 | 7 | The Board’s items. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | items: TBoardItems; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.lanes.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [lanes](./react-teams.iboardprops.lanes.md) 4 | 5 | ## IBoardProps.lanes property 6 | 7 | The Board’s lanes, or columns. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | lanes: TBoardLanes; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [onInteraction](./react-teams.iboardprops.oninteraction.md) 4 | 5 | ## IBoardProps.onInteraction property 6 | 7 | The Board’s interaction handler, called when the user changes the Board’s items or lanes. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TBoardInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iboardprops.users.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBoardProps](./react-teams.iboardprops.md) > [users](./react-teams.iboardprops.users.md) 4 | 5 | ## IBoardProps.users property 6 | 7 | The users the Board’s items may associate with. To improve performance, this object should contain only the users associated with any items in the Board. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | users: TUsers; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ibubblechartdata.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBubbleChartData](./react-teams.ibubblechartdata.md) 4 | 5 | ## IBubbleChartData interface 6 | 7 | A vector datum for bubble charts and related types. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IBubbleChartData 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [r](./react-teams.ibubblechartdata.r.md) | number | | 20 | | [x](./react-teams.ibubblechartdata.x.md) | number | | 21 | | [y](./react-teams.ibubblechartdata.y.md) | number | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.ibubblechartdata.r.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBubbleChartData](./react-teams.ibubblechartdata.md) > [r](./react-teams.ibubblechartdata.r.md) 4 | 5 | ## IBubbleChartData.r property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | r: number; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ibubblechartdata.x.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBubbleChartData](./react-teams.ibubblechartdata.md) > [x](./react-teams.ibubblechartdata.x.md) 4 | 5 | ## IBubbleChartData.x property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | x: number; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ibubblechartdata.y.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IBubbleChartData](./react-teams.ibubblechartdata.md) > [y](./react-teams.ibubblechartdata.y.md) 4 | 5 | ## IBubbleChartData.y property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | y: number; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.actionid.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) > [actionId](./react-teams.icellbuttoncontent.actionid.md) 4 | 5 | ## ICellButtonContent.actionId property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | actionId: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.content.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) > [content](./react-teams.icellbuttoncontent.content.md) 4 | 5 | ## ICellButtonContent.content property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | content: TTextObject; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.icon.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) > [icon](./react-teams.icellbuttoncontent.icon.md) 4 | 5 | ## ICellButtonContent.icon property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | icon?: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) 4 | 5 | ## ICellButtonContent interface 6 | 7 | Content for a table cell can be a button. When clicked, buttons emit an Interaction event. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICellButtonContent extends Pick 13 | ``` 14 | Extends: Pick<ButtonProps, "iconPosition" \| "disabled" \| "iconOnly"> 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [actionId](./react-teams.icellbuttoncontent.actionid.md) | string | | 21 | | [content](./react-teams.icellbuttoncontent.content.md) | [TTextObject](./react-teams.ttextobject.md) | | 22 | | [icon?](./react-teams.icellbuttoncontent.icon.md) | string | (Optional) | 23 | | [type](./react-teams.icellbuttoncontent.type.md) | "button" | | 24 | | [variant?](./react-teams.icellbuttoncontent.variant.md) | [EButtonVariants](./react-teams.ebuttonvariants.md) | (Optional) | 25 | 26 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) > [type](./react-teams.icellbuttoncontent.type.md) 4 | 5 | ## ICellButtonContent.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: "button"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icellbuttoncontent.variant.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICellButtonContent](./react-teams.icellbuttoncontent.md) > [variant](./react-teams.icellbuttoncontent.variant.md) 4 | 5 | ## ICellButtonContent.variant property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | variant?: EButtonVariants; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdata.datasets.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartData](./react-teams.ichartdata.md) > [datasets](./react-teams.ichartdata.datasets.md) 4 | 5 | ## IChartData.datasets property 6 | 7 | The Chart’s data, grouped into sets. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | datasets: IChartDataSet[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdata.labels.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartData](./react-teams.ichartdata.md) > [labels](./react-teams.ichartdata.labels.md) 4 | 5 | ## IChartData.labels property 6 | 7 | How the x-axis or pie slices should be labeled on the chart, if relevant. Some chart types will not render this label. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | labels: TTextObject | TTextObject[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdata.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartData](./react-teams.ichartdata.md) 4 | 5 | ## IChartData interface 6 | 7 | The data to display in this Chart. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IChartData 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [datasets](./react-teams.ichartdata.datasets.md) | [IChartDataSet](./react-teams.ichartdataset.md)\[\] | The Chart’s data, grouped into sets. | 20 | | [labels](./react-teams.ichartdata.labels.md) | [TTextObject](./react-teams.ttextobject.md) \| [TTextObject](./react-teams.ttextobject.md)\[\] | How the x-axis or pie slices should be labeled on the chart, if relevant. Some chart types will not render this label. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdataset.data.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartDataSet](./react-teams.ichartdataset.md) > [data](./react-teams.ichartdataset.data.md) 4 | 5 | ## IChartDataSet.data property 6 | 7 | The scalar values of the set’s data. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | data: number[] | IBubbleChartData[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdataset.hidden.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartDataSet](./react-teams.ichartdataset.md) > [hidden](./react-teams.ichartdataset.hidden.md) 4 | 5 | ## IChartDataSet.hidden property 6 | 7 | Whether this set should be ignored by the Chart. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | hidden?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdataset.label.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartDataSet](./react-teams.ichartdataset.md) > [label](./react-teams.ichartdataset.label.md) 4 | 5 | ## IChartDataSet.label property 6 | 7 | The label for this set. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | label: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartdataset.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartDataSet](./react-teams.ichartdataset.md) 4 | 5 | ## IChartDataSet interface 6 | 7 | One set of the Chart’s data. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IChartDataSet 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [data](./react-teams.ichartdataset.data.md) | number\[\] \| [IBubbleChartData](./react-teams.ibubblechartdata.md)\[\] | The scalar values of the set’s data. | 20 | | [hidden?](./react-teams.ichartdataset.hidden.md) | boolean | (Optional) Whether this set should be ignored by the Chart. | 21 | | [label](./react-teams.ichartdataset.label.md) | [TTextObject](./react-teams.ttextobject.md) | The label for this set. | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.ichartprops.data.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartProps](./react-teams.ichartprops.md) > [data](./react-teams.ichartprops.data.md) 4 | 5 | ## IChartProps.data property 6 | 7 | The Chart’s data. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | data?: IChartData; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartProps](./react-teams.ichartprops.md) 4 | 5 | ## IChartProps interface 6 | 7 | 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). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IChartProps 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [data?](./react-teams.ichartprops.data.md) | [IChartData](./react-teams.ichartdata.md) | (Optional) The Chart’s data. | 20 | | [title](./react-teams.ichartprops.title.md) | [TTextObject](./react-teams.ttextobject.md) | The chart’s title, displayed above the chart. | 21 | | [type](./react-teams.ichartprops.type.md) | [EChartTypes](./react-teams.echarttypes.md) | Which type of visualization to use to display the Chart’s data. | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.ichartprops.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartProps](./react-teams.ichartprops.md) > [title](./react-teams.ichartprops.title.md) 4 | 5 | ## IChartProps.title property 6 | 7 | The chart’s title, displayed above the chart. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartprops.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartProps](./react-teams.ichartprops.md) > [type](./react-teams.ichartprops.type.md) 4 | 5 | ## IChartProps.type property 6 | 7 | Which type of visualization to use to display the Chart’s data. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | type: EChartTypes; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ichartwidgetcontent.chart.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartWidgetContent](./react-teams.ichartwidgetcontent.md) > [chart](./react-teams.ichartwidgetcontent.chart.md) 4 | 5 | ## IChartWidgetContent.chart property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | chart: IChartProps; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ichartwidgetcontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartWidgetContent](./react-teams.ichartwidgetcontent.md) 4 | 5 | ## IChartWidgetContent interface 6 | 7 | A chart widget 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IChartWidgetContent 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [chart](./react-teams.ichartwidgetcontent.chart.md) | [IChartProps](./react-teams.ichartprops.md) | | 20 | | [type](./react-teams.ichartwidgetcontent.type.md) | "chart" \| string | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ichartwidgetcontent.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IChartWidgetContent](./react-teams.ichartwidgetcontent.md) > [type](./react-teams.ichartwidgetcontent.type.md) 4 | 5 | ## IChartWidgetContent.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: "chart" | string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icheckboxesinput.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICheckboxesInput](./react-teams.icheckboxesinput.md) 4 | 5 | ## ICheckboxesInput interface 6 | 7 | A set of checkboxes. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICheckboxesInput extends IEnumerableMultipleInputBase 13 | ``` 14 | Extends: [IEnumerableMultipleInputBase](./react-teams.ienumerablemultipleinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [type](./react-teams.icheckboxesinput.type.md) | [EInputBlockType.checkboxes](./react-teams.einputblocktype.checkboxes.md) | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.icheckboxesinput.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICheckboxesInput](./react-teams.icheckboxesinput.md) > [type](./react-teams.icheckboxesinput.type.md) 4 | 5 | ## ICheckboxesInput.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInputBlockType.checkboxes; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.hideable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [hideable](./react-teams.icolumn.hideable.md) 4 | 5 | ## IColumn.hideable property 6 | 7 | Whether the column can be hidden when horizontal space is constrained. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | hideable?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.hidepriority.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [hidePriority](./react-teams.icolumn.hidepriority.md) 4 | 5 | ## IColumn.hidePriority property 6 | 7 | Columns with a lower `hidePriority` are hidden before columns with a higher `hidePriority`. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | hidePriority?: number; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.icon.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [icon](./react-teams.icolumn.icon.md) 4 | 5 | ## IColumn.icon property 6 | 7 | The icon to display before the column’s title in the header cell. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | icon?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.minwidth.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [minWidth](./react-teams.icolumn.minwidth.md) 4 | 5 | ## IColumn.minWidth property 6 | 7 | The column’s minimum width in pixels. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | minWidth?: number; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.sortable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [sortable](./react-teams.icolumn.sortable.md) 4 | 5 | ## IColumn.sortable property 6 | 7 | Whether the column is sortable, and if so what sort to make available. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | sortable?: TSortable; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.textselectable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [textSelectable](./react-teams.icolumn.textselectable.md) 4 | 5 | ## IColumn.textSelectable property 6 | 7 | Whether text content in this column should be selectable, i.e. any text will prevent click from being triggered on any parent elements. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | textSelectable?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icolumn.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IColumn](./react-teams.icolumn.md) > [title](./react-teams.icolumn.title.md) 4 | 5 | ## IColumn.title property 6 | 7 | The text content of the column's header cell. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationaction.label.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationAction](./react-teams.icommunicationaction.md) > [label](./react-teams.icommunicationaction.label.md) 4 | 5 | ## ICommunicationAction.label property 6 | 7 | The text to display in the button for the action. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | label: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationaction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationAction](./react-teams.icommunicationaction.md) 4 | 5 | ## ICommunicationAction interface 6 | 7 | An action rendered at the end of the Communication component’s content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICommunicationAction 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [label](./react-teams.icommunicationaction.label.md) | [TTextObject](./react-teams.ttextobject.md) | The text to display in the button for the action. | 20 | | [target](./react-teams.icommunicationaction.target.md) | string | The ID of the action to pass along to the interaction payload. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationaction.target.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationAction](./react-teams.icommunicationaction.md) > [target](./react-teams.icommunicationaction.target.md) 4 | 5 | ## ICommunicationAction.target property 6 | 7 | The ID of the action to pass along to the interaction payload. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | target: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfields.actions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFields](./react-teams.icommunicationfields.md) > [actions](./react-teams.icommunicationfields.actions.md) 4 | 5 | ## ICommunicationFields.actions property 6 | 7 | The interactive buttons to render at the end of the content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | actions?: CommunicationActions; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfields.desc.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFields](./react-teams.icommunicationfields.md) > [desc](./react-teams.icommunicationfields.desc.md) 4 | 5 | ## ICommunicationFields.desc property 6 | 7 | The body text, rendered as body text below any title. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | desc?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfields.image.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFields](./react-teams.icommunicationfields.md) > [image](./react-teams.icommunicationfields.image.md) 4 | 5 | ## ICommunicationFields.image property 6 | 7 | The image to use above the text content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | image?: ICommunicationImage; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfields.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFields](./react-teams.icommunicationfields.md) 4 | 5 | ## ICommunicationFields interface 6 | 7 | The specific content to display in the component. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICommunicationFields 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [actions?](./react-teams.icommunicationfields.actions.md) | CommunicationActions | (Optional) The interactive buttons to render at the end of the content. | 20 | | [desc?](./react-teams.icommunicationfields.desc.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) The body text, rendered as body text below any title. | 21 | | [image?](./react-teams.icommunicationfields.image.md) | [ICommunicationImage](./react-teams.icommunicationimage.md) | (Optional) The image to use above the text content. | 22 | | [title?](./react-teams.icommunicationfields.title.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) The title, rendered as a header. | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfields.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFields](./react-teams.icommunicationfields.md) > [title](./react-teams.icommunicationfields.title.md) 4 | 5 | ## ICommunicationFields.title property 6 | 7 | The title, rendered as a header. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfieldswiththemedimage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFieldsWithThemedImage](./react-teams.icommunicationfieldswiththemedimage.md) 4 | 5 | ## ICommunicationFieldsWithThemedImage interface 6 | 7 | A variation of `ICommunicationFields` using a `themedImage` instead of `image`, which responds to the user’s active theme (light, dark, or high-contrast). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICommunicationFieldsWithThemedImage extends Omit 13 | ``` 14 | Extends: Omit<[ICommunicationFields](./react-teams.icommunicationfields.md), "image"> 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [themedImage?](./react-teams.icommunicationfieldswiththemedimage.themedimage.md) | [ICommunicationThemedImage](./react-teams.icommunicationthemedimage.md) | (Optional) | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationfieldswiththemedimage.themedimage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationFieldsWithThemedImage](./react-teams.icommunicationfieldswiththemedimage.md) > [themedImage](./react-teams.icommunicationfieldswiththemedimage.themedimage.md) 4 | 5 | ## ICommunicationFieldsWithThemedImage.themedImage property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | themedImage?: ICommunicationThemedImage; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationimage.arialabel.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationImage](./react-teams.icommunicationimage.md) > [ariaLabel](./react-teams.icommunicationimage.arialabel.md) 4 | 5 | ## ICommunicationImage.ariaLabel property 6 | 7 | A label to use in place of the image for screen readers. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | ariaLabel: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationimage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationImage](./react-teams.icommunicationimage.md) 4 | 5 | ## ICommunicationImage interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICommunicationImage 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [ariaLabel](./react-teams.icommunicationimage.arialabel.md) | string | A label to use in place of the image for screen readers. | 20 | | [src](./react-teams.icommunicationimage.src.md) | string | A URL to the image asset. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationimage.src.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationImage](./react-teams.icommunicationimage.md) > [src](./react-teams.icommunicationimage.src.md) 4 | 5 | ## ICommunicationImage.src property 6 | 7 | A URL to the image asset. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | src: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationthemedimage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationThemedImage](./react-teams.icommunicationthemedimage.md) 4 | 5 | ## ICommunicationThemedImage interface 6 | 7 | The image to use at the beginning of a Communication component’s content. The user’s active theme determines which image to display. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ICommunicationThemedImage extends Omit 13 | ``` 14 | Extends: Omit<[ICommunicationImage](./react-teams.icommunicationimage.md), "src"> 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [teamsDarkTheme](./react-teams.icommunicationthemedimage.teamsdarktheme.md) | string | A URL for the image to display when the dark palette is active. | 21 | | [teamsHighContrastTheme](./react-teams.icommunicationthemedimage.teamshighcontrasttheme.md) | string | A URL for the image to display when the high contrast palette is active. | 22 | | [teamsTheme](./react-teams.icommunicationthemedimage.teamstheme.md) | string | A URL for the image to display when the light palette is active. | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationthemedimage.teamsdarktheme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationThemedImage](./react-teams.icommunicationthemedimage.md) > [teamsDarkTheme](./react-teams.icommunicationthemedimage.teamsdarktheme.md) 4 | 5 | ## ICommunicationThemedImage.teamsDarkTheme property 6 | 7 | A URL for the image to display when the dark palette is active. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | [TeamsTheme.Dark]: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationthemedimage.teamshighcontrasttheme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationThemedImage](./react-teams.icommunicationthemedimage.md) > [teamsHighContrastTheme](./react-teams.icommunicationthemedimage.teamshighcontrasttheme.md) 4 | 5 | ## ICommunicationThemedImage.teamsHighContrastTheme property 6 | 7 | A URL for the image to display when the high contrast palette is active. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | [TeamsTheme.HighContrast]: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.icommunicationthemedimage.teamstheme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ICommunicationThemedImage](./react-teams.icommunicationthemedimage.md) > [teamsTheme](./react-teams.icommunicationthemedimage.teamstheme.md) 4 | 5 | ## ICommunicationThemedImage.teamsTheme property 6 | 7 | A URL for the image to display when the light palette is active. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | [TeamsTheme.Default]: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboard.blockonly.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboard](./react-teams.idashboard.md) > [blockOnly](./react-teams.idashboard.blockonly.md) 4 | 5 | ## IDashboard.blockOnly property 6 | 7 | Whether the Dashboard should render as just a block element. This will disable the toolbar and sidebar from which the user could control which widgets display. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | blockOnly?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboard.cachekey.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboard](./react-teams.idashboard.md) > [cacheKey](./react-teams.idashboard.cachekey.md) 4 | 5 | ## IDashboard.cacheKey property 6 | 7 | Set this `cacheKey` to save user’s preferences on their local clients. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | cacheKey?: TCacheKey; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboard.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboard](./react-teams.idashboard.md) > [onInteraction](./react-teams.idashboard.oninteraction.md) 4 | 5 | ## IDashboard.onInteraction property 6 | 7 | A Dashboard will emit onInteraction payloads when the user updates any preferences. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TDashboardInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboard.preferences.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboard](./react-teams.idashboard.md) > [preferences](./react-teams.idashboard.preferences.md) 4 | 5 | ## IDashboard.preferences property 6 | 7 | Any initial preferences that should be set for this user, in case you save users’ preferences remotely. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | preferences?: IDashboardPreferences; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboard.widgets.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboard](./react-teams.idashboard.md) > [widgets](./react-teams.idashboard.widgets.md) 4 | 5 | ## IDashboard.widgets property 6 | 7 | The widgets to make available in this Dashboard. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | widgets: IWidget[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.idashboardinteractionupdatepreferences.event.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboardInteractionUpdatePreferences](./react-teams.idashboardinteractionupdatepreferences.md) > [event](./react-teams.idashboardinteractionupdatepreferences.event.md) 4 | 5 | ## IDashboardInteractionUpdatePreferences.event property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | event: "update"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idashboardinteractionupdatepreferences.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboardInteractionUpdatePreferences](./react-teams.idashboardinteractionupdatepreferences.md) 4 | 5 | ## IDashboardInteractionUpdatePreferences interface 6 | 7 | The preferences update payload carries the preferences the developer should store for the user, if appropriate. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IDashboardInteractionUpdatePreferences 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [event](./react-teams.idashboardinteractionupdatepreferences.event.md) | "update" | | 20 | | [preferences](./react-teams.idashboardinteractionupdatepreferences.preferences.md) | IDashboardPreferences | | 21 | | [target](./react-teams.idashboardinteractionupdatepreferences.target.md) | "preferences" | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.idashboardinteractionupdatepreferences.preferences.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboardInteractionUpdatePreferences](./react-teams.idashboardinteractionupdatepreferences.md) > [preferences](./react-teams.idashboardinteractionupdatepreferences.preferences.md) 4 | 5 | ## IDashboardInteractionUpdatePreferences.preferences property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | preferences: IDashboardPreferences; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idashboardinteractionupdatepreferences.target.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDashboardInteractionUpdatePreferences](./react-teams.idashboardinteractionupdatepreferences.md) > [target](./react-teams.idashboardinteractionupdatepreferences.target.md) 4 | 5 | ## IDashboardInteractionUpdatePreferences.target property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | target: "preferences"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdowninput.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownInput](./react-teams.idropdowninput.md) 4 | 5 | ## IDropdownInput interface 6 | 7 | A single-select dropdown. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IDropdownInput extends IEnumerableSingletonInputBase 13 | ``` 14 | Extends: [IEnumerableSingletonInputBase](./react-teams.ienumerablesingletoninputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [multiple?](./react-teams.idropdowninput.multiple.md) | false | (Optional) | 21 | | [type](./react-teams.idropdowninput.type.md) | [EInlineInputType.dropdown](./react-teams.einlineinputtype.dropdown.md) \| [EInputBlockType.dropdown](./react-teams.einputblocktype.dropdown.md) | | 22 | | [width?](./react-teams.idropdowninput.width.md) | [EInputWidth](./react-teams.einputwidth.md) | (Optional) | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.idropdowninput.multiple.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownInput](./react-teams.idropdowninput.md) > [multiple](./react-teams.idropdowninput.multiple.md) 4 | 5 | ## IDropdownInput.multiple property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | multiple?: false; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdowninput.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownInput](./react-teams.idropdowninput.md) > [type](./react-teams.idropdowninput.type.md) 4 | 5 | ## IDropdownInput.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInlineInputType.dropdown | EInputBlockType.dropdown; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdowninput.width.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownInput](./react-teams.idropdowninput.md) > [width](./react-teams.idropdowninput.width.md) 4 | 5 | ## IDropdownInput.width property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | width?: EInputWidth; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdownmultipleinput.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md) 4 | 5 | ## IDropdownMultipleInput interface 6 | 7 | A multiple-select dropdown. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IDropdownMultipleInput extends IEnumerableMultipleInputBase 13 | ``` 14 | Extends: [IEnumerableMultipleInputBase](./react-teams.ienumerablemultipleinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [multiple](./react-teams.idropdownmultipleinput.multiple.md) | true | | 21 | | [type](./react-teams.idropdownmultipleinput.type.md) | [EInlineInputType.dropdown](./react-teams.einlineinputtype.dropdown.md) \| [EInputBlockType.dropdown](./react-teams.einputblocktype.dropdown.md) | | 22 | | [width?](./react-teams.idropdownmultipleinput.width.md) | [EInputWidth](./react-teams.einputwidth.md) | (Optional) | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.idropdownmultipleinput.multiple.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md) > [multiple](./react-teams.idropdownmultipleinput.multiple.md) 4 | 5 | ## IDropdownMultipleInput.multiple property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | multiple: true; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdownmultipleinput.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md) > [type](./react-teams.idropdownmultipleinput.type.md) 4 | 5 | ## IDropdownMultipleInput.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInlineInputType.dropdown | EInputBlockType.dropdown; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.idropdownmultipleinput.width.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md) > [width](./react-teams.idropdownmultipleinput.width.md) 4 | 5 | ## IDropdownMultipleInput.width property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | width?: EInputWidth; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputbase.inputid.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) > [inputId](./react-teams.ienumerableinputbase.inputid.md) 4 | 5 | ## IEnumerableInputBase.inputId property 6 | 7 | The input’s unique ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | inputId: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputbase.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) 4 | 5 | ## IEnumerableInputBase interface 6 | 7 | Properties shared by all enumerable inputs (radio buttons, checkboxes, dropdowns). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IEnumerableInputBase 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [inputId](./react-teams.ienumerableinputbase.inputid.md) | string | The input’s unique ID. | 20 | | [options](./react-teams.ienumerableinputbase.options.md) | [IEnumerableInputOption](./react-teams.ienumerableinputoption.md)\[\] | The input’s options. | 21 | | [title](./react-teams.ienumerableinputbase.title.md) | [TTextObject](./react-teams.ttextobject.md) | The input’s label. | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputbase.options.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) > [options](./react-teams.ienumerableinputbase.options.md) 4 | 5 | ## IEnumerableInputBase.options property 6 | 7 | The input’s options. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | options: IEnumerableInputOption[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputbase.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) > [title](./react-teams.ienumerableinputbase.title.md) 4 | 5 | ## IEnumerableInputBase.title property 6 | 7 | The input’s label. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputoption.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputOption](./react-teams.ienumerableinputoption.md) 4 | 5 | ## IEnumerableInputOption interface 6 | 7 | Properties for each option for Enumerable inputs (radio buttons, checkboxes, dropdowns). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IEnumerableInputOption 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [title](./react-teams.ienumerableinputoption.title.md) | [TTextObject](./react-teams.ttextobject.md) | The option’s text content to display. | 20 | | [value](./react-teams.ienumerableinputoption.value.md) | string | The option’s value, which should be unique for the input in which it’s available. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputoption.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputOption](./react-teams.ienumerableinputoption.md) > [title](./react-teams.ienumerableinputoption.title.md) 4 | 5 | ## IEnumerableInputOption.title property 6 | 7 | The option’s text content to display. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerableinputoption.value.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableInputOption](./react-teams.ienumerableinputoption.md) > [value](./react-teams.ienumerableinputoption.value.md) 4 | 5 | ## IEnumerableInputOption.value property 6 | 7 | The option’s value, which should be unique for the input in which it’s available. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | value: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerablemultipleinputbase.initialvalues.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableMultipleInputBase](./react-teams.ienumerablemultipleinputbase.md) > [initialValues](./react-teams.ienumerablemultipleinputbase.initialvalues.md) 4 | 5 | ## IEnumerableMultipleInputBase.initialValues property 6 | 7 | The input’s initial values. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | initialValues?: string[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerablemultipleinputbase.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableMultipleInputBase](./react-teams.ienumerablemultipleinputbase.md) 4 | 5 | ## IEnumerableMultipleInputBase interface 6 | 7 | Properties shared by enumerable inputs supporting multiple selections (checkboxes, multiple-select dropdowns). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IEnumerableMultipleInputBase extends IEnumerableInputBase 13 | ``` 14 | Extends: [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [initialValues?](./react-teams.ienumerablemultipleinputbase.initialvalues.md) | string\[\] | (Optional) The input’s initial values. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerablesingletoninputbase.initialvalue.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableSingletonInputBase](./react-teams.ienumerablesingletoninputbase.md) > [initialValue](./react-teams.ienumerablesingletoninputbase.initialvalue.md) 4 | 5 | ## IEnumerableSingletonInputBase.initialValue property 6 | 7 | The input’s initial value. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | initialValue?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ienumerablesingletoninputbase.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IEnumerableSingletonInputBase](./react-teams.ienumerablesingletoninputbase.md) 4 | 5 | ## IEnumerableSingletonInputBase interface 6 | 7 | Properties shared by singleton enumerable inputs (radio buttons, single-select dropdowns). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IEnumerableSingletonInputBase extends IEnumerableInputBase 13 | ``` 14 | Extends: [IEnumerableInputBase](./react-teams.ienumerableinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [initialValue?](./react-teams.ienumerablesingletoninputbase.initialvalue.md) | string | (Optional) The input’s initial value. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ifocusableiconprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFocusableIconProps](./react-teams.ifocusableiconprops.md) 4 | 5 | ## IFocusableIconProps interface 6 | 7 | An icon which invokes a tooltip when focused. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IFocusableIconProps extends IIconProps 13 | ``` 14 | Extends: [IIconProps](./react-teams.iiconprops.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [tooltip](./react-teams.ifocusableiconprops.tooltip.md) | ITooltipProps | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.ifocusableiconprops.tooltip.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFocusableIconProps](./react-teams.ifocusableiconprops.md) > [tooltip](./react-teams.ifocusableiconprops.tooltip.md) 4 | 5 | ## IFocusableIconProps.tooltip property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | tooltip: ITooltipProps; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.cancel.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [cancel](./react-teams.iformprops.cancel.md) 4 | 5 | ## IFormProps.cancel property 6 | 7 | The text content of the cancel button, if relevant. The button is not rendered if this is absent. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | cancel?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.errors.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [errors](./react-teams.iformprops.errors.md) 4 | 5 | ## IFormProps.errors property 6 | 7 | A collection of error messages associated with inputs, keyed by input ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | errors?: TFormErrors; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.headersection.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [headerSection](./react-teams.iformprops.headersection.md) 4 | 5 | ## IFormProps.headerSection property 6 | 7 | A section rendered at the top of the Form, which uses an `h1` for the section’s title. Any input groups are ignored. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | headerSection?: ISection; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [onInteraction](./react-teams.iformprops.oninteraction.md) 4 | 5 | ## IFormProps.onInteraction property 6 | 7 | An interaction handler for the Form. Interactions are triggered when the user clicks 'submit', 'cancel', or 'back' (only in Wizard components). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TFormInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.sections.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [sections](./react-teams.iformprops.sections.md) 4 | 5 | ## IFormProps.sections property 6 | 7 | Form section, each of which can have a title (rendered as an `h2`) and a preface for any descriptions or coaching text, which is rendered before any inputs or input groups. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | sections: ISection[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.submit.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [submit](./react-teams.iformprops.submit.md) 4 | 5 | ## IFormProps.submit property 6 | 7 | The text content of the submit button. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | submit: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformprops.toperror.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormProps](./react-teams.iformprops.md) > [topError](./react-teams.iformprops.toperror.md) 4 | 5 | ## IFormProps.topError property 6 | 7 | An error to render at the top of the Form, in case it isn’t relevant to a specific input. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | topError?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformstate.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormState](./react-teams.iformstate.md) 4 | 5 | ## IFormState interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IFormState 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iformwizardstepprops.back.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormWizardStepProps](./react-teams.iformwizardstepprops.md) > [back](./react-teams.iformwizardstepprops.back.md) 4 | 5 | ## IFormWizardStepProps.back property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | back?: TTextObject; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iformwizardstepprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IFormWizardStepProps](./react-teams.iformwizardstepprops.md) 4 | 5 | ## IFormWizardStepProps interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IFormWizardStepProps extends IFormProps 13 | ``` 14 | Extends: [IFormProps](./react-teams.iformprops.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [back?](./react-teams.iformwizardstepprops.back.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.iiconprops.icon.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IIconProps](./react-teams.iiconprops.md) > [icon](./react-teams.iiconprops.icon.md) 4 | 5 | ## IIconProps.icon property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | icon?: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iiconprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IIconProps](./react-teams.iiconprops.md) 4 | 5 | ## IIconProps interface 6 | 7 | An icon. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IIconProps 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [icon?](./react-teams.iiconprops.icon.md) | string | (Optional) | 20 | 21 | -------------------------------------------------------------------------------- /docs/react-teams.iinlineinputsblock.fields.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IInlineInputsBlock](./react-teams.iinlineinputsblock.md) > [fields](./react-teams.iinlineinputsblock.fields.md) 4 | 5 | ## IInlineInputsBlock.fields property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | fields: TInlineField[]; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iinlineinputsblock.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IInlineInputsBlock](./react-teams.iinlineinputsblock.md) 4 | 5 | ## IInlineInputsBlock interface 6 | 7 | A block containing a set of one or more text inputs or dropdowns. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IInlineInputsBlock 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [fields](./react-teams.iinlineinputsblock.fields.md) | [TInlineField](./react-teams.tinlinefield.md)\[\] | | 20 | | [type](./react-teams.iinlineinputsblock.type.md) | [EInputBlockType.inlineInputs](./react-teams.einputblocktype.inlineinputs.md) | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.iinlineinputsblock.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IInlineInputsBlock](./react-teams.iinlineinputsblock.md) > [type](./react-teams.iinlineinputsblock.type.md) 4 | 5 | ## IInlineInputsBlock.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInputBlockType.inlineInputs; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.emptyselectionactiongroups.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [emptySelectionActionGroups](./react-teams.ilistprops.emptyselectionactiongroups.md) 4 | 5 | ## IListProps.emptySelectionActionGroups property 6 | 7 | The action groups to show when no items are selected. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | emptySelectionActionGroups: TActionGroups; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.emptystate.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [emptyState](./react-teams.ilistprops.emptystate.md) 4 | 5 | ## IListProps.emptyState property 6 | 7 | The Communication component to render if the content of this component is empty. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | emptyState?: TCommunicationProps; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.filters.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [filters](./react-teams.ilistprops.filters.md) 4 | 5 | ## IListProps.filters property 6 | 7 | The set of columns as column IDs to offer in the filter menu. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | filters?: columnKey[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.filterssingleselect.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [filtersSingleSelect](./react-teams.ilistprops.filterssingleselect.md) 4 | 5 | ## IListProps.filtersSingleSelect property 6 | 7 | Whether to prevent multiple filters from being applied; when this is true and one filter is already applied, if the user selects another filter the previous filter is removed and the new filter is applied rather than both applying. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | filtersSingleSelect?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.find.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [find](./react-teams.ilistprops.find.md) 4 | 5 | ## IListProps.find property 6 | 7 | Whether to provide the find feature, which filters the list by an arbitrary string input the user can provide. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | find?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ilistprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IListProps](./react-teams.ilistprops.md) > [onInteraction](./react-teams.ilistprops.oninteraction.md) 4 | 5 | ## IListProps.onInteraction property 6 | 7 | An interaction handler for the List. Interactions are triggered when the user clicks on an action for the List or for an item in the List. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TListInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.imultilinetextinput.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IMultilineTextInput](./react-teams.imultilinetextinput.md) 4 | 5 | ## IMultilineTextInput interface 6 | 7 | A multi-line text field. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IMultilineTextInput extends ITextInputBase 13 | ``` 14 | Extends: [ITextInputBase](./react-teams.itextinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [type](./react-teams.imultilinetextinput.type.md) | [EInputBlockType.multilineText](./react-teams.einputblocktype.multilinetext.md) | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.imultilinetextinput.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IMultilineTextInput](./react-teams.imultilinetextinput.md) > [type](./react-teams.imultilinetextinput.type.md) 4 | 5 | ## IMultilineTextInput.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInputBlockType.multilineText; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ipreparedboarditem.itemkey.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IPreparedBoardItem](./react-teams.ipreparedboarditem.md) > [itemKey](./react-teams.ipreparedboarditem.itemkey.md) 4 | 5 | ## IPreparedBoardItem.itemKey property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | itemKey: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ipreparedboarditem.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IPreparedBoardItem](./react-teams.ipreparedboarditem.md) 4 | 5 | ## IPreparedBoardItem interface 6 | 7 | A prepared Board item places the item’s unique key within itself so the item can be handled on its own. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IPreparedBoardItem extends IBoardItem 13 | ``` 14 | Extends: [IBoardItem](./react-teams.iboarditem.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [itemKey](./react-teams.ipreparedboarditem.itemkey.md) | string | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.iradiobuttonsinput.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IRadioButtonsInput](./react-teams.iradiobuttonsinput.md) 4 | 5 | ## IRadioButtonsInput interface 6 | 7 | A set of radio buttons (from which only one can be selected). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IRadioButtonsInput extends IEnumerableSingletonInputBase 13 | ``` 14 | Extends: [IEnumerableSingletonInputBase](./react-teams.ienumerablesingletoninputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [type](./react-teams.iradiobuttonsinput.type.md) | [EInputBlockType.radioButtons](./react-teams.einputblocktype.radiobuttons.md) | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.iradiobuttonsinput.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IRadioButtonsInput](./react-teams.iradiobuttonsinput.md) > [type](./react-teams.iradiobuttonsinput.type.md) 4 | 5 | ## IRadioButtonsInput.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInputBlockType.radioButtons; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.irow.actions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IRow](./react-teams.irow.md) > [actions](./react-teams.irow.actions.md) 4 | 5 | ## IRow.actions property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | actions?: TActions; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.irow.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IRow](./react-teams.irow.md) 4 | 5 | ## IRow interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IRow 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [actions?](./react-teams.irow.actions.md) | [TActions](./react-teams.tactions.md) | (Optional) | 20 | 21 | -------------------------------------------------------------------------------- /docs/react-teams.isection.inputblocks.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ISection](./react-teams.isection.md) > [inputBlocks](./react-teams.isection.inputblocks.md) 4 | 5 | ## ISection.inputBlocks property 6 | 7 | The input blocks to render in this section, which can either be a block with an individual input, or a block with a set of inline inputs. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | inputBlocks?: (TInputBlock | IInlineInputsBlock)[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.isection.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ISection](./react-teams.isection.md) 4 | 5 | ## ISection interface 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export interface ISection 12 | ``` 13 | 14 | ## Properties 15 | 16 | | Property | Type | Description | 17 | | --- | --- | --- | 18 | | [inputBlocks?](./react-teams.isection.inputblocks.md) | ([TInputBlock](./react-teams.tinputblock.md) \| [IInlineInputsBlock](./react-teams.iinlineinputsblock.md))\[\] | (Optional) The input blocks to render in this section, which can either be a block with an individual input, or a block with a set of inline inputs. | 19 | | [preface?](./react-teams.isection.preface.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) Text content of the section rendered before the input groups as a p element. | 20 | | [title?](./react-teams.isection.title.md) | [TPhrasingContent](./react-teams.tphrasingcontent.md) | (Optional) The title of the section, rendered as an h# element. | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.isection.preface.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ISection](./react-teams.isection.md) > [preface](./react-teams.isection.preface.md) 4 | 5 | ## ISection.preface property 6 | 7 | Text content of the section rendered before the input groups as a `p` element. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | preface?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.isection.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ISection](./react-teams.isection.md) > [title](./react-teams.isection.title.md) 4 | 5 | ## ISection.title property 6 | 7 | The title of the section, rendered as an `h#` element. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title?: TPhrasingContent; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.columns.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [columns](./react-teams.itableprops.columns.md) 4 | 5 | ## ITableProps.columns property 6 | 7 | A collection of columns to display, keyed by column ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | columns: { 13 | [columnKey: string]: IColumn; 14 | }; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.label.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [label](./react-teams.itableprops.label.md) 4 | 5 | ## ITableProps.label property 6 | 7 | The title summary, or label of the table, announced for screen readers but hidden for other users. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | label: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [onInteraction](./react-teams.itableprops.oninteraction.md) 4 | 5 | ## ITableProps.onInteraction property 6 | 7 | An interaction handler for the Table. Interactions are triggered when the user clicks on an action in a row, a button in a table cell, or anywhere in a row if `selectable` is `false`. If the Table is not rendered on its own, this may be proxied from its parent component, e.g. the parent List. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TTableInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.rows.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [rows](./react-teams.itableprops.rows.md) 4 | 5 | ## ITableProps.rows property 6 | 7 | A collection of rows to display, keyed by row ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | rows: { 13 | [rowKey: string]: IRow; 14 | }; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.selectable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [selectable](./react-teams.itableprops.selectable.md) 4 | 5 | ## ITableProps.selectable property 6 | 7 | Whether the user can select rows. In the context of a List component, this supplies any actions all rows have in common in the Toolbar instance above the Table. If this is false, the Table will call `onInteraction` any time the user clicks on a row. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | selectable?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itableprops.truncate.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITableProps](./react-teams.itableprops.md) > [truncate](./react-teams.itableprops.truncate.md) 4 | 5 | ## ITableProps.truncate property 6 | 7 | If true, limits content to a single line and truncate with the language’s default ellipsis, or if false, content in each cell wraps exhaustively. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | truncate?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itextfield.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextField](./react-teams.itextfield.md) 4 | 5 | ## ITextField interface 6 | 7 | A single-line text field. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ITextField extends ITextInputBase 13 | ``` 14 | Extends: [ITextInputBase](./react-teams.itextinputbase.md) 15 | 16 | ## Properties 17 | 18 | | Property | Type | Description | 19 | | --- | --- | --- | 20 | | [type](./react-teams.itextfield.type.md) | [EInlineInputType.text](./react-teams.einlineinputtype.text.md) | | 21 | | [width?](./react-teams.itextfield.width.md) | [EInputWidth](./react-teams.einputwidth.md) | (Optional) | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.itextfield.type.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextField](./react-teams.itextfield.md) > [type](./react-teams.itextfield.type.md) 4 | 5 | ## ITextField.type property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | type: EInlineInputType.text; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.itextfield.width.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextField](./react-teams.itextfield.md) > [width](./react-teams.itextfield.width.md) 4 | 5 | ## ITextField.width property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | width?: EInputWidth; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.itextinputbase.initialvalue.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextInputBase](./react-teams.itextinputbase.md) > [initialValue](./react-teams.itextinputbase.initialvalue.md) 4 | 5 | ## ITextInputBase.initialValue property 6 | 7 | The input’s initial value. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | initialValue?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itextinputbase.inputid.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextInputBase](./react-teams.itextinputbase.md) > [inputId](./react-teams.itextinputbase.inputid.md) 4 | 5 | ## ITextInputBase.inputId property 6 | 7 | The input’s unique ID 8 | 9 | Signature: 10 | 11 | ```typescript 12 | inputId: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itextinputbase.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextInputBase](./react-teams.itextinputbase.md) 4 | 5 | ## ITextInputBase interface 6 | 7 | Properties shared by text inputs (single- and multi-line). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface ITextInputBase 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [initialValue?](./react-teams.itextinputbase.initialvalue.md) | string | (Optional) The input’s initial value. | 20 | | [inputId](./react-teams.itextinputbase.inputid.md) | string | The input’s unique ID | 21 | | [placeholder?](./react-teams.itextinputbase.placeholder.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) The input’s placeholder content. | 22 | | [title](./react-teams.itextinputbase.title.md) | [TTextObject](./react-teams.ttextobject.md) | The input’s label. | 23 | 24 | -------------------------------------------------------------------------------- /docs/react-teams.itextinputbase.placeholder.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextInputBase](./react-teams.itextinputbase.md) > [placeholder](./react-teams.itextinputbase.placeholder.md) 4 | 5 | ## ITextInputBase.placeholder property 6 | 7 | The input’s placeholder content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | placeholder?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itextinputbase.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [ITextInputBase](./react-teams.itextinputbase.md) > [title](./react-teams.itextinputbase.title.md) 4 | 5 | ## ITextInputBase.title property 6 | 7 | The input’s label. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ithemeproviderprops.children.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IThemeProviderProps](./react-teams.ithemeproviderprops.md) > [children](./react-teams.ithemeproviderprops.children.md) 4 | 5 | ## IThemeProviderProps.children property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | children: ReactNode; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ithemeproviderprops.flexheight.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IThemeProviderProps](./react-teams.ithemeproviderprops.md) > [flexHeight](./react-teams.ithemeproviderprops.flexheight.md) 4 | 5 | ## IThemeProviderProps.flexHeight property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | flexHeight?: boolean; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ithemeproviderprops.lang.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IThemeProviderProps](./react-teams.ithemeproviderprops.md) > [lang](./react-teams.ithemeproviderprops.lang.md) 4 | 5 | ## IThemeProviderProps.lang property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | lang: TLocale; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ithemeproviderprops.themename.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IThemeProviderProps](./react-teams.ithemeproviderprops.md) > [themeName](./react-teams.ithemeproviderprops.themename.md) 4 | 5 | ## IThemeProviderProps.themeName property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | themeName: TeamsTheme | IThemeTeamsClient; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.ithemeproviderprops.translations.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IThemeProviderProps](./react-teams.ithemeproviderprops.md) > [translations](./react-teams.ithemeproviderprops.translations.md) 4 | 5 | ## IThemeProviderProps.translations property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | translations?: { 11 | [locale: string]: TTranslations; 12 | }; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itoolbarprops.actiongroups.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IToolbarProps](./react-teams.itoolbarprops.md) > [actionGroups](./react-teams.itoolbarprops.actiongroups.md) 4 | 5 | ## IToolbarProps.actionGroups property 6 | 7 | The groups of actions to make available in the Toolbar. Actions for different groups are separated by a horizontal or vertical bar when adjacent. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | actionGroups: TActionGroups; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itoolbarprops.filters.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IToolbarProps](./react-teams.itoolbarprops.md) > [filters](./react-teams.itoolbarprops.filters.md) 4 | 5 | ## IToolbarProps.filters property 6 | 7 | The filters to make available in the Toolbar. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | filters?: TFilters; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itoolbarprops.filterssingleselect.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IToolbarProps](./react-teams.itoolbarprops.md) > [filtersSingleSelect](./react-teams.itoolbarprops.filterssingleselect.md) 4 | 5 | ## IToolbarProps.filtersSingleSelect property 6 | 7 | Whether to prevent multiple filters from being applied; when this is true and one filter is already applied, if the user selects another filter the previous filter is removed and the new filter is applied rather than both applying. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | filtersSingleSelect?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itoolbarprops.find.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IToolbarProps](./react-teams.itoolbarprops.md) > [find](./react-teams.itoolbarprops.find.md) 4 | 5 | ## IToolbarProps.find property 6 | 7 | Whether the Toolbar should provide find functionality. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | find?: boolean; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.itoolbarprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IToolbarProps](./react-teams.itoolbarprops.md) > [onInteraction](./react-teams.itoolbarprops.oninteraction.md) 4 | 5 | ## IToolbarProps.onInteraction property 6 | 7 | An interaction handler for the Toolbar. Interactions are triggered when the user clicks on an action. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TToolbarInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.body.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [body](./react-teams.iwidget.body.md) 4 | 5 | ## IWidget.body property 6 | 7 | The content to make available in the widget. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | body?: IWidgetBodyContent[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.bodybyfilter.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [bodyByFilter](./react-teams.iwidget.bodybyfilter.md) 4 | 5 | ## IWidget.bodyByFilter property 6 | 7 | The content to make available in the widget based on which filter is active, by id. This must be paired with `widgetFilterGroup` to display, otherwise `body` is used. `body` is also displayed when `bodyByFilter` does not have a value for a given filter id. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | bodyByFilter?: Record; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.desc.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [desc](./react-teams.iwidget.desc.md) 4 | 5 | ## IWidget.desc property 6 | 7 | Text rendered in boxy test style below the title. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | desc?: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.id.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [id](./react-teams.iwidget.id.md) 4 | 5 | ## IWidget.id property 6 | 7 | A unique ID for the widget. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | id: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.initialfilter.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [initialFilter](./react-teams.iwidget.initialfilter.md) 4 | 5 | ## IWidget.initialFilter property 6 | 7 | The initial filter’s id to apply. If this is not specified, and both `widgetFilterGroup` and `bodyByFilter` are, then the initial filter resolves to the first in `widgetFilterGroup`. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | initialFilter?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.link.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [link](./react-teams.iwidget.link.md) 4 | 5 | ## IWidget.link property 6 | 7 | A link to render at the end of the widget’s content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | link?: IWidgetLink | IWidgetButton; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.size.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [size](./react-teams.iwidget.size.md) 4 | 5 | ## IWidget.size property 6 | 7 | The widget’s target size. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | size: EWidgetSize; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [title](./react-teams.iwidget.title.md) 4 | 5 | ## IWidget.title property 6 | 7 | The title of the widget, rendered in a header style. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.widgetactiongroup.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [widgetActionGroup](./react-teams.iwidget.widgetactiongroup.md) 4 | 5 | ## IWidget.widgetActionGroup property 6 | 7 | A collection of actions available in the widget’s overflow menu. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | widgetActionGroup?: IWidgetAction[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidget.widgetfiltergroup.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidget](./react-teams.iwidget.md) > [widgetFilterGroup](./react-teams.iwidget.widgetfiltergroup.md) 4 | 5 | ## IWidget.widgetFilterGroup property 6 | 7 | A collection of filters available in the widget’s filter menu. This must be paired with `bodyByFilter` to display. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | widgetFilterGroup?: Omit[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetaction.icon.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetAction](./react-teams.iwidgetaction.md) > [icon](./react-teams.iwidgetaction.icon.md) 4 | 5 | ## IWidgetAction.icon property 6 | 7 | The icon 8 | 9 | Signature: 10 | 11 | ```typescript 12 | icon?: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetaction.id.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetAction](./react-teams.iwidgetaction.md) > [id](./react-teams.iwidgetaction.id.md) 4 | 5 | ## IWidgetAction.id property 6 | 7 | A unique ID to use to refer to the action. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | id: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetaction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetAction](./react-teams.iwidgetaction.md) 4 | 5 | ## IWidgetAction interface 6 | 7 | An action item displayed in a widget’s overflow menu. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IWidgetAction 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [icon?](./react-teams.iwidgetaction.icon.md) | string | (Optional) The icon | 20 | | [id](./react-teams.iwidgetaction.id.md) | string | A unique ID to use to refer to the action. | 21 | | [title](./react-teams.iwidgetaction.title.md) | [TTextObject](./react-teams.ttextobject.md) | The text content of the trigger for the action. | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetaction.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetAction](./react-teams.iwidgetaction.md) > [title](./react-teams.iwidgetaction.title.md) 4 | 5 | ## IWidgetAction.title property 6 | 7 | The text content of the trigger for the action. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetbodycontent.content.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetBodyContent](./react-teams.iwidgetbodycontent.md) > [content](./react-teams.iwidgetbodycontent.content.md) 4 | 5 | ## IWidgetBodyContent.content property 6 | 7 | The content, as a React Node. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | content: TWidgetContent; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetbodycontent.id.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetBodyContent](./react-teams.iwidgetbodycontent.md) > [id](./react-teams.iwidgetbodycontent.id.md) 4 | 5 | ## IWidgetBodyContent.id property 6 | 7 | An ID unique to the piece of content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | id: string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetbodycontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetBodyContent](./react-teams.iwidgetbodycontent.md) 4 | 5 | ## IWidgetBodyContent interface 6 | 7 | A piece of content to make available in the widget. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IWidgetBodyContent 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [content](./react-teams.iwidgetbodycontent.content.md) | [TWidgetContent](./react-teams.twidgetcontent.md) | The content, as a React Node. | 20 | | [id](./react-teams.iwidgetbodycontent.id.md) | string | An ID unique to the piece of content. | 21 | | [title](./react-teams.iwidgetbodycontent.title.md) | [TTextObject](./react-teams.ttextobject.md) | A title which will appear as a tab’s label in the Dashboard widget. This will only appear if the widget hosts multiple body content objects. | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetbodycontent.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetBodyContent](./react-teams.iwidgetbodycontent.md) > [title](./react-teams.iwidgetbodycontent.title.md) 4 | 5 | ## IWidgetBodyContent.title property 6 | 7 | A title which will appear as a tab’s label in the Dashboard widget. This will only appear if the widget hosts multiple body content objects. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | title: TTextObject; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetlink.href.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetLink](./react-teams.iwidgetlink.md) > [href](./react-teams.iwidgetlink.href.md) 4 | 5 | ## IWidgetLink.href property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | href: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetlink.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetLink](./react-teams.iwidgetlink.md) 4 | 5 | ## IWidgetLink interface 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export interface IWidgetLink 12 | ``` 13 | 14 | ## Properties 15 | 16 | | Property | Type | Description | 17 | | --- | --- | --- | 18 | | [href](./react-teams.iwidgetlink.href.md) | string | | 19 | | [title?](./react-teams.iwidgetlink.title.md) | [TTextObject](./react-teams.ttextobject.md) | (Optional) | 20 | 21 | -------------------------------------------------------------------------------- /docs/react-teams.iwidgetlink.title.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWidgetLink](./react-teams.iwidgetlink.md) > [title](./react-teams.iwidgetlink.title.md) 4 | 5 | ## IWidgetLink.title property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | title?: TTextObject; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardprops.activestep.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardProps](./react-teams.iwizardprops.md) > [activeStep](./react-teams.iwizardprops.activestep.md) 4 | 5 | ## IWizardProps.activeStep property 6 | 7 | The content of the active step. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | activeStep: IFormWizardStepProps; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardprops.activestepindex.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardProps](./react-teams.iwizardprops.md) > [activeStepIndex](./react-teams.iwizardprops.activestepindex.md) 4 | 5 | ## IWizardProps.activeStepIndex property 6 | 7 | The zero-based index of the active step. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | activeStepIndex: number; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardprops.oninteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardProps](./react-teams.iwizardprops.md) > [onInteraction](./react-teams.iwizardprops.oninteraction.md) 4 | 5 | ## IWizardProps.onInteraction property 6 | 7 | An interaction handler for the Wizard. Interactions are triggered when the user clicks on a step in the Wizard’s sidebar, or if the user interacts with the Form. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | onInteraction?: (interaction: TWizardInteraction) => void; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardprops.steptitles.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardProps](./react-teams.iwizardprops.md) > [stepTitles](./react-teams.iwizardprops.steptitles.md) 4 | 5 | ## IWizardProps.stepTitles property 6 | 7 | The titles of the Wizard’s steps in order. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | stepTitles: TTextObject[]; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardsidebarinteraction.event.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardSidebarInteraction](./react-teams.iwizardsidebarinteraction.md) > [event](./react-teams.iwizardsidebarinteraction.event.md) 4 | 5 | ## IWizardSidebarInteraction.event property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | event: "click"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardsidebarinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardSidebarInteraction](./react-teams.iwizardsidebarinteraction.md) 4 | 5 | ## IWizardSidebarInteraction interface 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export interface IWizardSidebarInteraction 13 | ``` 14 | 15 | ## Properties 16 | 17 | | Property | Type | Description | 18 | | --- | --- | --- | 19 | | [event](./react-teams.iwizardsidebarinteraction.event.md) | "click" | | 20 | | [subject](./react-teams.iwizardsidebarinteraction.subject.md) | string | | 21 | | [target](./react-teams.iwizardsidebarinteraction.target.md) | "wizard-sidebar" | | 22 | 23 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardsidebarinteraction.subject.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardSidebarInteraction](./react-teams.iwizardsidebarinteraction.md) > [subject](./react-teams.iwizardsidebarinteraction.subject.md) 4 | 5 | ## IWizardSidebarInteraction.subject property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | subject: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.iwizardsidebarinteraction.target.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [IWizardSidebarInteraction](./react-teams.iwizardsidebarinteraction.md) > [target](./react-teams.iwizardsidebarinteraction.target.md) 4 | 5 | ## IWizardSidebarInteraction.target property 6 | 7 | Signature: 8 | 9 | ```typescript 10 | target: "wizard-sidebar"; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/react-teams.list.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [List](./react-teams.list.md) 4 | 5 | ## List variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | List: (props: IListProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.provider.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Provider](./react-teams.provider.md) 4 | 5 | ## Provider variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | HVCThemeProvider: ({ children, lang, themeName, translations, flexHeight, }: IThemeProviderProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.table.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Table](./react-teams.table.md) 4 | 5 | ## Table variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | Table: (props: ITableProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.taction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TAction](./react-teams.taction.md) 4 | 5 | ## TAction type 6 | 7 | An action a user can apply to an entity. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TAction = { 13 | title: string; 14 | subject?: string[] | string; 15 | icon?: string; 16 | multi?: boolean; 17 | }; 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/react-teams.tactiongroups.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TActionGroups](./react-teams.tactiongroups.md) 4 | 5 | ## TActionGroups type 6 | 7 | A collection of action groups, keyed by group ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TActionGroups = { 13 | [actionGroupKey: string]: TActions; 14 | }; 15 | ``` 16 | References: [TActions](./react-teams.tactions.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tactions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TActions](./react-teams.tactions.md) 4 | 5 | ## TActions type 6 | 7 | A collection of actions, keyed by the action ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TActions = { 13 | [actionKey: string]: TAction; 14 | }; 15 | ``` 16 | References: [TAction](./react-teams.taction.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tboardinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TBoardInteraction](./react-teams.tboardinteraction.md) 4 | 5 | ## TBoardInteraction type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TBoardInteraction = IBoardInteractionUpdateLanes | IBoardInteractionUpdateItems; 13 | ``` 14 | References: [IBoardInteractionUpdateLanes](./react-teams.iboardinteractionupdatelanes.md), [IBoardInteractionUpdateItems](./react-teams.iboardinteractionupdateitems.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tboarditems.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TBoardItems](./react-teams.tboarditems.md) 4 | 5 | ## TBoardItems type 6 | 7 | The collection of a Board’s items, keyed by the items’ unique ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TBoardItems = { 13 | [itemKey: string]: IBoardItem; 14 | }; 15 | ``` 16 | References: [IBoardItem](./react-teams.iboarditem.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tboardlane.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TBoardLane](./react-teams.tboardlane.md) 4 | 5 | ## TBoardLane type 6 | 7 | Board lanes currently only need a `title`. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TBoardLane = { 13 | title: TTextObject; 14 | }; 15 | ``` 16 | References: [TTextObject](./react-teams.ttextobject.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tboardlanes.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TBoardLanes](./react-teams.tboardlanes.md) 4 | 5 | ## TBoardLanes type 6 | 7 | Each Board lane has a unique key, which is associated with the lane’s configuration. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TBoardLanes = { 13 | [laneKey: string]: TBoardLane; 14 | }; 15 | ``` 16 | References: [TBoardLane](./react-teams.tboardlane.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tcachekey.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TCacheKey](./react-teams.tcachekey.md) 4 | 5 | ## TCacheKey type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TCacheKey = string | undefined; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.tcellavatarcontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TCellAvatarContent](./react-teams.tcellavatarcontent.md) 4 | 5 | ## TCellAvatarContent type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TCellAvatarContent = ICellIconAvatarContent | ICellImageAvatarContent; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.tcellcontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TCellContent](./react-teams.tcellcontent.md) 4 | 5 | ## TCellContent type 6 | 7 | The content for a table cell 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TCellContent = TPhrasingContent | ICellButtonContent | TCellAvatarContent; 13 | ``` 14 | References: [TPhrasingContent](./react-teams.tphrasingcontent.md), [ICellButtonContent](./react-teams.icellbuttoncontent.md), [TCellAvatarContent](./react-teams.tcellavatarcontent.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tcommunicationfields.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TCommunicationFields](./react-teams.tcommunicationfields.md) 4 | 5 | ## TCommunicationFields type 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare type TCommunicationFields = ICommunicationFields | ICommunicationFieldsWithThemedImage; 12 | ``` 13 | References: [ICommunicationFields](./react-teams.icommunicationfields.md), [ICommunicationFieldsWithThemedImage](./react-teams.icommunicationfieldswiththemedimage.md) 14 | 15 | -------------------------------------------------------------------------------- /docs/react-teams.tcommunicationinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TCommunicationInteraction](./react-teams.tcommunicationinteraction.md) 4 | 5 | ## TCommunicationInteraction type 6 | 7 | The interaction payload emitted by this component will only come from click interactions on any action buttons specified in the props. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TCommunicationInteraction = { 13 | event: "click"; 14 | target: string; 15 | }; 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/react-teams.tdashboardinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TDashboardInteraction](./react-teams.tdashboardinteraction.md) 4 | 5 | ## TDashboardInteraction type 6 | 7 | A Dashboard will emit onInteraction payloads when the user updates any preferences. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TDashboardInteraction = IDashboardInteractionUpdatePreferences | IDashboardInteractionWidgetAction | IDashboardInteractionWidgetButton; 13 | ``` 14 | References: [IDashboardInteractionUpdatePreferences](./react-teams.idashboardinteractionupdatepreferences.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tformerrors.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TFormErrors](./react-teams.tformerrors.md) 4 | 5 | ## TFormErrors type 6 | 7 | A collection of error messages associated with inputs, keyed by input ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TFormErrors = { 13 | [inputId: string]: TTextObject; 14 | }; 15 | ``` 16 | References: [TTextObject](./react-teams.ttextobject.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.tforminteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TFormInteraction](./react-teams.tforminteraction.md) 4 | 5 | ## TFormInteraction type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TFormInteraction = { 13 | event: "submit" | "cancel" | "back"; 14 | target: "form"; 15 | formState: IFormState; 16 | }; 17 | ``` 18 | References: [IFormState](./react-teams.iformstate.md) 19 | 20 | -------------------------------------------------------------------------------- /docs/react-teams.themenames.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [themeNames](./react-teams.themenames.md) 4 | 5 | ## themeNames enum 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare enum TeamsTheme 12 | ``` 13 | 14 | ## Enumeration Members 15 | 16 | | Member | Value | Description | 17 | | --- | --- | --- | 18 | | Dark | "teamsDarkTheme" | | 19 | | Default | "teamsTheme" | | 20 | | HighContrast | "teamsHighContrastTheme" | | 21 | 22 | -------------------------------------------------------------------------------- /docs/react-teams.tinlinefield.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TInlineField](./react-teams.tinlinefield.md) 4 | 5 | ## TInlineField type 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | export declare type TInlineField = IDropdownInput | IDropdownMultipleInput | ITextField; 12 | ``` 13 | References: [IDropdownInput](./react-teams.idropdowninput.md), [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md), [ITextField](./react-teams.itextfield.md) 14 | 15 | -------------------------------------------------------------------------------- /docs/react-teams.tinputblock.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TInputBlock](./react-teams.tinputblock.md) 4 | 5 | ## TInputBlock type 6 | 7 | A block with a single input which occupies the full width of the form. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TInputBlock = IMultilineTextInput | IDropdownInput | IDropdownMultipleInput | IRadioButtonsInput | ICheckboxesInput; 13 | ``` 14 | References: [IMultilineTextInput](./react-teams.imultilinetextinput.md), [IDropdownInput](./react-teams.idropdowninput.md), [IDropdownMultipleInput](./react-teams.idropdownmultipleinput.md), [IRadioButtonsInput](./react-teams.iradiobuttonsinput.md), [ICheckboxesInput](./react-teams.icheckboxesinput.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tlistinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TListInteraction](./react-teams.tlistinteraction.md) 4 | 5 | ## TListInteraction type 6 | 7 | List interactions are proxied from the Table, the Toolbar, or the empty state Communication component. All are clicks on actions. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TListInteraction = TTableInteraction | TToolbarInteraction | TCommunicationInteraction; 13 | ``` 14 | References: [TTableInteraction](./react-teams.ttableinteraction.md), [TToolbarInteraction](./react-teams.ttoolbarinteraction.md), [TCommunicationInteraction](./react-teams.tcommunicationinteraction.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tlocale.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TLocale](./react-teams.tlocale.md) 4 | 5 | ## TLocale type 6 | 7 | A locale as an \[IETF BCP 47 language tag\](https://tools.ietf.org/rfc/bcp/bcp47.txt). 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TLocale = string; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.toolbar.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Toolbar](./react-teams.toolbar.md) 4 | 5 | ## Toolbar variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | Toolbar: (props: IToolbarProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/react-teams.tphrasingcontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TPhrasingContent](./react-teams.tphrasingcontent.md) 4 | 5 | ## TPhrasingContent type 6 | 7 | An ordered collection of elements that render inline as content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TPhrasingContent = TPhrasingProps[] | TTextObject; 13 | ``` 14 | References: [TTextObject](./react-teams.ttextobject.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.tsortable.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TSortable](./react-teams.tsortable.md) 4 | 5 | ## TSortable type 6 | 7 | Currently only alphabetical sort is available. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TSortable = "alphabetical" | false; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/react-teams.ttableinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TTableInteraction](./react-teams.ttableinteraction.md) 4 | 5 | ## TTableInteraction type 6 | 7 | An interaction payload emitted by Table. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TTableInteraction = { 13 | event: "click"; 14 | target: "table"; 15 | subject: rowKey | rowKey[]; 16 | action?: actionKey; 17 | }; 18 | ``` 19 | References: [actionKey](./react-teams.actionkey.md) 20 | 21 | -------------------------------------------------------------------------------- /docs/react-teams.ttextobject.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TTextObject](./react-teams.ttextobject.md) 4 | 5 | ## TTextObject type 6 | 7 | Text content to display. When the preferred locale is not available, the plain string or the only available locale will be used instead. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TTextObject = string | { 13 | [locale: string]: string; 14 | } | undefined; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/react-teams.ttoolbarinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TToolbarInteraction](./react-teams.ttoolbarinteraction.md) 4 | 5 | ## TToolbarInteraction type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TToolbarInteraction = { 13 | event: "click"; 14 | target: "toolbar"; 15 | subject: string | string[] | null; 16 | action: actionKey; 17 | }; 18 | ``` 19 | References: [actionKey](./react-teams.actionkey.md) 20 | 21 | -------------------------------------------------------------------------------- /docs/react-teams.ttranslations.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TTranslations](./react-teams.ttranslations.md) 4 | 5 | ## TTranslations type 6 | 7 | A collection of strings for a certain locale. This library fetches translations by a `stringKey`, which is common between all translations. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TTranslations = { 13 | locale: TLocale; 14 | [stringKey: string]: string; 15 | }; 16 | ``` 17 | References: [TLocale](./react-teams.tlocale.md) 18 | 19 | -------------------------------------------------------------------------------- /docs/react-teams.tuser.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TUser](./react-teams.tuser.md) 4 | 5 | ## TUser type 6 | 7 | A User entity, which certain components can use as part of their content. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TUser = { 13 | image?: string; 14 | name: TTextObject; 15 | }; 16 | ``` 17 | References: [TTextObject](./react-teams.ttextobject.md) 18 | 19 | -------------------------------------------------------------------------------- /docs/react-teams.tusers.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TUsers](./react-teams.tusers.md) 4 | 5 | ## TUsers type 6 | 7 | A collection of Users, keyed by their unique ID. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TUsers = { 13 | [userKey: string]: TUser; 14 | }; 15 | ``` 16 | References: [TUser](./react-teams.tuser.md) 17 | 18 | -------------------------------------------------------------------------------- /docs/react-teams.twidgetcontent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TWidgetContent](./react-teams.twidgetcontent.md) 4 | 5 | ## TWidgetContent type 6 | 7 | Widget content specifies a type, then a payload with a special key depending on the type of widget. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TWidgetContent = IChartWidgetContent | IDescriptionListWidgetContent | IPlaceholderWidgetContent | ITextWidgetContent; 13 | ``` 14 | References: [IChartWidgetContent](./react-teams.ichartwidgetcontent.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.twizardinteraction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [TWizardInteraction](./react-teams.twizardinteraction.md) 4 | 5 | ## TWizardInteraction type 6 | 7 | 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. 8 | 9 | Signature: 10 | 11 | ```typescript 12 | export declare type TWizardInteraction = TFormInteraction | IWizardSidebarInteraction; 13 | ``` 14 | References: [TFormInteraction](./react-teams.tforminteraction.md), [IWizardSidebarInteraction](./react-teams.iwizardsidebarinteraction.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/react-teams.wizard.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@fluentui/react-teams](./react-teams.md) > [Wizard](./react-teams.wizard.md) 4 | 5 | ## Wizard variable 6 | 7 | 8 | Signature: 9 | 10 | ```typescript 11 | Wizard: ({ stepTitles, activeStepIndex, activeStep, onInteraction, }: IWizardProps) => JSX.Element 12 | ``` 13 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["airbnb", "airbnb/hooks"], 3 | }; 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "ts-jest", 3 | testEnvironment: "jsdom", 4 | }; 5 | -------------------------------------------------------------------------------- /just.config.ts: -------------------------------------------------------------------------------- 1 | import * as util from "util"; 2 | // @ts-ignore 3 | import _rimraf from "rimraf"; 4 | import { 5 | task, 6 | parallel, 7 | series, 8 | jestTask, 9 | tscTask, 10 | eslintTask, 11 | } from "just-scripts"; 12 | import { 13 | startStorybookTask, 14 | buildStorybookTask, 15 | } from "./scripts/tasks/storybook"; 16 | 17 | const rimraf = util.promisify(_rimraf as any); 18 | 19 | task("clean", () => rimraf("lib")); 20 | task( 21 | "build:tsc", 22 | parallel( 23 | tscTask({ 24 | module: "CommonJS", 25 | outDir: "lib/cjs", 26 | }), 27 | tscTask({ 28 | module: "ES2020", 29 | outDir: "lib/esm", 30 | }) 31 | ) 32 | ); 33 | task("build", series("clean", "build:tsc")); 34 | 35 | task("test", jestTask()); 36 | task("start", startStorybookTask()); 37 | task("build:storybook", buildStorybookTask()); 38 | task("lint", eslintTask()); 39 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | // https://www.npmjs.com/package/lint-staged 4 | module.exports = { 5 | // Run eslint in fix mode followed by prettier 6 | [`*.{ts,tsx}`]: ["yarn prettier --write"], 7 | }; 8 | -------------------------------------------------------------------------------- /pretter.config.js: -------------------------------------------------------------------------------- 1 | // https://prettier.io/docs/en/configuration.html 2 | module.exports = { 3 | printWidth: 120, 4 | tabWidth: 2, 5 | singleQuote: true, 6 | trailingComma: "all", 7 | overrides: [ 8 | { 9 | // These files may be run as-is in IE 11 and must not have ES5-incompatible trailing commas 10 | files: ["*.html", "*.htm"], 11 | options: { 12 | trailingComma: "es5", 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /scripts/prepare.js: -------------------------------------------------------------------------------- 1 | const { spawnSync } = require("child_process"); 2 | const chalk = require("chalk"); 3 | 4 | // git v2.9.0 supports a custom hooks directory. This means we just need to check in the hooks scripts. 5 | spawnSync("git", ["config", "core.hooksPath", ".githooks"]); 6 | 7 | console.log(chalk.green("\nAll dependencies are installed!")); 8 | console.log(`For inner loop development, run: 9 | ${chalk.yellow("yarn start")} 10 | `); 11 | -------------------------------------------------------------------------------- /src/components/Chart/ChartTheme.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | 3 | import { 4 | Provider as FluentUIThemeProvider, 5 | mergeThemes, 6 | ComponentVariablesObject, 7 | } from "@fluentui/react-northstar"; 8 | 9 | import { ThemePrepared } from "@fluentui/styles"; 10 | 11 | export interface IChartThemeProps { 12 | globalTheme: ThemePrepared; 13 | children: ReactNode; 14 | } 15 | 16 | const getLocalTheme = () => { 17 | return { 18 | componentStyles: { 19 | Box: { 20 | root: ({ theme }: ComponentVariablesObject) => ({ 21 | "--charts-axes-labels-fg": 22 | theme.siteVariables.colorScheme.default.foreground2, 23 | }), 24 | }, 25 | ToolbarMenuItem: { 26 | root: { 27 | padding: 0, 28 | }, 29 | }, 30 | }, 31 | }; 32 | }; 33 | 34 | export const ChartTheme = ({ globalTheme, children }: IChartThemeProps) => { 35 | const theme = mergeThemes(globalTheme, getLocalTheme()); 36 | return ( 37 | 38 | {children} 39 | 40 | ); 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/BarHorizontalStacked.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiteVariablesPrepared } from "@fluentui/react-northstar"; 3 | import { IChartData } from "../ChartTypes"; 4 | import { BarHorizontalChart } from "./BarHorizontal"; 5 | 6 | export const BarHorizontalStackedChart = ({ 7 | title, 8 | data, 9 | siteVariables, 10 | }: { 11 | title: string; 12 | data: IChartData; 13 | siteVariables: SiteVariablesPrepared; 14 | }) => ( 15 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/BarStacked.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiteVariablesPrepared } from "@fluentui/react-northstar"; 3 | import { IChartData } from "../ChartTypes"; 4 | import { BarChart } from "./Bar"; 5 | 6 | export const BarStackedChart = ({ 7 | title, 8 | data, 9 | siteVariables, 10 | }: { 11 | title: string; 12 | data: IChartData; 13 | siteVariables: SiteVariablesPrepared; 14 | }) => ( 15 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/Doughnut.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiteVariablesPrepared } from "@fluentui/react-northstar"; 3 | import { IChartData } from "../ChartTypes"; 4 | import { PieChart } from "./Pie"; 5 | 6 | export const DoughnutChart = ({ 7 | title, 8 | data, 9 | siteVariables, 10 | }: { 11 | title: string; 12 | data: IChartData; 13 | siteVariables: SiteVariablesPrepared; 14 | }) => ( 15 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/EmptyState.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Flex, 4 | InfoIcon, 5 | SiteVariablesPrepared, 6 | } from "@fluentui/react-northstar"; 7 | import { TeamsTheme } from "../../../themes"; 8 | 9 | export function ChartEmptyState({ 10 | siteVariables, 11 | }: { 12 | siteVariables: SiteVariablesPrepared; 13 | }) { 14 | let textColor; 15 | switch (siteVariables.theme) { 16 | case TeamsTheme.Dark: 17 | textColor = siteVariables.colors.grey["400"]; 18 | break; 19 | case TeamsTheme.HighContrast: 20 | textColor = siteVariables.colors.white; 21 | break; 22 | case TeamsTheme.Default: 23 | default: 24 | textColor = siteVariables.colors.grey["400"]; 25 | break; 26 | } 27 | const { t } = siteVariables; 28 | return ( 29 | 39 | {t["no data"]} 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/ErrorState.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Flex, 4 | InfoIcon, 5 | SiteVariablesPrepared, 6 | } from "@fluentui/react-northstar"; 7 | import { TeamsTheme } from "../../../themes"; 8 | 9 | export function ChartErrorState({ 10 | siteVariables, 11 | }: { 12 | siteVariables: SiteVariablesPrepared; 13 | }) { 14 | let textColor; 15 | switch (siteVariables.theme) { 16 | case TeamsTheme.Dark: 17 | textColor = siteVariables.colors.red["300"]; 18 | break; 19 | case TeamsTheme.HighContrast: 20 | textColor = siteVariables.colors.white; 21 | break; 22 | case TeamsTheme.Default: 23 | default: 24 | textColor = siteVariables.colors.red["400"]; 25 | break; 26 | } 27 | const { t } = siteVariables; 28 | return ( 29 | 39 | {" "} 40 | {t["could not load data"]} 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/LineArea.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiteVariablesPrepared } from "@fluentui/react-northstar"; 3 | import { IChartData } from "../ChartTypes"; 4 | import { LineChart } from "./Line"; 5 | 6 | export const LineAreaChart = ({ 7 | title, 8 | data, 9 | siteVariables, 10 | }: { 11 | title: string; 12 | data: IChartData; 13 | siteVariables: SiteVariablesPrepared; 14 | }) => ( 15 | 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/Chart/Charts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Line"; 2 | export * from "./LineArea"; 3 | export * from "./LineStacked"; 4 | export * from "./Bar"; 5 | export * from "./BarStacked"; 6 | export * from "./BarHorizontal"; 7 | export * from "./BarHorizontalStacked"; 8 | export * from "./Pie"; 9 | export * from "./Doughnut"; 10 | export * from "./ErrorState"; 11 | export * from "./EmptyState"; 12 | export * from "./Bubble"; 13 | -------------------------------------------------------------------------------- /src/components/Chart/index.ts: -------------------------------------------------------------------------------- 1 | export { Chart as default } from "./Chart"; 2 | -------------------------------------------------------------------------------- /src/components/Communication/CommunicationOptions/Welcome.tsx: -------------------------------------------------------------------------------- 1 | export const WELCOME_MESSAGE = { 2 | title: `Welcome to {{appName}}! We’re glad you’re here.`, 3 | desc: `{{appName}} is your tool to create, take, and manage polls.`, 4 | actions: { 5 | primary: { 6 | label: "Sign In", 7 | target: "sign-in", 8 | }, 9 | secondary: { 10 | label: "Sign Up", 11 | target: "register", 12 | }, 13 | tertiary: { 14 | label: "Learn more about {{appName}}", 15 | target: "info:{{appName}}", 16 | }, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/Communication/CommunicationOptions/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Default"; 2 | export * from "./Empty"; 3 | export * from "./Error"; 4 | export * from "./Hello"; 5 | export * from "./Thanks"; 6 | export * from "./Welcome"; 7 | -------------------------------------------------------------------------------- /src/components/Communication/Illustration/Illustration.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@fluentui/react-northstar"; 3 | 4 | export const Illustration = ({ option }: { option: React.ReactNode }) => ( 5 | 15 | {React.cloneElement(option as any, { 16 | style: { width: "100%", height: "100%" }, 17 | })} 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /src/components/Communication/Illustration/index.ts: -------------------------------------------------------------------------------- 1 | export { Illustration } from "./Illustration"; 2 | -------------------------------------------------------------------------------- /src/components/Communication/index.ts: -------------------------------------------------------------------------------- 1 | export { Communication } from "./Communication"; 2 | export * from "./CommunicationTypes"; 3 | -------------------------------------------------------------------------------- /src/components/Dashboard/Placeholder.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Text } from "@fluentui/react-northstar"; 2 | import React from "react"; 3 | 4 | /** 5 | * @internal 6 | */ 7 | const Placeholder = ({ message }: { message: string }) => { 8 | return ( 9 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | }; 20 | 21 | export { Placeholder }; 22 | -------------------------------------------------------------------------------- /src/components/Form/index.ts: -------------------------------------------------------------------------------- 1 | export { Form as default } from "./Form"; 2 | -------------------------------------------------------------------------------- /src/lib/CustomScrollArea.tsx: -------------------------------------------------------------------------------- 1 | import ReactPerfectScrollbar from "react-perfect-scrollbar"; 2 | 3 | export default ReactPerfectScrollbar as any; 4 | -------------------------------------------------------------------------------- /src/lib/isImage.tsx: -------------------------------------------------------------------------------- 1 | const isImage = (url: string) => 2 | new Promise((resolve, reject) => { 3 | // check that is a valid url 4 | // then if valid url 5 | const image = new Image(); 6 | image.src = url; 7 | image.onload = resolve; 8 | image.onerror = reject; 9 | }); 10 | 11 | export const isImageOrNot = (input: string): Promise => 12 | new Promise((resolve) => { 13 | if (/(jpg|gif|png|jpeg|svg|webp)$/i.test(input)) { 14 | isImage(input).then( 15 | (value: unknown): void => { 16 | if ( 17 | (value as any).path[0].width > 0 && 18 | (value as any).path[0].height 19 | ) { 20 | resolve(); 21 | } else { 22 | throw new Error( 23 | `Fail to process the image by the following link: ${input} \n Image size is 0` 24 | ); 25 | } 26 | }, 27 | () => { 28 | throw new Error( 29 | `Fail to process the image by the following link: ${input}` 30 | ); 31 | } 32 | ); 33 | } else { 34 | throw new Error( 35 | `Failed to upload image: ${input} \n Image format not supported, supported formats: JPG, JPEG, GIF, PNG, SVG, WEBP` 36 | ); 37 | } 38 | }); 39 | -------------------------------------------------------------------------------- /src/lib/setMultiple.ts: -------------------------------------------------------------------------------- 1 | import set from "lodash/set"; 2 | 3 | type TSetMultipleArg = { [path: string]: any }; 4 | 5 | export default (target: object, setMultiple: TSetMultipleArg) => 6 | Object.keys(setMultiple).reduce((acc, path) => { 7 | return set(acc, path, setMultiple[path]); 8 | }, target); 9 | -------------------------------------------------------------------------------- /src/themes/constants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @public 3 | */ 4 | export enum TeamsTheme { 5 | HighContrast = "teamsHighContrastTheme", 6 | Dark = "teamsDarkTheme", 7 | Default = "teamsTheme", 8 | } 9 | -------------------------------------------------------------------------------- /src/themes/index.ts: -------------------------------------------------------------------------------- 1 | // Based upon TMP's `teams-stardust-ui` 2 | 3 | export { TeamsTheme } from "./constants"; 4 | 5 | // Teams high contrast theme overrides 6 | export { highContrastThemeOverrides } from "./teams-high-contrast/theme"; 7 | 8 | // Teams defaultV2 theme overrides 9 | export { defaultV2ThemeOverrides } from "./teams-v2/theme"; 10 | 11 | // Teams darkV2 theme overrides 12 | export { darkV2ThemeOverrides } from "./teams-dark-v2/theme"; 13 | -------------------------------------------------------------------------------- /src/themes/shared/components/Avatar/avatar-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | const avatarContentStyles = { 7 | borderColor: "var(--surface-background-color, transparent)", 8 | borderRadius: "var(--avatar__border-radius, 9999px)", 9 | clipPath: "var(--avatar__clip-path, none)", 10 | }; 11 | 12 | export const avatarStyles: ComponentSlotStylesPrepared< 13 | NonNullable>, 14 | any 15 | > = { 16 | image: () => { 17 | return avatarContentStyles; 18 | }, 19 | label: () => { 20 | return avatarContentStyles; 21 | }, 22 | icon: () => { 23 | return avatarContentStyles; 24 | }, 25 | root: () => { 26 | return { 27 | backgroundColor: "var(--surface-background-color, transparent)", 28 | }; 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/themes/shared/components/Button/button-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const buttonStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: (componentStyleParameters) => { 11 | const { 12 | theme: { 13 | siteVariables: { colorScheme }, 14 | }, 15 | props: { primary, text }, 16 | } = componentStyleParameters; 17 | return { 18 | borderRadius: "4px", 19 | color: colorScheme.default.foreground, 20 | ...(!text && { 21 | boxShadow: colorScheme.elevations[4], 22 | ...(primary && { 23 | color: colorScheme.brand.foregroundHover1, 24 | }), 25 | "&:active": { 26 | boxShadow: colorScheme.elevations[2], 27 | }, 28 | }), 29 | }; 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/themes/shared/components/Button/buttonContent-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const buttonContentStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: () => { 11 | return { 12 | fontWeight: "var(--button__content--font-weight, 400)" as "inherit", 13 | }; 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/themes/shared/components/Card/card-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const cardStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: () => { 11 | return { 12 | borderRadius: "4px", 13 | }; 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/themes/shared/components/Checkbox/checkbox-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const checkboxStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: (componentStyleParameters) => { 11 | const { variables } = componentStyleParameters; 12 | return { 13 | padding: ".25rem .3125rem", 14 | ...(variables.layout === "radio-like" && { 15 | display: "grid", 16 | gridTemplateColumns: "auto 0.75rem 1fr", 17 | }), 18 | }; 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/themes/shared/components/Form/formMessage-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const formMessageStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: () => { 11 | return { 12 | paddingLeft: 0, 13 | }; 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/themes/shared/components/Input/input-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | import { Surface } from "../../../../types/types"; 6 | import { TeamsTheme } from "../../../constants"; 7 | 8 | export const inputStyles: ComponentSlotStylesPrepared< 9 | NonNullable>, 10 | any 11 | > = { 12 | input: (componentStyleParameters) => { 13 | const { 14 | variables, 15 | theme: { 16 | siteVariables: { colorScheme, theme }, 17 | }, 18 | } = componentStyleParameters; 19 | return { 20 | backgroundColor: (() => { 21 | switch (variables.surface) { 22 | case Surface.base: 23 | return colorScheme.default.background; 24 | case Surface.raised: 25 | default: 26 | switch (theme as TeamsTheme) { 27 | case TeamsTheme.Dark: 28 | return colorScheme.default.background1; 29 | default: 30 | return colorScheme.default.background2; 31 | } 32 | } 33 | })(), 34 | }; 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/themes/shared/components/Table/tableCell-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const tableCellStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | content: ({ 11 | theme: { 12 | siteVariables: { colorScheme }, 13 | }, 14 | }) => { 15 | return { 16 | fontSize: "var(--table-cell__content--font-size, 0.875rem)" as "inherit", 17 | color: 18 | `var(--table-cell__content--color, ${colorScheme.default.foreground})` as unknown as "inherit", 19 | backgroundColor: 20 | `var(--table-cell__content--background-color, transparent)` as "inherit", 21 | width: "100%", 22 | }; 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/themes/shared/components/Table/tableRow-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const tableRowStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: ({ 11 | props: { header }, 12 | theme: { 13 | siteVariables: { colorScheme }, 14 | }, 15 | }) => { 16 | return { 17 | borderBottomColor: colorScheme.default.border2, 18 | ...(header && { "--table-cell__content--font-size": "0.75rem" }), 19 | "&:hover": { 20 | backgroundColor: `${colorScheme.default.background4} !important`, 21 | borderLeftColor: `${colorScheme.default.background4} !important`, 22 | borderTopColor: `${colorScheme.default.background4} !important`, 23 | borderRightColor: `${colorScheme.default.background4} !important`, 24 | borderBottomColor: `${colorScheme.default.border2} !important`, 25 | }, 26 | }; 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/themes/shared/components/Tree/treeTitle-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const treeTitleStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | selectionIndicator: () => { 11 | return { 12 | // This should always be displayed per WGAG §1.3: 13 | // https://www.w3.org/TR/WCAG20/#content-structure-separation. 14 | // Otherwise tree items that are selectable appear identical to tree items that are not to 15 | // users who cannot hover with a pointer device. 16 | // A consistent fix has not arrived in Fluent UI as of v0.56: 17 | // https://github.com/microsoft/fluentui/issues/14720 18 | display: "inherit", 19 | }; 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/themes/shared/static-styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom static styles. 3 | * 4 | * ! Avoid adding anything to this export, unless absolutely necessary. 5 | * ! Rather, refactor these definitions into component-specific styles. 6 | */ 7 | 8 | const focusableSelectors = [ 9 | ":focus", 10 | ".ui-dropdown__container", 11 | ".ui-dropdown__item", 12 | ]; 13 | 14 | export const staticStyles = [ 15 | `${focusableSelectors 16 | .map( 17 | (selector) => 18 | `html[data-whatinput="keyboard"] ${selector}::before, html[data-whatinput="keyboard"] ${selector}::after` 19 | ) 20 | .join(", ")} { 21 | border-width: 2px !important; 22 | border-radius: 4px !important; 23 | }`, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/themes/teams-dark-v2/components/Alert/alert-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | type AlertVars = { 7 | statusNote: boolean; 8 | }; 9 | 10 | export const alertStyles: ComponentSlotStylesPrepared< 11 | NonNullable>, 12 | Partial 13 | > = { 14 | root: (componentStyleParameters) => { 15 | const { 16 | theme: { 17 | siteVariables: { colorScheme }, 18 | }, 19 | variables: { statusNote }, 20 | } = componentStyleParameters; 21 | const { default: colorSchemeDefault } = colorScheme; 22 | 23 | return { 24 | ...(statusNote && { 25 | backgroundColor: colorSchemeDefault.background4, 26 | }), 27 | }; 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/themes/teams-dark-v2/components/Flex/flex-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | type FlexVars = { 7 | isCallingSidePanel: boolean; 8 | appTileVertical: boolean; 9 | }; 10 | 11 | export const flexStyles: ComponentSlotStylesPrepared< 12 | NonNullable>, 13 | Partial 14 | > = { 15 | root: (componentStyleParameters) => { 16 | const { 17 | theme: { 18 | siteVariables: { colorScheme }, 19 | }, 20 | variables: { isCallingSidePanel, appTileVertical }, 21 | } = componentStyleParameters; 22 | const { default: colorSchemeDefault } = colorScheme; 23 | return { 24 | ...(isCallingSidePanel && { 25 | background: colorSchemeDefault.background2, 26 | borderLeft: `.1rem solid ${colorSchemeDefault.border2}`, 27 | }), 28 | ...(appTileVertical && { 29 | color: colorSchemeDefault.foreground1, 30 | ":hover": { 31 | backgroundColor: colorSchemeDefault.backgroundHover, 32 | color: colorSchemeDefault.foregroundHover, 33 | }, 34 | }), 35 | }; 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/themes/teams-dark-v2/components/Tree/tree-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TreeProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | type TreeVars = { 7 | isCallingRoster: boolean; 8 | }; 9 | 10 | export const treeStyles: ComponentSlotStylesPrepared< 11 | Partial, 12 | Partial 13 | > = { 14 | root: (componentStyleParameters) => { 15 | const { 16 | variables: { isCallingRoster }, 17 | theme: { 18 | siteVariables: { 19 | colorScheme: { default: colorSchemeDefault }, 20 | }, 21 | }, 22 | } = componentStyleParameters; 23 | return { 24 | ...(isCallingRoster && { 25 | backgroundColor: colorSchemeDefault.background2, 26 | }), 27 | }; 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/themes/teams-dark-v2/static-styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom static styles. 3 | * 4 | * ! Avoid adding anything to this export, unless absolutely necessary. 5 | * ! Rather, refactor these definitions into component-specific styles. 6 | */ 7 | export const staticStyles = []; 8 | -------------------------------------------------------------------------------- /src/themes/teams-dark-v2/theme.ts: -------------------------------------------------------------------------------- 1 | import { ThemePrepared, teamsDarkTheme } from "@fluentui/react-northstar"; 2 | import { mergeSharedComponentStyles, sharedStaticStyles } from "../shared"; 3 | 4 | /** 5 | * Custom override styles, as needed, for each exported Stardust component. 6 | * All component-specific styling should be defined in these functions. 7 | */ 8 | import { alertStyles } from "./components/Alert/alert-styles"; 9 | import { flexStyles } from "./components/Flex/flex-styles"; 10 | import { treeStyles } from "./components/Tree/tree-styles"; 11 | 12 | import { staticStyles } from "./static-styles"; 13 | 14 | import siteVariables from "./site-variables"; 15 | 16 | /** 17 | * TFW 2 dark theme overrides 18 | */ 19 | export const darkV2ThemeOverrides: Partial = { 20 | componentStyles: mergeSharedComponentStyles({ 21 | Alert: alertStyles, 22 | Flex: flexStyles, 23 | Tree: treeStyles, 24 | }), 25 | siteVariables: { 26 | ...teamsDarkTheme.siteVariables, 27 | ...siteVariables, 28 | }, 29 | staticStyles: sharedStaticStyles.concat(staticStyles), 30 | }; 31 | -------------------------------------------------------------------------------- /src/themes/teams-high-contrast/components/Button/button-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const buttonStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: (componentStyleParameters) => { 11 | const { 12 | theme: { 13 | siteVariables: { colorScheme }, 14 | }, 15 | props: { primary, text }, 16 | } = componentStyleParameters; 17 | return { 18 | borderRadius: "4px", 19 | borderStyle: "solid", 20 | "&:hover": { 21 | borderColor: colorScheme.default.borderHover, 22 | backgroundColor: colorScheme.default.backgroundHover, 23 | color: colorScheme.default.foregroundHover + " !important", 24 | }, 25 | "&:focus": { 26 | backgroundColor: 27 | !text && primary 28 | ? colorScheme.brand.background + " !important" 29 | : colorScheme.default.background + " !important", 30 | color: 31 | !text && primary 32 | ? colorScheme.brand.foreground4 33 | : colorScheme.default.foreground + " !important", 34 | }, 35 | }; 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/themes/teams-high-contrast/components/Card/card-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | export const cardStyles: ComponentSlotStylesPrepared< 7 | NonNullable>, 8 | any 9 | > = { 10 | root: ({ 11 | theme: { 12 | siteVariables: { colorScheme }, 13 | }, 14 | variables: {}, 15 | }) => { 16 | return { 17 | borderRadius: "4px", 18 | borderColor: colorScheme.default.border, 19 | "&:hover": { 20 | backgroundColor: colorScheme.default.background, 21 | borderColor: colorScheme.default.borderHover, 22 | }, 23 | }; 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/themes/teams-high-contrast/static-styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom static styles. 3 | * 4 | * ! Avoid adding anything to this export, unless absolutely necessary. 5 | * ! Rather, refactor these definitions into component-specific styles. 6 | */ 7 | export const staticStyles = []; 8 | -------------------------------------------------------------------------------- /src/themes/teams-high-contrast/theme.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ThemePrepared, 3 | teamsHighContrastTheme, 4 | } from "@fluentui/react-northstar"; 5 | import { mergeSharedComponentStyles, sharedStaticStyles } from "../shared"; 6 | 7 | // Teams high contrast theme 8 | /** 9 | * Custom override styles, as needed, for each exported Stardust component. 10 | * All component-specific styling should be defined in these functions. 11 | */ 12 | import siteVariables from "./site-variables"; 13 | import { staticStyles } from "./static-styles"; 14 | 15 | import { buttonStyles } from "./components/Button/button-styles"; 16 | import { cardStyles } from "./components/Card/card-styles"; 17 | 18 | export const highContrastThemeOverrides: Partial = { 19 | componentStyles: mergeSharedComponentStyles({ 20 | Button: buttonStyles, 21 | Card: cardStyles, 22 | }), 23 | componentVariables: {}, 24 | siteVariables: { 25 | ...teamsHighContrastTheme.siteVariables, 26 | ...siteVariables, 27 | }, 28 | staticStyles: sharedStaticStyles.concat(staticStyles), 29 | }; 30 | -------------------------------------------------------------------------------- /src/themes/teams-v2/components/Alert/alert-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | type AlertVars = { 7 | statusNote: boolean; 8 | }; 9 | 10 | export const alertStyles: ComponentSlotStylesPrepared< 11 | NonNullable>, 12 | Partial 13 | > = { 14 | root: (componentStyleParameters) => { 15 | const { 16 | theme: { 17 | siteVariables: { colorScheme }, 18 | }, 19 | variables: { statusNote }, 20 | } = componentStyleParameters; 21 | const { default: colorSchemeDefault } = colorScheme; 22 | return { 23 | ...(statusNote && { 24 | backgroundColor: colorSchemeDefault.background4, 25 | }), 26 | }; 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/themes/teams-v2/components/Flex/flex-styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentSlotStylesPrepared, 3 | TeamsThemeStylesProps, 4 | } from "@fluentui/react-northstar"; 5 | 6 | type FlexVars = { 7 | appTileVertical: boolean; 8 | }; 9 | 10 | export const flexStyles: ComponentSlotStylesPrepared< 11 | NonNullable>, 12 | Partial 13 | > = { 14 | root: (componentStyleParameters) => { 15 | const { 16 | theme: { 17 | siteVariables: { colorScheme }, 18 | }, 19 | variables: { appTileVertical }, 20 | } = componentStyleParameters; 21 | const { default: colorSchemeDefault } = colorScheme; 22 | return { 23 | ...(appTileVertical && { 24 | color: colorSchemeDefault.foreground1, 25 | ":hover": { 26 | backgroundColor: colorSchemeDefault.backgroundHover, 27 | color: colorSchemeDefault.foregroundHover, 28 | }, 29 | }), 30 | }; 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/themes/teams-v2/static-styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom static styles. 3 | * 4 | * ! Avoid adding anything to this export, unless absolutely necessary. 5 | * ! Rather, refactor these definitions into component-specific styles. 6 | */ 7 | export const staticStyles = []; 8 | -------------------------------------------------------------------------------- /src/themes/teams-v2/theme.ts: -------------------------------------------------------------------------------- 1 | import { ThemePrepared, teamsTheme } from "@fluentui/react-northstar"; 2 | import { mergeSharedComponentStyles, sharedStaticStyles } from "../shared"; 3 | 4 | /** 5 | * Custom override styles, as needed, for each exported Stardust component. 6 | * All component-specific styling should be defined in these functions. 7 | */ 8 | import { alertStyles } from "./components/Alert/alert-styles"; 9 | import { flexStyles } from "./components/Flex/flex-styles"; 10 | 11 | import { staticStyles } from "./static-styles"; 12 | 13 | import siteVariables from "./site-variables"; 14 | 15 | /** 16 | * TFW 2 default theme overrides 17 | */ 18 | export const defaultV2ThemeOverrides: Partial = { 19 | componentStyles: mergeSharedComponentStyles({ 20 | Alert: alertStyles, 21 | Flex: flexStyles, 22 | }), 23 | siteVariables: { 24 | ...teamsTheme.siteVariables, 25 | ...siteVariables, 26 | }, 27 | staticStyles: sharedStaticStyles.concat(staticStyles), 28 | }; 29 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "ES2020", 5 | "moduleResolution": "Node", 6 | "jsx": "react", 7 | "strict": true, 8 | "allowSyntheticDefaultImports": true, 9 | "esModuleInterop": true, 10 | "declaration": true, 11 | "declarationMap": true, 12 | "outDir": "lib", 13 | "sourceMap": true, 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src"] 17 | } 18 | --------------------------------------------------------------------------------