From 001885ba76c45534fbc8858d1ac0565b0d6d3f92 Mon Sep 17 00:00:00 2001 From: Sunil Surana Date: Thu, 27 Oct 2022 14:17:51 +0530 Subject: [PATCH] sync changes (#17) * Update Link.stories.tsx * Update Link.stories.tsx * update * chore(babel-preset-global-context): migrate to new package structure (#25340) * chore(react-aria): migrate to new package structure (#25199) * feat: re-export react-table logic hooks (#25386) * applying package updates * Website: fix focus border on UHF footer links (#25389) * use not uhf link to increase specificity instead of body tag * improve comment * fix(docsite): codesandbox exports now working properly for newly migrated v9 packages (#25388) * chore(react-divider): migrate to new package structure (#25360) * chore(react-select): migrate to new package structure (#25359) * feat: Add support for the wbtx whiteboard file extension (#25346) * revert some changes * update storywright version * rename * rename * updatE * update * update * update * update * not needed * update * update Co-authored-by: Tristan Watanabe Co-authored-by: Bernardo Sunderhus Co-authored-by: Fluent UI Build Co-authored-by: Micah Godbolt Co-authored-by: jieleiwang <51342814+jieleiwang@users.noreply.github.com> --- .devcontainer/devcontainer.json | 2 +- .storybook/main.js | 5 +- apps/perf-test/README.md | 2 +- apps/public-docsite-v9/package.json | 2 +- apps/public-docsite/src/styles/_base.scss | 2 +- apps/ssr-tests-v9/package.json | 2 +- apps/stress-test/package.json | 2 +- apps/tmp/Accordion.stories.tsx | 161 ----- apps/tmp/Avatar.stories.tsx | 238 ------- apps/tmp/AvatarGroup.stories.tsx | 161 ----- apps/tmp/Button.stories.tsx | 569 ----------------- apps/tmp/Card.stories.tsx | 261 -------- apps/tmp/Checkbox.stories.tsx | 84 --- apps/tmp/Divider.stories.tsx | 58 -- apps/tmp/Field.stories.tsx | 98 --- apps/tmp/Image.stories.tsx | 102 --- apps/tmp/Input.stories.tsx | 59 -- apps/tmp/Label.stories.tsx | 44 -- apps/tmp/Link.stories.tsx | 59 -- apps/tmp/MakeStyles.stories.tsx | 214 ------- apps/tmp/Menu.stories.tsx | 411 ------------- apps/tmp/Persona.stories.tsx | 94 --- apps/tmp/Popover.stories.tsx | 103 ---- apps/tmp/Positioning.stories.tsx | 580 ------------------ apps/tmp/Radio.stories.tsx | 108 ---- apps/tmp/Select.stories.tsx | 81 --- apps/tmp/Slider.stories.tsx | 33 - apps/tmp/SpinButton.stories.tsx | 166 ----- apps/tmp/Switch.stories.tsx | 73 --- apps/tmp/Table.stories.tsx | 559 ----------------- apps/tmp/Tabs.stories.tsx | 190 ------ apps/tmp/Text.stories.tsx | 157 ----- apps/tmp/Textarea.stories.tsx | 41 -- apps/tmp/Tooltip.stories.tsx | 134 ---- .../package.json | 2 +- .../convertStoriesToStoryWright.sh | 5 + apps/vr-tests-react-components/package.json | 3 +- .../src/stories/Accordion.stories.tsx | 12 +- .../src/stories/Avatar.stories.tsx | 4 +- .../src/stories/AvatarGroup.stories.tsx | 8 +- .../src/stories/Button.stories.tsx | 18 +- .../src/stories/Card.stories.tsx | 12 +- .../src/stories/Checkbox.stories.tsx | 8 +- .../src/stories/Divider.stories.tsx | 6 +- .../src/stories/Field.stories.tsx | 6 +- .../src/stories/Image.stories.tsx | 4 +- .../src/stories/Input.stories.tsx | 8 +- .../src/stories/Label.stories.tsx | 8 +- .../src/stories/Link.stories.tsx | 18 +- .../src/stories/MakeStyles.stories.tsx | 10 +- .../src/stories/Menu.stories.tsx | 36 +- .../src/stories/Persona.stories.tsx | 4 +- .../src/stories/Popover.stories.tsx | 15 +- .../src/stories/Positioning.stories.tsx | 8 +- .../src/stories/Radio.stories.tsx | 8 +- .../src/stories/Select.stories.tsx | 8 +- .../src/stories/Slider.stories.tsx | 6 +- .../src/stories/SpinButton.stories.tsx | 16 +- .../src/stories/Switch.stories.tsx | 6 +- .../src/stories/Table.stories.tsx | 4 +- .../src/stories/Tabs.stories.tsx | 8 +- .../src/stories/Text.stories.tsx | 6 +- .../src/stories/Textarea.stories.tsx | 8 +- .../src/stories/Tooltip.stories.tsx | 11 +- azure-pipelines.vrt-baseline.yml | 6 +- azure-pipelines.vrt-pr.yml | 6 +- azure-pipelines.yml | 111 ++++ ...-2bfdd93e-d2cd-4f3b-9b89-c452876fb730.json | 7 + ...-3e3148e6-21ff-4e59-9183-5797110af256.json | 7 + ...-be677e57-0564-45b5-9366-0c4bd90d52d9.json | 7 + ghdocs/README.md | 2 +- .../babel-preset-global-context/.npmignore | 5 +- .../CHANGELOG.json | 15 + .../{e2e/Test.e2e.tsx => src/Test.cy.tsx} | 20 +- .../fake_node_modules/context-v1.0.0/index.ts | 1 + .../context-v1.0.0/package.json | 0 .../fake_node_modules/context-v1.1.0/index.ts | 1 + .../context-v1.1.0/package.json | 0 .../fake_node_modules/context-v2.0.0/index.ts | 1 + .../context-v2.0.0/package.json | 0 .../ignored-context-v1.0.0/index.ts | 1 + .../ignored-context-v1.0.0/package.json | 0 .../ignored-context-v1.1.0/index.ts | 1 + .../ignored-context-v1.1.0/package.json | 0 .../{e2e/tsconfig.json => tsconfig.cy.json} | 4 +- .../babel-preset-global-context/tsconfig.json | 2 +- .../tsconfig.lib.json | 2 +- .../tsconfig.spec.json | 10 +- .../react-components/react-aria/.npmignore | 5 +- .../react-aria/.storybook/main.js | 2 +- .../react-aria/.storybook/tsconfig.json | 2 +- .../react-aria/CHANGELOG.json | 15 + .../react-aria/{ => docs}/Spec.md | 0 .../useARIAButton/index.stories.tsx} | 4 +- .../react-aria/tsconfig.spec.json | 10 +- .../react-components/CHANGELOG.json | 29 + .../react-components/CHANGELOG.md | 12 +- .../etc/react-components.unstable.api.md | 34 + .../react-components/package.json | 2 +- .../react-components/src/unstable/index.ts | 13 + .../react-components/react-divider/.npmignore | 5 +- .../react-divider/.storybook/main.js | 2 +- .../react-divider/.storybook/tsconfig.json | 2 +- .../react-divider/{ => docs}/MIGRATION.md | 0 .../react-divider/{ => docs}/Spec.md | 0 .../src/components/Divider/Divider.test.tsx | 2 +- .../src/{common => testing}/isConformant.ts | 0 .../Divider/DividerAlignContent.stories.tsx | 0 .../Divider/DividerAppearance.stories.tsx | 0 .../Divider/DividerCustomStyles.stories.tsx | 0 .../Divider/DividerDefault.stories.tsx | 0 .../stories/Divider/DividerDescription.md | 0 .../stories/Divider/DividerInset.stories.tsx | 0 .../Divider/DividerVertical.stories.tsx | 0 .../stories/Divider/index.stories.tsx | 0 .../react-divider/tsconfig.lib.json | 2 +- .../react-divider/tsconfig.spec.json | 10 +- .../react-persona/MIGRATION.md | 1 - .../react-portal-compat/CHANGELOG.json | 15 + .../react-portal-compat/CHANGELOG.md | 11 +- .../react-portal-compat/package.json | 6 +- .../react-components/react-select/.npmignore | 5 +- .../react-select/.storybook/main.js | 2 +- .../react-select/.storybook/tsconfig.json | 2 +- .../react-select/{ => docs}/Spec.md | 0 .../src/components/Select/Select.test.tsx | 2 +- .../src/{common => testing}/isConformant.ts | 0 .../Select/SelectAppearance.stories.tsx | 0 .../stories/Select/SelectBestPractices.md | 0 .../Select/SelectControlled.stories.tsx | 0 .../stories/Select/SelectDefault.stories.tsx | 0 .../stories/Select/SelectDescription.md | 0 .../stories/Select/SelectDisabled.stories.tsx | 0 .../Select/SelectInitialValue.stories.tsx | 0 .../stories/Select/SelectSize.stories.tsx | 0 .../stories/Select/index.stories.tsx | 0 .../react-select/tsconfig.lib.json | 2 +- .../react-select/tsconfig.spec.json | 10 +- .../theme-designer/package.json | 2 +- .../src/FileTypeIconMap.ts | 2 +- packages/react-migration-v8-v9/package.json | 2 +- yarn.lock | 18 +- 142 files changed, 531 insertions(+), 5040 deletions(-) delete mode 100644 apps/tmp/Accordion.stories.tsx delete mode 100644 apps/tmp/Avatar.stories.tsx delete mode 100644 apps/tmp/AvatarGroup.stories.tsx delete mode 100644 apps/tmp/Button.stories.tsx delete mode 100644 apps/tmp/Card.stories.tsx delete mode 100644 apps/tmp/Checkbox.stories.tsx delete mode 100644 apps/tmp/Divider.stories.tsx delete mode 100644 apps/tmp/Field.stories.tsx delete mode 100644 apps/tmp/Image.stories.tsx delete mode 100644 apps/tmp/Input.stories.tsx delete mode 100644 apps/tmp/Label.stories.tsx delete mode 100644 apps/tmp/Link.stories.tsx delete mode 100644 apps/tmp/MakeStyles.stories.tsx delete mode 100644 apps/tmp/Menu.stories.tsx delete mode 100644 apps/tmp/Persona.stories.tsx delete mode 100644 apps/tmp/Popover.stories.tsx delete mode 100644 apps/tmp/Positioning.stories.tsx delete mode 100644 apps/tmp/Radio.stories.tsx delete mode 100644 apps/tmp/Select.stories.tsx delete mode 100644 apps/tmp/Slider.stories.tsx delete mode 100644 apps/tmp/SpinButton.stories.tsx delete mode 100644 apps/tmp/Switch.stories.tsx delete mode 100644 apps/tmp/Table.stories.tsx delete mode 100644 apps/tmp/Tabs.stories.tsx delete mode 100644 apps/tmp/Text.stories.tsx delete mode 100644 apps/tmp/Textarea.stories.tsx delete mode 100644 apps/tmp/Tooltip.stories.tsx create mode 100755 apps/vr-tests-react-components/convertStoriesToStoryWright.sh create mode 100644 azure-pipelines.yml create mode 100644 change/@fluentui-react-divider-2bfdd93e-d2cd-4f3b-9b89-c452876fb730.json create mode 100644 change/@fluentui-react-file-type-icons-3e3148e6-21ff-4e59-9183-5797110af256.json create mode 100644 change/@fluentui-react-select-be677e57-0564-45b5-9366-0c4bd90d52d9.json rename packages/react-components/babel-preset-global-context/{e2e/Test.e2e.tsx => src/Test.cy.tsx} (74%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v1.0.0/index.ts (77%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v1.0.0/package.json (100%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v1.1.0/index.ts (79%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v1.1.0/package.json (100%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v2.0.0/index.ts (77%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/context-v2.0.0/package.json (100%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/ignored-context-v1.0.0/index.ts (74%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/ignored-context-v1.0.0/package.json (100%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/ignored-context-v1.1.0/index.ts (77%) rename packages/react-components/babel-preset-global-context/{e2e => src/testing}/fake_node_modules/ignored-context-v1.1.0/package.json (100%) rename packages/react-components/babel-preset-global-context/{e2e/tsconfig.json => tsconfig.cy.json} (70%) rename packages/react-components/react-aria/{ => docs}/Spec.md (100%) rename packages/react-components/react-aria/{src/button/useARIAButton.stories.tsx => stories/useARIAButton/index.stories.tsx} (92%) rename packages/react-components/react-divider/{ => docs}/MIGRATION.md (100%) rename packages/react-components/react-divider/{ => docs}/Spec.md (100%) rename packages/react-components/react-divider/src/{common => testing}/isConformant.ts (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerAlignContent.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerAppearance.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerCustomStyles.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerDefault.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerDescription.md (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerInset.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/DividerVertical.stories.tsx (100%) rename packages/react-components/react-divider/{src => }/stories/Divider/index.stories.tsx (100%) rename packages/react-components/react-select/{ => docs}/Spec.md (100%) rename packages/react-components/react-select/src/{common => testing}/isConformant.ts (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectAppearance.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectBestPractices.md (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectControlled.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectDefault.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectDescription.md (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectDisabled.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectInitialValue.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/SelectSize.stories.tsx (100%) rename packages/react-components/react-select/{src => }/stories/Select/index.stories.tsx (100%) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 2d7b3cdd017cd7..9239298f19fa90 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,7 @@ // Update 'VARIANT' to pick a Node version: 16, 14, 12. // Append -bullseye or -buster to pin to an OS version. // Use -bullseye variants on local arm64/Apple Silicon. - "args": { "VARIANT": "16" } + "args": { "VARIANT": "14" } }, // Set *default* container specific settings.json values on container create. "settings": {}, diff --git a/.storybook/main.js b/.storybook/main.js index 8649db09333cd8..cce2e61868cd33 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,4 @@ -const path = require('path'); +const path = require('path'); const fs = require('fs'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); const exportToCodesandboxAddon = require('storybook-addon-export-to-codesandbox'); @@ -71,7 +71,8 @@ module.exports = /** @type {Omit} */ ({ */ enforce: 'post', test: /\.stories\.tsx$/, - include: /src/, + //TODO: simplify once all v9 packages have been migrated to new package structure. Tracking work: https://github.com/microsoft/fluentui/issues/24129 + include: /stories|src/, exclude: /node_modules/, use: { loader: 'babel-loader', diff --git a/apps/perf-test/README.md b/apps/perf-test/README.md index e002845ee9273c..8d79b10a98f26a 100644 --- a/apps/perf-test/README.md +++ b/apps/perf-test/README.md @@ -1,7 +1,7 @@ Performance testing with flamegraphs is a feature that runs on all PRs opened against Fluent UI and was introduced with [PR #9550](https://github.com/microsoft/fluentui/pull/9550). This page provides an overview of this feature. ## Sample Performance Test Results Table -a + Linked from [#9516](https://github.com/microsoft/fluentui/pull/9516#issuecomment-503795745), which made perf improvements to "New" Button components in `packages/react-experiments`, is a sample perf test comment: Component Perf Analysis: diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index f4d7fc2efc6f48..5faff2dd08c08d 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -26,7 +26,7 @@ "@fluentui/react-icons-northstar": "^0.64.0", "@fluentui/scripts": "^1.0.0", "@fluentui/storybook": "^1.0.0", - "@fluentui/react-components": "^9.6.0", + "@fluentui/react-components": "^9.6.1", "@fluentui/react-storybook-addon": "^9.0.0-rc.1", "@fluentui/react-theme": "^9.1.1", "@griffel/react": "^1.4.1", diff --git a/apps/public-docsite/src/styles/_base.scss b/apps/public-docsite/src/styles/_base.scss index c43bbda61f6c47..f5a8491bc0efb0 100644 --- a/apps/public-docsite/src/styles/_base.scss +++ b/apps/public-docsite/src/styles/_base.scss @@ -38,7 +38,7 @@ // Remove dotted outline added by MWF's main.css body [contentEditable=true]:focus, body [tabindex]:focus, - body a[href]:focus, + a[href]:not(.c-uhff-link):focus, // Remove link focus outline from all links but the UHF ones body area[href]:focus, body button:focus, body iframe:focus, diff --git a/apps/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json index 332195397a9c1e..40b18aa0348539 100644 --- a/apps/ssr-tests-v9/package.json +++ b/apps/ssr-tests-v9/package.json @@ -20,7 +20,7 @@ "type-check": "tsc -b tsconfig.json" }, "dependencies": { - "@fluentui/react-components": "^9.6.0" + "@fluentui/react-components": "^9.6.1" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index 61fb122934c993..bbb8d88e8e8413 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@fluentui/react": "^8.98.8", - "@fluentui/react-components": "^9.6.0", + "@fluentui/react-components": "^9.6.1", "@fluentui/react-icons": "^2.0.175", "@fluentui/web-components": "^2.5.8", "@microsoft/fast-element": "^1.10.4", diff --git a/apps/tmp/Accordion.stories.tsx b/apps/tmp/Accordion.stories.tsx deleted file mode 100644 index 556181a075a278..00000000000000 --- a/apps/tmp/Accordion.stories.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; -import { CircleRegular } from '@fluentui/react-icons'; - -storiesOf('Accordion Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - - .addStory( - 'visibility+focus', - () => ( - - - Opened - Opened Panel - - - Closed - Closed Panel - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ); - -storiesOf('Accordion Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - - .addStory( - 'size', - () => ( - - - Small - Small Panel - - - Medium - Medium Panel - - - Large - Large Panel - - - Extra Large - Extra Large Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'expandIconPosition="end"', - () => ( - - - Opened - Visible Panel - - - Closed - Hidden Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'expandIcon=""', - () => ( - - - } expandIconPosition="start"> - Expand Icon Start - - Expand Icon Start Panel - - - } expandIconPosition="end"> - Expand Icon End - - Expand Icon End Panel - - - } expandIconPosition="end"> - Expand Icon Inline End - - Expand Icon Inline End Panel - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'icon=""', - () => ( - - - } expandIconPosition="start"> - Icon Start - - Icon Start Panel - - - } expandIconPosition="end"> - Icon End - - Icon End Panel - - - } expandIconPosition="end"> - Icon Inline End - - Icon Inline End Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'disabled', - () => ( - - - Disabled Item Opened - Disabled Item Opened Panel - - - Disabled Item Closed - Disabled Item Closed Panel - - - Disabled Item ClosedInline - Disabled Item ClosedInline Panel - - - ), - { includeHighContrast: true, includeDarkMode: true }, - ); diff --git a/apps/tmp/Avatar.stories.tsx b/apps/tmp/Avatar.stories.tsx deleted file mode 100644 index 2d4fb4f024c5c3..00000000000000 --- a/apps/tmp/Avatar.stories.tsx +++ /dev/null @@ -1,238 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { Avatar, AvatarProps } from '@fluentui/react-avatar'; -import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; - -const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; - -/** Sample names and images for use in Avatar examples */ -const nameAndImage = [ - { name: 'Katri Athokas', image: `${imageRoot}/KatriAthokas.jpg` }, - { name: 'Elvia Atkins', image: `${imageRoot}/ElviaAtkins.jpg` }, - { name: 'Mauricio August', image: `${imageRoot}/MauricioAugust.jpg` }, - { name: 'Colin Ballinger', image: `${imageRoot}/ColinBallinger.jpg` }, - { name: 'Lydia Bauer', image: `${imageRoot}/LydiaBauer.jpg` }, - { name: 'Amanda Brady', image: `${imageRoot}/AmandaBrady.jpg` }, - { name: 'Henry Brill', image: `${imageRoot}/HenryBrill.jpg` }, - { name: 'Celeste Burton', image: `${imageRoot}/CelesteBurton.jpg` }, - { name: 'Robin Counts', image: `${imageRoot}/RobinCounts.jpg` }, - { name: 'Tim Deboer', image: `${imageRoot}/TimDeboer.jpg` }, - { name: 'Cameron Evans', image: `${imageRoot}/CameronEvans.jpg` }, - { name: 'Isaac Fielder', image: `${imageRoot}/IsaacFielder.jpg` }, - { name: 'Cecil Folk', image: `${imageRoot}/CecilFolk.jpg` }, - { name: 'Miguel Garcia', image: `${imageRoot}/MiguelGarcia.jpg` }, - { name: 'Wanda Howard', image: `${imageRoot}/WandaHoward.jpg` }, - { name: 'Mona Kane', image: `${imageRoot}/MonaKane.jpg` }, - { name: 'Kat Larsson', image: `${imageRoot}/KatLarsson.jpg` }, - { name: 'Ashley McCarthy', image: `${imageRoot}/AshleyMcCarthy.jpg` }, - { name: 'Johnie McConnell', image: `${imageRoot}/JohnieMcConnell.jpg` }, - { name: 'Allan Munger', image: `${imageRoot}/AllanMunger.jpg` }, - { name: 'Erik Nason', image: `${imageRoot}/ErikNason.jpg` }, - { name: 'Kristin Patterson', image: `${imageRoot}/KristinPatterson.jpg` }, - { name: 'Daisy Phillips', image: `${imageRoot}/DaisyPhillips.jpg` }, - { name: 'Carole Poland', image: `${imageRoot}/CarolePoland.jpg` }, - { name: 'Carlos Slattery', image: `${imageRoot}/CarlosSlattery.jpg` }, - { name: 'Robert Tolbert', image: `${imageRoot}/RobertTolbert.jpg` }, - { name: 'Kevin Sturgis', image: `${imageRoot}/KevinSturgis.jpg` }, - { name: 'Charlotte Waltson', image: `${imageRoot}/CharlotteWaltson.jpg` }, - { name: 'Elliot Woodward', image: `${imageRoot}/ElliotWoodward.jpg` }, -]; - -/** Arrays of example values for each Avatar prop */ -const examples = { - size: [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128], - nameAndImage: nameAndImage, - name: nameAndImage.map(p => p.name), - image: nameAndImage.map(p => p.image), - badge: [ - { status: 'available' }, - { status: 'away' }, - { status: 'busy' }, - { status: 'do-not-disturb' }, - { status: 'offline' }, - { status: 'out-of-office' }, - { status: 'available', outOfOffice: true }, - { status: 'away', outOfOffice: true }, - { status: 'busy', outOfOffice: true }, - { status: 'do-not-disturb', outOfOffice: true }, - { status: 'offline', outOfOffice: true }, - { status: 'out-of-office', outOfOffice: true }, - ], - activeDisplay: ['ring', 'ring-shadow', 'shadow'], - color: ['neutral', 'brand', 'colorful'], - namedColors: [ - 'dark-red', - 'cranberry', - 'red', - 'pumpkin', - 'peach', - 'marigold', - 'gold', - 'brass', - 'brown', - 'forest', - 'seafoam', - 'dark-green', - 'light-teal', - 'teal', - 'steel', - 'blue', - 'royal-blue', - 'cornflower', - 'navy', - 'lavender', - 'purple', - 'grape', - 'lilac', - 'pink', - 'magenta', - 'plum', - 'beige', - 'mink', - 'platinum', - 'anchor', - ], - /** A SVG hexagon data URL used by the CustomShape example */ - hexagon: - 'data:image/svg+xml;utf8,' + - '' + - '' + - '', -} as const; - -/** Renders an Avatar at every standard size */ -const AvatarList: React.FC< - AvatarProps & { - names?: readonly string[]; - images?: readonly string[]; - } -> = props => { - const { names, images, ...restOfProps } = props; - return ( -
- {examples.size.map((size, i) => ( - - ))} -
- ); -}; - -const customSizes: { baseSize: AvatarProps['size']; customSize: string }[] = [ - { baseSize: 20, customSize: '13px' }, - { baseSize: 20, customSize: '21px' }, - { baseSize: 32, customSize: '34px' }, - { baseSize: 48, customSize: '55px' }, - { baseSize: 72, customSize: '89px' }, - { baseSize: 128, customSize: '144px' }, -]; - -/** Renders an Avatar at a few custom sizes */ -const AvatarCustomSizeList: React.FC< - AvatarProps & { - names?: readonly string[]; - images?: readonly string[]; - } -> = props => { - const { names, images, ...restOfProps } = props; - - return ( -
- {customSizes.map(({ baseSize, customSize }, i) => ( - - ))} -
- ); -}; - -storiesOf('Avatar Converged', module) - .addDecorator(story => ( -
-
- {story()} -
-
- )) - .addDecorator(story => ( - {story()} - )) - .addStory( - 'basic', - () => ( -
- - - - - } /> - } shape="square" /> - } shape="square" /> - - -
- ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('size+name', () => ) - .addStory('size+icon+badge+square', () => ) - .addStory('size+image+badge', () => ) - .addStory('size+inactive+badge', () => ( - - )) - .addStory('size+active+badge', () => ( - - )) - .addStory('size+active+shadow', () => ( - - )) - .addStory('size+active+ring-shadow', () => ( - - )) - .addStory('customSize+image', () => ) - .addStory('customSize+name+badge', () => ( - - )) - .addStory('customSize+icon+active', () => ) - .addStory( - 'color', - () => { - const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' }; - - return ( -
-
- - -
-
- {examples.name.map(name => ( - - ))} -
-
- {examples.namedColors.map(color => ( - - ))} -
-
- ); - }, - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('image-bad-url', () => ); diff --git a/apps/tmp/AvatarGroup.stories.tsx b/apps/tmp/AvatarGroup.stories.tsx deleted file mode 100644 index 80c3154f080ad9..00000000000000 --- a/apps/tmp/AvatarGroup.stories.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { StoryWright, Steps } from 'storywright'; -import { - AvatarGroup, - AvatarGroupItem, - AvatarGroupPopover, - AvatarGroupPopoverProps, - AvatarGroupProps, - partitionAvatarGroupItems, -} from '@fluentui/react-avatar'; -import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; - -const names = [ - 'Katri Athokas', - 'Elvia Atkins', - 'Mauricio August', - 'Colin Ballinger', - 'Lydia Bauer', - 'Amanda Brady', - 'Henry Brill', - 'Celeste Burton', - 'Robin Counts', - 'Tim Deboer', - 'Cameron Evans', - 'Isaac Fielder', - 'Cecil Folk', - 'Miguel Garcia', - 'Wanda Howard', - 'Mona Kane', - 'Kat Larsson', - 'Ashley McCarthy', - 'Johnie McConnell', - 'Allan Munger', - 'Erik Nason', - 'Kristin Patterson', - 'Daisy Phillips', - 'Carole Poland', - 'Carlos Slattery', - 'Robert Tolbert', - 'Kevin Sturgis', - 'Charlotte Waltson', - 'Elliot Woodward', -]; - -const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; - -const AvatarGroupList: React.FC< - AvatarGroupProps & { overflowIndicator?: AvatarGroupPopoverProps['indicator'] } -> = props => { - const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); - - return ( -
- {sizes.map(size => ( - - {inlineItems.map(name => ( - - ))} - - {overflowItems.map(name => ( - - ))} - - - ))} -
- ); -}; - -// Non-interactive stories -storiesOf('AvatarGroup Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - {story()} - )) - .addStory('basic', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('layoutStack', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory( - 'layoutPie-1', - () => ( -
- - - - - - -
- ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'layoutPie-2', - () => ( -
- - - - - - - - -
- ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('layoutPie', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('overflowIndicator', () => , { - includeHighContrast: true, - includeDarkMode: true, - }); - -// Interactive stories -storiesOf('AvatarGroup Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'overflowContent', - () => { - const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names }); - return ( -
- - {inlineItems.map(name => ( - - ))} - - {overflowItems.map(name => ( - - ))} - - -
- ); - }, - { - includeHighContrast: true, - includeDarkMode: true, - }, - ); diff --git a/apps/tmp/Button.stories.tsx b/apps/tmp/Button.stories.tsx deleted file mode 100644 index a194ef7d62b8c1..00000000000000 --- a/apps/tmp/Button.stories.tsx +++ /dev/null @@ -1,569 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button'; -import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; - -const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); - -const steps = new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - -storiesOf('Button Converged', module) - .addDecorator(story => {story()}) - .addStory('Default', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Circular', () => ( - - )) - .addStory('Outline', () => ( - - )) - .addStory( - 'Primary', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Subtle', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Transparent', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Disabled', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Outline Disabled', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Primary Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Subtle Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Transparent Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('Size small', () => ( - - )) - .addStory('Size large', () => ( - - )) - .addStory('Size small - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory('Size medium - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory('Size large - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory( - 'With icon before content', - () => ( - - ), - { - includeRtl: true, - }, - ) - .addStory( - 'With icon after content', - () => ( - - ), - { includeRtl: true }, - ) - .addStory('Icon only', () => - - - -); - -storiesOf('Card Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - .addStory('card templates', () => ( -
- - - sales presentation preview - - - Sales analysis 2019 presentation - - } - description={Folder > Presentations} - /> - -
- )) - .addStory( - 'appearance', - () => ( -
-
-

Filled

- - - -
-
-

Filled alternative

- - - -
-
-

Outline

- - - -
-
-

Subtle

- - - -
-
- ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('size', () => ( -
- - - - - - - - - -
- )) - .addStory('orientation', () => ( -
-
-

Vertical

- - - -
-
-

Horizontal

- - - -
-
- )) - .addStory('CardHeader', () => ( - - - App Name - - } - description={Developer} - action={ - - - - - }>Cut - }>Edit - }>Paste - - - - ), - { includeRtl: true }, - ); - -storiesOf('Menu Converged - secondary content', module) - .addDecorator(story => ( - {story()} - )) - .addStory( - 'default', - () => ( - - - - - - - - } secondaryContent="Ctrl+X"> - Cut - - }>Edit - } secondaryContent="Ctrl+P"> - Paste - - - - - ), - { includeRtl: true }, - ); - -storiesOf('Menu Converged - groups', module) - .addDecorator(story => {story()}) - .addStory( - 'default', - () => ( - - - - - - - - - Section header - }>Cut - }>Paste - }>Edit - - - - Section header - }>Cut - }>Paste - }>Edit - - - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ); - -storiesOf('Menu Converged - selection', module) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'checkbox', - () => ( - - - - - - - - } name="edit" value="cut"> - Cut - - } name="edit" value="paste"> - Paste - - } name="edit" value="edit"> - Edit - - - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ); - -storiesOf('Menu Converged - selection groups', module) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'default', - () => ( - - - - - - - - - Checkbox group - } name="edit" value="cut"> - Cut - - } name="edit" value="paste"> - Paste - - } name="edit" value="edit"> - Edit - - - - - Radio group - } name="font" value="segoe"> - Segoe - - } name="font" value="calibri"> - Caliri - - } name="font" value="arial"> - Arial - - - - - - ), - { includeRtl: true }, - ); - -storiesOf('Menu Converged - nested submenus', module) - .addDecorator(story => ( - // https://github.com/microsoft/fluentui/issues/19782 - {story()} - )) - .addStory( - 'default', - () => ( - - - - - - - - New - New Window - Open Folder - - - Preferences - - - - - New - New Window - Open Folder - - - - - - - ), - { includeRtl: true }, - ); - -storiesOf('Menu Converged - split item', module) - .addDecorator(story => ( - // https://github.com/microsoft/fluentui/issues/19782 - {story()} - )) - .addStory( - 'default', - () => ( - - - - - - - - New - New Window - Open Folder - - - Open - - - - - - - - In browser - In desktop app - In mobile - - - - - - - ), - { includeRtl: true }, - ); - -const ContextMenuArea = React.forwardRef((props, ref) => { - return ( -
- - - - - - - - New - New Window - Open File - - - Open Folder - - - - - New - New Window - Open File - Open Folder - - - - - - -
- ); -}); - -storiesOf('Menu nested within a MenuTrigger', module) - .addDecorator(story => ( - // https://github.com/microsoft/fluentui/issues/19782 - {story()} - )) - .addStory('default', () => ( - - - - - - - - New - New Window - Open File - Open Folder - - - - )); - -// this places text in the icon slot to verify alignment when not using v9 icons -storiesOf('Menu Converged - icon slotted content', module) - .addDecorator(story => ( - {story()} - )) - .addStory( - 'default', - () => ( - - - - - - - - X} secondaryContent="Ctrl+X"> - Cut - - C} secondaryContent="Ctrl+C"> - Copy - - V} secondaryContent="Ctrl+V"> - Paste - - - - - ), - { includeRtl: true }, - ); - -// this places text in the submenuIndicator slot to verify alignment when not using v9 icons -storiesOf('Menu Converged - submenuIndicator slotted content', module) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'default', - () => ( - - - - - - - - - - N}> - New - - - - - - File - Folder - - - P}> - Project - - - - - - Financial - Planning - Status - - - - - - - - - - ), - { includeRtl: true }, - ); diff --git a/apps/tmp/Persona.stories.tsx b/apps/tmp/Persona.stories.tsx deleted file mode 100644 index 2a6c6499380254..00000000000000 --- a/apps/tmp/Persona.stories.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Persona } from '@fluentui/react-persona'; -import { AvatarSizes } from '@fluentui/react-avatar'; -import { BadgeProps } from '@fluentui/react-badge/src/Badge'; - -const avatarSizes: AvatarSizes[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; -const badgeSizes: BadgeProps['size'][] = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large']; - -storiesOf('Persona Converged', module) - .addDecorator(story => ( -
- {story()} -
- )) - .addDecorator(story => ( - {story()} - )) - .addStory( - 'basic', - () => ( -
- - - -
- ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('single-double-lines', () => ( -
- - - - - - -
- )) - .addStory('size-avatar', () => ( -
- {avatarSizes.map(size => ( - - ))} -
- )) - .addStory('size-presence', () => ( -
- {badgeSizes.map(size => ( - - ))} -
- )) - .addStory('scaling', () => ( -
- - - - -
- )); diff --git a/apps/tmp/Popover.stories.tsx b/apps/tmp/Popover.stories.tsx deleted file mode 100644 index da3e47cb1bf395..00000000000000 --- a/apps/tmp/Popover.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover'; -import { tokens } from '@fluentui/react-theme'; -import { TestWrapperDecorator } from '../utilities/index'; - -const PopoverPositioning: React.FC = () => { - const positions = [ - ['above', 'start'], - ['above', 'center'], - ['above', 'end'], - ['below', 'start'], - ['below', 'center'], - ['below', 'end'], - ['before', 'top'], - ['before', 'center'], - ['before', 'bottom'], - ['after', 'top'], - ['after', 'center'], - ['after', 'bottom'], - ] as const; - - const [target, setTarget] = React.useState(null); - const [open, setOpen] = React.useState(false); - - return ( -
-
- {positions.map(([position, align]) => ( - - -
{position + ' ' + align}
- - - ))} - - -
-
- ); -}; - -storiesOf('Popover Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - - {story()} - - )) - .addStory('positioning', () => , { includeRtl: true, includeHighContrast: true }); - -storiesOf('Popover Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - - {story()} - - )) - .addStory('avoid scrolling', () => { - return ( - - - - - - {sampleText} -
- - -
- - - ); - }); - -const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. In pellentesque massa placerat duis - ultricies lacus sed turpis. Eros donec ac odio tempor. Mattis molestie a iaculis at erat. Aenean euismod elementum nisi - quis eleifend quam. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Sed euismod nisi porta - lorem mollis aliquam ut porttitor leo. Lorem ipsum dolor sit amet. Id faucibus nisl tincidunt eget nullam. Fermentum - posuere urna nec tincidunt praesent semper. Dolor sit amet consectetur adipiscing. Ut enim blandit volutpat maecenas - volutpat blandit aliquam etiam erat. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. - Dignissim convallis aenean et tortor at risus. Tristique senectus et netus et malesuada. Sed blandit libero volutpat - sed cras ornare arcu dui. Arcu dictum varius duis at consectetur lorem. Montes nascetur ridiculus mus mauris vitae. Ut - ornare lectus sit amet est placerat in egestas.`; diff --git a/apps/tmp/Positioning.stories.tsx b/apps/tmp/Positioning.stories.tsx deleted file mode 100644 index 183e1e8f90fb9e..00000000000000 --- a/apps/tmp/Positioning.stories.tsx +++ /dev/null @@ -1,580 +0,0 @@ -import * as React from 'react'; -import { - usePositioning, - createArrowStyles, - PositioningProps, - PositioningVirtualElement, - PositioningImperativeRef, -} from '@fluentui/react-positioning'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import { useMergedRefs } from '@fluentui/react-utilities'; -import { tokens } from '@fluentui/react-theme'; -import { storiesOf } from '@storybook/react'; -import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { StoryWright, Steps } from 'storywright'; - -const useStyles = makeStyles({ - wrapper: { - display: 'flex', - ...shorthands.gap('5px'), - backgroundColor: tokens.colorNeutralBackground1, - - '& .target': { - color: tokens.colorNeutralForeground1, - backgroundColor: tokens.colorNeutralBackground1, - ...shorthands.border('2px', 'dashed', 'green'), - width: '400px', - height: '200px', - }, - }, - - gridWrapper: { - width: '400px', - height: '400px', - display: 'grid', - gridTemplateColumns: 'auto auto auto', - columnGap: '20px', - rowGap: '50px', - }, - - boundary: { - ...shorthands.border('2px', 'dashed', 'red'), - }, - - box: { - ...shorthands.padding('15px'), - ...shorthands.border('1px', 'solid', 'blue'), - backgroundColor: 'white', - }, - - arrow: { - ...createArrowStyles({ arrowHeight: 8 }), - backgroundColor: 'red', - }, - - seeThrough: { - opacity: 0.6, - }, - - visibilityModifiers: { - backgroundColor: '#ccc', - minHeight: '60px', - width: '200px', - - '[data-popper-reference-hidden]': { - outlineWidth: '5px', - outlineStyle: 'solid', - outlineColor: 'red', - }, - '[data-popper-escaped]': { - backgroundColor: 'yellow', - }, - '[data-popper-is-intersecting]': { - outlineWidth: '5px', - outlineStyle: 'solid', - outlineColor: 'green', - }, - }, -}); - -const positions = [ - ['above', 'start'], - ['above', 'center'], - ['above', 'end'], - ['below', 'start'], - ['below', 'center'], - ['below', 'end'], - ['before', 'top'], - ['before', 'center'], - ['before', 'bottom'], - ['after', 'top'], - ['after', 'center'], - ['after', 'bottom'], -] as const; - -const Box = React.forwardRef>((props, ref) => { - const styles = useStyles(); - return ( -
- {props.children} -
- ); -}); - -const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ positionFixed }) => { - const styles = useStyles(); - const positionedRefs = positions.reduce[]>((acc, cur) => { - const positioningOptions: PositioningProps = { position: cur[0], align: cur[1] }; - // positionFixed is not public yet - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - positioningOptions.positionFixed = positionFixed; - - // this loop is deterministic - // eslint-disable-next-line react-hooks/rules-of-hooks - const positioningRefs = usePositioning(positioningOptions); - acc.push(positioningRefs); - return acc; - }, []); - - const targetRef = useMergedRefs(...positionedRefs.map(x => x.targetRef)); - - return ( -
- {positions.map(([position, align], i) => ( - {`${position}-${align}`} - ))} -
-
- ); -}; - -const Offset = () => { - const styles = useStyles(); - const positionedRefs = positions.reduce[]>((acc, cur) => { - // this loop is deterministic - // eslint-disable-next-line react-hooks/rules-of-hooks - const positioningRefs = usePositioning({ - position: cur[0], - align: cur[1], - offset: { crossAxis: 10, mainAxis: 10 }, - }); - acc.push(positioningRefs); - return acc; - }, []); - - const targetRef = useMergedRefs(...positionedRefs.map(x => x.targetRef)); - - return ( -
- {positions.map(([position, align], i) => ( - {`${position}-${align}`} - ))} -
-
- ); -}; - -const OffsetFunction = () => { - const styles = useStyles(); - const positionedRefs = positions.reduce[]>((acc, cur) => { - // this loop is deterministic - // eslint-disable-next-line react-hooks/rules-of-hooks - const positioningRefs = usePositioning({ - position: cur[0], - align: cur[1], - offset: () => ({ crossAxis: 10, mainAxis: 10 }), - }); - acc.push(positioningRefs); - return acc; - }, []); - - const targetRef = useMergedRefs(...positionedRefs.map(x => x.targetRef)); - - return ( -
- {positions.map(([position, align], i) => ( - {`${position}-${align}`} - ))} -
-
- ); -}; - -const CoverTarget = () => { - const styles = useStyles(); - const positionedRefs = positions.reduce[]>((acc, cur) => { - // this loop is deterministic - // eslint-disable-next-line react-hooks/rules-of-hooks - const positioningRefs = usePositioning({ position: cur[0], align: cur[1], coverTarget: true }); - acc.push(positioningRefs); - return acc; - }, []); - - return ( -
- {positions.map(([position, align], i) => ( -
- - {`${position}-${align}`} -
- ))} -
- ); -}; - -const VerticalFlip = () => { - const styles = useStyles(); - const [boundary, setBoundary] = React.useState(null); - const topPopper = usePositioning({ position: 'above', flipBoundary: boundary ?? undefined }); - const bottomPopper = usePositioning({ position: 'below', flipBoundary: boundary ?? undefined }); - - return ( -
- - Flip - - - Flip -
- ); -}; - -const HorizontalFlip = () => { - const styles = useStyles(); - const [boundary, setBoundary] = React.useState(null); - const startPopper = usePositioning({ position: 'before', flipBoundary: boundary ?? undefined }); - const endPopper = usePositioning({ position: 'after', flipBoundary: boundary ?? undefined }); - const { dir } = useFluent(); - const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight'; - - return ( -
- - Flip - - - Flip -
- ); -}; - -const VerticalOverflow = () => { - const styles = useStyles(); - const [boundary, setBoundary] = React.useState(null); - const topPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined }); - const bottomPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined }); - - return ( -
- - Shift - - - Shift -
- ); -}; - -const HorizontalOverflow = () => { - const styles = useStyles(); - const [boundary, setBoundary] = React.useState(null); - const startPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined }); - const endPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined }); - const { dir } = useFluent(); - const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight'; - - return ( -
- - - Shift - - - - - Shift - -
- ); -}; - -const Pinned = () => { - const styles = useStyles(); - const [boundary, setBoundary] = React.useState(null); - const { containerRef, targetRef } = usePositioning({ - position: 'above', - flipBoundary: boundary ?? undefined, - pinned: true, - }); - - return ( -
- - Does not flip -
- ); -}; - -const Arrow: React.FC = () => { - const styles = useStyles(); - const positionedRefs = positions.reduce[]>((acc, cur) => { - // this loop is deterministic - // eslint-disable-next-line react-hooks/rules-of-hooks - const positioningRefs = usePositioning({ position: cur[0], align: cur[1] }); - acc.push(positioningRefs); - return acc; - }, []); - - const targetRef = useMergedRefs(...positionedRefs.map(x => x.targetRef)); - - return ( -
- {positions.map(([position, align], i) => ( - -
- {`${position}-${align}`} - - ))} -
-
- ); -}; - -const AutoSize = () => { - const styles = useStyles(); - const { containerRef, targetRef } = usePositioning({ - position: 'below', - autoSize: true, - }); - - return ( -
- - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat - pretium nibh ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta - nibh venenatis cras sed felis eget. Enim sed faucibus turpis in. Non blandit massa enim nec dui nunc mattis. Ut - eu sem integer vitae justo. Lacus vestibulum sed arcu non. Vivamus arcu felis bibendum ut. Sagittis vitae et leo - duis ut diam quam nulla porttitor. Amet est placerat in egestas erat imperdiet. Dapibus ultrices in iaculis nunc - sed augue. Risus sed vulputate odio ut enim blandit volutpat maecenas. Orci dapibus ultrices in iaculis nunc sed - augue lacus. Quam elementum pulvinar etiam non quam. Tempor commodo ullamcorper a lacus vestibulum sed arcu. - Nunc non blandit massa enim nec. Venenatis a condimentum vitae sapien. Sodales ut eu sem integer vitae justo - eget magna. In aliquam sem fringilla ut morbi tincidunt augue. Diam volutpat commodo sed egestas egestas - fringilla phasellus faucibus scelerisque. Semper eget duis at tellus. Diam donec adipiscing tristique risus nec - feugiat in fermentum posuere. Amet volutpat consequat mauris nunc congue nisi vitae. Hendrerit gravida rutrum - quisque non tellus. Aliquet eget sit amet tellus. Libero id faucibus nisl tincidunt. Amet nulla facilisi morbi - tempus iaculis urna id. - -
- ); -}; - -const DisableTether = () => { - const styles = useStyles(); - const { containerRef, targetRef } = usePositioning({ - position: 'above', - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - // eslint-disable-next-line @typescript-eslint/naming-convention - unstable_disableTether: 'all', - }); - - return ( - <> -
- - Untethered -
- The target is outside of the boundary. -
- The positioned element is still fully visible. - - ); -}; - -const VirtualElement = () => { - const [target, setTarget] = React.useState(null); - - const { containerRef, targetRef } = usePositioning({ - position: 'below', - align: 'end', - }); - - React.useEffect(() => { - if (target) { - const virtualElement: PositioningVirtualElement = { - getBoundingClientRect: () => target.getBoundingClientRect(), - }; - - targetRef.current = virtualElement; - } - }, [target, targetRef]); - - return ( - <> - - Anchored using virtual element - - ); -}; - -const TargetProp = () => { - const [target, setTarget] = React.useState(null); - - const { containerRef } = usePositioning({ - target, - position: 'below', - align: 'end', - }); - - return ( - <> - - Anchored using target property - - ); -}; - -const ImperativeTarget = () => { - const positioningRef = React.useRef({ updatePosition: () => null, setTarget: () => null }); - const ref = React.useRef(null); - - const { containerRef } = usePositioning({ - positioningRef, - position: 'below', - align: 'end', - }); - - React.useEffect(() => { - if (ref.current) { - positioningRef.current.setTarget(ref.current); - } - }, []); - - return ( - <> - - Anchored using setTarget - - ); -}; - -const VisibilityModifiers = () => { - const styles = useStyles(); - const popper = usePositioning({ align: 'center', position: 'above' }); - - return ( - <> -

- This visual test asserts that visual styles are applied based on popper element's state: -

-
    -
  • - green when the popper element intersects boundaries -
    • -
  • - red when the reference is hidden -
    • -
  • - yellow when the popper escapes the reference element's boundary -
    • -
- -
- {Array(20) - .fill(null) - .map((_, i) => ( -
-

message: {i}

-
- ))} -
- - Box with visibility modifiers - - - ); -}; - -storiesOf('Positioning', module) - .addDecorator(story => ( -
- {story()} -
- )) - .addStory('position and align props', () => , { includeRtl: true }) - .addStory('offset', () => , { includeRtl: true }) - .addStory('offset function', () => , { includeRtl: true }) - .addStory('coverTarget', () => , { includeRtl: true }) - .addStory('vertical flip', () => ) - .addStory('horizontal flip', () => , { includeRtl: true }) - .addStory('vertical overflow', () => ) - .addStory('horizontal overflow', () => , { includeRtl: true }) - .addStory('pinned', () => ) - .addStory('auto size', () => ) - .addStory('disable tether', () => ) - .addStory('position fixed', () => , { includeRtl: true }) - .addStory('virtual element', () => ) - .addStory('target property', () => ) - .addStory('imperative target', () => ) - .addStory('visibility modifiers', () => ( - - - - )) - .addStory('arrow', () => , { includeRtl: true }); diff --git a/apps/tmp/Radio.stories.tsx b/apps/tmp/Radio.stories.tsx deleted file mode 100644 index 8e8ad38cf9ee8e..00000000000000 --- a/apps/tmp/Radio.stories.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Radio, RadioGroup } from '@fluentui/react-radio'; -import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; - -storiesOf('Radio Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('unchecked', () => , { - includeDarkMode: true, - includeHighContrast: true, - }) - .addStory('checked', () => , { - includeDarkMode: true, - includeHighContrast: true, - }) - .addStory('disabled', () => , { - includeDarkMode: true, - includeHighContrast: true, - }); - -storiesOf('Radio Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - {story()} - )) - .addStory('disabled+checked', () => , { - includeDarkMode: true, - includeHighContrast: true, - }) - .addStory('no-label', () => , { includeRtl: true }) - .addStory('label-after', () => , { includeRtl: true }) - .addStory('label-below', () => , { includeRtl: true }) - .addStory( - 'label-wrapping', - () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua - - } - /> - ), - { includeRtl: true }, - ) - .addStory('required', () => , { includeRtl: true }) - // - // RadioGroup - // - .addStory( - 'group-vertical', - () => ( - - - - - - ), - { includeRtl: true }, - ) - .addStory( - 'group-horizontal', - () => ( - - - - - - ), - { includeRtl: true }, - ) - .addStory( - 'group-horizontal-stacked', - () => ( - - - - - - ), - { includeRtl: true }, - ) - .addStory( - 'group-disabled', - () => ( - - - - - - ), - { includeRtl: true }, - ); diff --git a/apps/tmp/Select.stories.tsx b/apps/tmp/Select.stories.tsx deleted file mode 100644 index 7cd1df350e7e89..00000000000000 --- a/apps/tmp/Select.stories.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Select } from '@fluentui/react-select'; -import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; - -storiesOf('Select Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('Appearance: outline (default)', () => ( - - )) - .addStory('Appearance: underline', () => ( - - )) - .addStory('Appearance: filled-darker', () => ( -
- -
- )) - .addStory('Appearance: filled-lighter', () => ( -
- -
- )); - -// Non-interactive stories -storiesOf('Select Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - // note: due to reused "Select Converged" story ID, TestWrapperDecoratorFixedWidth is also reused - .addDecorator(story => ( - {story()} - )) - .addStory('With value', () => ( - - )) - .addStory('Disabled', () => ( - - )) - .addStory('Size: small', () => ( - - )) - .addStory('Size: large', () => ( - - )) - .addStory('Custom Icon', () => ( - - )); diff --git a/apps/tmp/Slider.stories.tsx b/apps/tmp/Slider.stories.tsx deleted file mode 100644 index 20beb5de9df3f8..00000000000000 --- a/apps/tmp/Slider.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Slider } from '@fluentui/react-slider'; - -storiesOf('Slider Converged', module) - .addDecorator(story => ( - - {story()} - - )) - .addStory('Root', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Vertical', () => , { - includeRtl: true, - }) - .addStory('Disabled', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Disabled Vertical', () => ); diff --git a/apps/tmp/SpinButton.stories.tsx b/apps/tmp/SpinButton.stories.tsx deleted file mode 100644 index eed31410c0e10c..00000000000000 --- a/apps/tmp/SpinButton.stories.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton'; -import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; - -const cropTo = '.testWrapper'; - -storiesOf('SpinButton Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('Appearance: outline (default)', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Appearance: underline', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Appearance: filled-darker', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory( - 'Appearance: filled-lighter', - () => ( - // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme) -
- -
- ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('Display Value', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Disabled', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }); - -// The order of increment/decrement mouse down matters for max bound -storiesOf('SpinButton Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('At Max Bound', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }); - -// The order of increment/decrement mouse down matters for min bound -storiesOf('SpinButton Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('At Min Bound', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }); - -storiesOf('SpinButton Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => {story()}) - .addStory('Size: small', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Size: medium (default)', () => , { includeRtl: true }); diff --git a/apps/tmp/Switch.stories.tsx b/apps/tmp/Switch.stories.tsx deleted file mode 100644 index 74fe9e050efa45..00000000000000 --- a/apps/tmp/Switch.stories.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Switch } from '@fluentui/react-switch'; -import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; - -storiesOf('Switch Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'Enabled and unchecked', - () => , - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Enabled and checked', - () => , - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Disabled and unchecked', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Disabled and checked', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('With label above', () => , { - includeRtl: true, - }) - .addStory('With label after', () => , { - includeRtl: true, - }) - .addStory('With label before', () => , { - includeRtl: true, - }) - .addStory('With label wrapping', () => ( - - )) - .addStory('Required', () => ); diff --git a/apps/tmp/Table.stories.tsx b/apps/tmp/Table.stories.tsx deleted file mode 100644 index 5d794119b8759d..00000000000000 --- a/apps/tmp/Table.stories.tsx +++ /dev/null @@ -1,559 +0,0 @@ -import * as React from 'react'; -import { - FolderRegular, - EditRegular, - OpenRegular, - DocumentRegular, - PeopleRegular, - DocumentPdfRegular, - VideoRegular, - MoreHorizontalRegular, -} from '@fluentui/react-icons'; -import { Avatar } from '@fluentui/react-avatar'; -import { PresenceBadgeStatus } from '@fluentui/react-badge'; -import { - Table, - TableHeader, - TableBody, - TableHeaderCell, - TableCell, - TableRow, - TableCellLayout, - TableSelectionCell, - TableCellActions, - TableProps, -} from '@fluentui/react-table'; -import { Button } from '@fluentui/react-button'; -import { storiesOf } from '@storybook/react'; -import { StoryWright, Steps } from 'storywright'; - -const items = [ - { - file: { label: 'Meeting notes', icon: }, - author: { label: 'Max Mustermann', status: 'available' }, - lastUpdated: { label: '7h ago', timestamp: 1 }, - lastUpdate: { - label: 'You edited this', - icon: , - }, - }, - { - file: { label: 'Thursday presentation', icon: }, - author: { label: 'Erika Mustermann', status: 'busy' }, - lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 }, - lastUpdate: { - label: 'You recently opened this', - icon: , - }, - }, - { - file: { label: 'Training recording', icon: }, - author: { label: 'John Doe', status: 'away' }, - lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 }, - lastUpdate: { - label: 'You recently opened this', - icon: , - }, - }, - { - file: { label: 'Purchase order', icon: }, - author: { label: 'Jane Doe', status: 'offline' }, - lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 }, - lastUpdate: { - label: 'You shared this in a Teams chat', - icon: , - }, - }, -]; - -const columns = [ - { columnKey: 'file', label: 'File' }, - { columnKey: 'author', label: 'Author' }, - { columnKey: 'lastUpdated', label: 'Last updated' }, - { columnKey: 'lastUpdate', label: 'Last update' }, -]; - -interface SharedVrTestArgs { - noNativeElements: TableProps['noNativeElements']; -} - -const CellActionsDefault: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - -
-); - -const CellActionsAlwaysVisible: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - -
-); - -const CellActionsInHeaderCell: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - -
-); - -const SizeMedium: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - {item.file.label} - - - } - > - {item.author.label} - - - - {item.lastUpdated.label} - - - {item.lastUpdate.label} - - - ))} - -
-); - -const SizeSmall: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - {item.file.label} - - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const SizeSmaller: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - {item.file.label} - - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const PrimaryCell: React.FC = ({ noNativeElements }) => ( - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - - - } - > - {item.author.label} - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const Multiselect: React.FC = ({ noNativeElements }) => ( - - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const MultiselectChecked: React.FC = ({ noNativeElements }) => ( - - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map(item => ( - - - - {item.file.label} - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const MultiselectMixed: React.FC = ({ noNativeElements }) => ( - - - - - {columns.map(column => ( - {column.label} - ))} - - - - {items.map((item, i) => ( - - - - {item.file.label} - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const Singleselect: React.FC = ({ noNativeElements }) => ( - - - - - - - {items.map(item => ( - - - - {item.file.label} - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -const SingleselectChecked: React.FC = ({ noNativeElements }) => ( - - - - - - - {items.map((item, i) => ( - - - - {item.file.label} - - - - } - > - {item.author.label} - - - {item.lastUpdated.label} - - {item.lastUpdate.label} - - - ))} - -
-); - -([true, false] as const).forEach(noNativeElements => { - const layoutName = noNativeElements ? 'flex' : 'table'; - storiesOf(`Table layout ${layoutName} - cell actions`, module) - .addDecorator(story => ( - {story()} - )) - .addStory('default', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('always visible', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('in header cell', () => ); - - storiesOf(`Table layout ${layoutName}`, module) - .addStory('size - medium', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('size - small', () => ) - .addStory('size - smaller', () => ) - .addStory('primary cell', () => ) - .addStory('multiselect', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('multiselect (checked)', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('multiselect (mixed)', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('single select', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('single select (checked)', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }); -}); diff --git a/apps/tmp/Tabs.stories.tsx b/apps/tmp/Tabs.stories.tsx deleted file mode 100644 index 66bd36d68668c5..00000000000000 --- a/apps/tmp/Tabs.stories.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { TabList, Tab } from '@fluentui/react-tabs'; - -storiesOf('TabList and Tab Converged', module) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'Default', - () => ( - - First - - Second - - Third - - ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('Vertical', () => ( - - First - - Second - - Third - - )) - .addStory( - 'Subtle appearance', - () => ( - - First - - Second - - Third - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Small size', - () => ( - - First - - Second - - Third - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Vertical and small size', - () => ( - - First - - Second - - Third - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Tab Selected (default)', - () => ( - - First - - Second - - Third - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Tab Selected', - () => ( - - First - - Second - - Third - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'With icon', - () => ( - - - First - - - Second - - - Third - - - ), - { - includeRtl: true, - }, - ) - .addStory( - 'With icon and vertical', - () => ( - - - First - - - Second - - - Third - - - ), - { - includeRtl: true, - }, - ) - .addStory( - 'With icon only', - () => ( - - - - - - ), - { - includeRtl: false, - }, - ) - .addStory( - 'With icon only and vertical', - () => ( - - - - - - ), - { - includeRtl: false, - }, - ); diff --git a/apps/tmp/Text.stories.tsx b/apps/tmp/Text.stories.tsx deleted file mode 100644 index 3e15d88a08856f..00000000000000 --- a/apps/tmp/Text.stories.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { StoryWright, Steps } from 'storywright'; -import { - Body1, - Caption1, - Display, - Subtitle1, - LargeTitle, - Subtitle2, - Text, - Title1, - Title2, - Title3, - Caption2, -} from '@fluentui/react-text'; - -storiesOf('Text Converged', module) - .addDecorator((story: () => React.ReactNode) => ( - -
- {story()} -
- - )) - .addStory( - 'Default', - () => ( - <> -

- Default - Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. -

-

- No wrapping - - Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. - -

-

- Truncate - - Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. - -

-

- Italic - - Hello, world - -

-

- Underline - - Hello, world - -

-

- Strikethrough - - Hello, world - -

-

- Sizes - - 100 - - - 200 - - - 300 - - - 400 - - - 500 - - - 600 - - - 700 - - - 800 - - - 900 - - - 1000 - -

-

- Fonts - - Base - - - Monospace - - - Numeric - -

-

- Weights - - Regular - - - Medium - - - Semibold - -

-

- Alignments - - Start - - - Center - - - End - - - Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. - -

- - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Typography wrappers', - () => ( - <> - Display - LargeTitle - Title1 - Title2 - Title3 - Subtitle1 - Subtitle2 - Body1 - Caption1 - Caption2 - - ), - { includeRtl: true }, - ); diff --git a/apps/tmp/Textarea.stories.tsx b/apps/tmp/Textarea.stories.tsx deleted file mode 100644 index 5019d06302260d..00000000000000 --- a/apps/tmp/Textarea.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { StoryWright, Steps } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { Textarea } from '@fluentui/react-textarea'; -import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; - -storiesOf('Textarea Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => ( - - {story()} - - )) - .addStory('Appearance: outline (default)', () =>